Microsoft ® Research Faculty Summit 2002 Building Scalable User Interfaces for Mobile Devices using.NET Technologies Benjamin B. Bederson Computer Science Department Human-Computer Interaction Lab University of Maryland Mary Czerwinski Large Display User Experience Group Microsoft Corporation

Scaling Information, Scaling Devices We always want more: information, pixels, speed, … We always want more: information, pixels, speed, … Whether big or small, the problems are similar: Whether big or small, the problems are similar:  Detect patterns and outliers  Find details without losing global context  Concentrate on task (stay “in the flow”) Information Visualization

Scaling Up How to scale up to large information sets? How to scale up to large information sets?  Technical problems  Perceptual limitations  Design problems Solution in just three easy steps: Solution in just three easy steps:

External Cognition Step 1: Recognize human limitations Step 1: Recognize human limitations

Human Visual Perception Step 2: Don’t underestimate the human brain Step 2: Don’t underestimate the human brain

Interaction Step 3: Add interaction. If a picture is worth a thousand words, an interactive interface is worth a thousand pictures. Step 3: Add interaction. If a picture is worth a thousand words, an interactive interface is worth a thousand pictures.

Scaling Up How do you show more than fits on the screen? How do you show more than fits on the screen?  abstract  link (web)  scroll (long documents)  overview+detail (e.g., photoshop)  zoom  fisheye distortion traditional new paradigms

Menus, menus, menus Problem: Selection from a long list Problem: Selection from a long list Growing importance with data-driven applications Growing importance with data-driven applications Traditional approaches: Traditional approaches: ArrowBars ArrowBars ScrollBars ScrollBars Hierarchies Hierarchies

Fisheye Menus Apply fisheye distortion to linear list Apply fisheye distortion to linear list Shows detail in context Shows detail in context Reduces mouse presses / taps Reduces mouse presses / taps Applet written in Java Applet written in Java Pocket PC version written in embedded C++ Pocket PC version written in embedded C++ Demo

Fisheye Menus

Fisheye Menu Evaluation Fisheye Menu v. Microsoft Pocket PC 2000™ Fisheye Menu v. Microsoft Pocket PC 2000™ Goal: Goal:  Understand scalability of fisheye menus Used real applications and icons Used real applications and icons

Methods 22 participants 22 participants Three independent variables Three independent variables  Menu type (fisheye vs. regular)  Menu length (20, 30, 40, 50)  Position of target within menu (first, second, or last third) Measured: Measured:  Time  Accuracy Total of 1230 trials Total of 1230 trials

Results —Task Times Tasks were performed faster using Fisheye Menus, F(1,1206)=29.4, p<0.001 Tasks were performed faster using Fisheye Menus, F(1,1206)=29.4, p<0.001  25% faster (4.0 vs 5.3 secs) Difference more pronounced for longer menus Difference more pronounced for longer menus And more pronounced for items near the end of the menus And more pronounced for items near the end of the menus

Results – Task Accuracy But, tasks were completed successfully significantly more often using traditional menu (97% v. 92%), F(1,1206)=22, p<0.001 But, tasks were completed successfully significantly more often using traditional menu (97% v. 92%), F(1,1206)=22, p<0.001 Difference more pronounced for items in middle of menu Difference more pronounced for items in middle of menu

Results – User Preference StartFisheye Prefer for short: Prefer for short: 82% 18%p=.04 Prefer for long: Prefer for long: 14% 86%p<.001 Perceived faster: Perceived faster: 14% 86%p<.001 Perceived easier: Perceived easier: 68% 32%p=.005

Discussion Cool idea, but not a clear winner Cool idea, but not a clear winner Some older users complained that it made them feel bad about their eyesight Some older users complained that it made them feel bad about their eyesight Other users wanted it immediately for all of their menus… Other users wanted it immediately for all of their menus… Interaction simpler on PDA because of Pen input Interaction simpler on PDA because of Pen input Bottom line: probably a good idea to offer as an option Bottom line: probably a good idea to offer as an option

Many tools support image management, annotation, and search. Our goal is to focus on browsing  avoid scrollbars, menus, and window mgmt  work in a home setting for family use  support co-present collaborative use  support serendipitous photo finding Photo Browsing

Motivated by my personal use of other tools with my 3-year-old daughter Important that:  she can direct use  follow flow as I control computer  interface feels comfortable  eliminate advance organization Design Motivation

Design:  Zoomable User Interface  Simple navigation interaction  Quantum Strip Treemap layout  Shows multiple directories of images  Can group by metadata PhotoMesa

Variation on treemaps: Space- filling subdivision of an input rectangle Variation on treemaps: Space- filling subdivision of an input rectangle Guarantees that each rectangle’s dimensions are an integral multiple of a constant Guarantees that each rectangle’s dimensions are an integral multiple of a constant Lays out images so that all images are the same size and are aligned on a single grid across rectangles Lays out images so that all images are the same size and are aligned on a single grid across rectangles Quantum Treemaps

Strip Treemaps Squarified treemaps: avg aspect ratio: 1.75 Strip treemaps: avg aspect ratio: 2.6 Squarified treemaps: avg aspect ratio: 1.75 Strip treemaps: avg aspect ratio: 2.6 User study showed that “readability” was 83% faster for strip than squarified on search task w/ 100 rects (2.5 sec vs 14.8 sec w/ 20 subjs). User study showed that “readability” was 83% faster for strip than squarified on search task w/ 100 rects (2.5 sec vs 14.8 sec w/ 20 subjs). Squarified => <= Strip Demo Written in embedded C++

Calendar Management How to better: How to better:  support planning and analysis tasks  move between multiple device types The answer: The answer:  more Information Visualization techniques

DateLens To scale up and maintain context: To scale up and maintain context:  Uses 2D fisheye distortion  Carefully designed interaction  simple or manual control over space  Integrated search with or without text entry Written in C# with same code running on Tablet PC and desktop Written in C# with same code running on Tablet PC and desktop Demo

DateLens Performance Careful coding Careful coding Custom renderer and picker Custom renderer and picker Space-time trade-off Space-time trade-off Minimal rendering during transitions Minimal rendering during transitions Careful evaluation of how to render Careful evaluation of how to render

DateLens Benchmark Study DateLens v. Microsoft Pocket PC 2002™ DateLens v. Microsoft Pocket PC 2002™ Goals Goals  1 st iteration of UI with potential users  to compare its overall usability against an existing product Used Mary’s calendar, seeded with artificial calendar events Used Mary’s calendar, seeded with artificial calendar events

Figure 7: Screen shots of the Microsoft Pocket PC Calendar program that was used in the study showing day, week, month, and year views.

Methods 11 knowledge workers (5 F) 11 knowledge workers (5 F)  All experienced PC (not PDA) users 11 isomorphic browsing tasks on each calendar 11 isomorphic browsing tasks on each calendar  All conditions counterbalanced  All tasks had deadline of 2 minutes Measured: Measured:  task times  success rate  verbal protocols  user satisfaction and preference

Results —Task Times Tasks were performed faster using DateLens, F(1,8)=3.5, p=.08 Tasks were performed faster using DateLens, F(1,8)=3.5, p=.08  Avg=49 v sec’s for the Pocket PC  Complex tasks significantly harder, p<.01, but handled reliably better by DateLens (task x calendar interaction), p=.04

Task Success Tasks were completed successfully significantly more often using DateLens (88.2% v. 76.3%), p<.001. Tasks were completed successfully significantly more often using DateLens (88.2% v. 76.3%), p<.001. In addition, there was a significant main effect of task, p<.001. In addition, there was a significant main effect of task, p<.001. For the most difficult task (#11), no participant using the Pocket PC completed the task successfully. For the most difficult task (#11), no participant using the Pocket PC completed the task successfully.

Usability Issues Many users disliked the view when more than 6 months were shown Many users disliked the view when more than 6 months were shown Concerns about the readability of text, needs to be customizable Concerns about the readability of text, needs to be customizable Wanted more control about how weeks were viewed (e.g., start with Sunday or Monday?) Wanted more control about how weeks were viewed (e.g., start with Sunday or Monday?) Needed better visual indicators of conflicts for both calendars, e.g., red highlights and/or a “conflicts” filter Needed better visual indicators of conflicts for both calendars, e.g., red highlights and/or a “conflicts” filter

Discussion DateLens performed well despite its novelty and its first iteration of user testing DateLens performed well despite its novelty and its first iteration of user testing DateLens Positive Features: DateLens Positive Features:  Responsivity to direct user manipulation  Ability to create custom views easily  Clearer presentation of conflicts  Integrated search utility The PPC calendar was seen to be consistent with other MS calendar products (good) The PPC calendar was seen to be consistent with other MS calendar products (good) A combination of the 2 would be a great final product A combination of the 2 would be a great final product

© 2002 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.