Web Design: What’s Next?

1. Web Design: What’s Next? Mary Czerwinski Microsoft Research Microsoft Research

2. 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 Microsoft Research

3. Limited Vision (Flat, 2D) Limited Audio One Hand Tied Behind Back No Speech No Gestures 1 Person Limited Tactile 1. Current Web UI DesignsWeak Support for Human Capabilities Microsoft Research

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. PerspectaView: http://www.perspectaview.com Microsoft Research

13. 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

14. Semantic VRML Layouts Chen & Czerwinski, 1998 Microsoft Research

15. 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

16. Speech Trends: MSR’s WebGuide Gene Ball--MSR UI Group Microsoft Research

17. Personal Adaptation Trends • Recommender Systems • Preferences • Profile Info • Privacy and Security Issues Microsoft Research

18. 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

19. 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

20. 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

21. Materials • 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

22. Microsoft Research

23. Microsoft Research

24. Microsoft Research

25. 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

26. Experiment 1--Results Microsoft Research

27. 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

28. 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

29. 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

30. Experiment 3---Perspecta® Microsoft Research

31. 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

32. Experiment 2--Results Subjective Questionnaire Avg. Rating • Spatial pretest mildly related to search speed: r=-.28 Microsoft Research

33. 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

34. 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

35. 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

36. 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

37. 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