web design what s next n.
Skip this Video
Loading SlideShow in 5 Seconds..
Web Design: What’s Next? PowerPoint Presentation
Download Presentation
Web Design: What’s Next?

Loading in 2 Seconds...

play fullscreen
1 / 37

Web Design: What’s Next? - PowerPoint PPT Presentation

  • Uploaded on

Web Design: What’s Next?. Mary Czerwinski Microsoft Research . Overview. A Framework for Evaluating Future Web Designs 1. Human Capabilities 2. Technological Trends 3. Social Use Dynamics Examples of Web HCI Trends Web Visualization Studies. Limited Vision (Flat, 2D).

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Web Design: What’s Next?' - patrice

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
web design what s next

Web Design: What’s Next?

Mary Czerwinski

Microsoft Research

Microsoft Research

  • A Framework for Evaluating Future Web Designs
    • 1. Human Capabilities
    • 2. Technological Trends
    • 3. Social Use Dynamics
  • Examples of Web HCI Trends
  • Web Visualization Studies

Microsoft Research




(Flat, 2D)

Limited Audio

One Hand

Tied Behind


No Speech

No Gestures

1 Person

Limited Tactile

1. Current Web UI DesignsWeak Support for Human Capabilities

Microsoft Research


1. Strong Web UI Design Can Leverage...

  • Perception
    • Spatial relationships
    • Pattern recognition
    • Object constancy
    • Auditory
    • Tactile
  • Cognitive
    • Spatial, temporal memory
    • Cognitive chunking
    • Attention
    • Categorization
  • Communication
    • Language
    • Gesture
    • Emotion

Microsoft Research


2. Exploiting Future Technologies

  • Look for & Exploit Multiple Discontinuities
    • Higher bandwidth affords multi-channel use
    • 3D: hardware ubiquitous, advanced displays
    • Speech + NLP: 30 year research payoff
    • Passive tracking: cameras ubiquitous
    • USB: multiple input devices
    • Audio: rich rendering engines

Microsoft Research

3 www social use trends
3. WWW Social Use Trends
  • Email is the killer app
  • 34.4 M US adults currently use email (up 44% from last year)*
  • AOL users say they spend 1/3 of their time in email, another 8% in chat*
  • More powerful communication software ubiquitous soon

*American Internet User Survey, Cyber Dialogue, Inc., Feb., 1998

Microsoft Research


Web Research Framework

  • Identify and engage human cognitive abilities
  • Exploit technology discontinuities
  • Leverage natural social web usage patterns
  • Result: easier access to more web information
  • Result: dramatic increase in web user base

Microsoft Research

example web trends info vis
Example Web Trends: Info Vis
  • Users need global and local info when searching large spaces of WWW
    • Global---used to guide lower-level, detailed tracking of information during a query
  • Both levels of detail cropping up in new browsers
  • Lack of empirical evidence of benefits

Microsoft Research

new browsers the claims
New Browsers: The Claims
  • Techniques attempt to exploit pattern perception to enable preattentive interaction (e.g.,Eick, 1997)
  • Cognitive capacity freed up so user can attend to relevant info related to the search task

Microsoft Research

more claims
More Claims
  • A formula for the next generation UI (Card, 1997) :
    • Perceptually-loaded,
    • Use human, time-layered interaction (use human interaction times + object constancy),
    • Rely on focus + periphery, animated transitions, enlarged, 3D spaces and moving points of view

Microsoft Research

revealing things smithsonian without walls
Revealing Things--Smithsonian without Walls
  • http://www.si.edu/revealingthings/load-index.html
  • Uses everyday objects to tell stories about people, their cultures, ... their possessions.

Microsoft Research

3d hyperbolic space
3D Hyperbolic Space
  • Tamara Munzner (1997)
  • Hyperbolic navigation affords a Focus+Context view
  • Hierarchies of over 20,000 nodes
  • User studies badly needed

Microsoft Research

semantic vrml layouts
Semantic VRML Layouts

Chen & Czerwinski, 1998

Microsoft Research

natrifical s the brain http www natrificial com
Natrifical’s “The Brain”http://www.natrificial.com
  • Custom design your web sites and docs
  • See related “thoughts”
  • Shifting animation disorienting, lose sense of place

Microsoft Research

speech trends msr s webguide
Speech Trends: MSR’s WebGuide

Gene Ball--MSR UI Group

Microsoft Research

personal adaptation trends
Personal Adaptation Trends
  • Recommender Systems
  • Preferences
  • Profile Info
  • Privacy and Security Issues

Microsoft Research

case study applying framework
UI Research group studies human spatial abilities to design better electronic worlds

Research ways of chunking multi-modal interaction to reduce cognitive load

Examines 3D text perception at varying perspectives

Researches reading to support novel displays

Explores use of group psychology principles in support of virtual collaboration

Case Study Applying Framework

Microsoft Research

studies of browsers goals
Studies of Browsers:Goals
  • Initial attempt to track user performance across info vis techniques during queries
      • Hyperbolic browser versus hierarchical tree
      • PerspectaView’s “flythrough” user interface
  • Performance and preference data collected
  • “Lostness” measures and spatial abilities tracked

Microsoft Research

experiment 1 method
Experiment 1--Method
  • 16 Ss, all pc and web-savvy, ages 18-60
  • Tree hierarchy and hyperbolic browser
  • Within Ss design, 512 potential targets
  • 12 searches per browser, browser order counterbalanced
  • RTs, subjective measures, lostness and spatial ability pretest DVs

Microsoft Research

  • 512 lower-level entries from Encarta placed onto the web
  • Hierarchical structure built using same category headers as exist in Encarta today
  • 3 levels of eight items in hierarchy

Microsoft Research

experiment 1 results
Experiment 1--Results
  • Lostness:
    • No difference in lostness
    • Both hyper and tree browsers scored .38
  • Spatial ability
    • More predictive of fast hyperbolic searching (r=-.47 for hyper, -.39 for tree)

Microsoft Research

experiment 1 results1
Experiment 1--Results

Microsoft Research

experiment 1 results2
Experiment 1--Results

Hyper Tree

Which browser did you like better? 9 7

I liked the browser. (Disagree=1, Agree=5) 3.5 3.62

Right when I started, I knew what I could do with the browser. 3.38 4.44**

It was easy to get where I wanted to go with the browser. 3.8 4.1

The browser uses new technology. 3.06 1.5**

The browser has appealing graphics. 3.94 2**

The browser is easy to use. 3.94 4.19

  • Subjective Measures

Microsoft Research

experiment 1 discussion
Experiment 1 Discussion
  • No significant advantage for either browser
  • Tree hierarchy good for tracking traversal path if used systematically; overviews
  • Hyperbolic browser best for keeping global/local info in focus; category relatedness and size

Microsoft Research

experiment 2 perspecta
Experiment 2--Perspecta®
  • Hyperkinetic text and “fly-throughs”
  • Clients include CineMap, AllTheNews and others
  • Global and local information maintained, as well as “related topics” and cross-references
  • Previews of categories before committing

Microsoft Research

experiment 3 perspecta
Experiment 3---Perspecta®

Microsoft Research

experiment 2 method
Experiment 2--Method
  • 9 Ss, all PC and web-savvy
  • 18-60 years old, mode=25-35
  • Access web 4 or more times/week, on avg.
  • 14 movie title searches in CineMap
  • 1st search unassisted, tutorial before searches 2-14
  • Same DVs as Exp. 1 (no lostness)

Microsoft Research

experiment 2 results
Experiment 2--Results

Subjective Questionnaire Avg. Rating

  • Spatial pretest mildly related to search speed: r=-.28

Microsoft Research

experiment 2 usability issues
Experiment 2--Usability Issues
  • 1 or 2 clicks?
  • Lack of control in time and space
  • Category header issues
  • Too many cross-refs
  • Related topics trap
  • Confusion: headers v. titles and links
  • Small text difficult to read
  • RSI

Microsoft Research

experiment 2 good features
Experiment 2--Good Features
  • User can “sniff” around without committing
  • Use size of category to guide search
  • Use related topics
  • Use popup titles and info without flying in
  • Cool!

Microsoft Research

experiments 1 2 discussion
Experiments 1 & 2: Discussion
  • Better than Boolean! Users like visual UIs
  • Can see local/global focus, size and relatedness (hyperbolic browser)
  • Can keep track of where you’ve looked (hierarchical tree)
  • Search hints with little user effort (PerspectaView, hyperbolic browser)

Microsoft Research

discussion continued
Discussion Continued
  • But problems remain:
    • Users not as overwhelmed with large sets but screen real estate challenges
    • User/system terminology mismatches & trust
    • Anchoring
    • Initial training investment is high
    • Issues with spatial reasoning abilities &/or age
    • Need multiple options for searching

Microsoft Research

web design what s next1
Web Design: What’s Next?
  • Look at the trends
    • Social aspects of web usage (groupware, email, chat)
    • Technological (hw and sw)
    • Interaction styles--speech, adaptation, portability
  • Study human capabilities
  • Find the “sweet spot” in the design space

Microsoft Research