2. Zone-based User Interfaces Daniel C. Robbins UI Designer VIBE (MSR) Microsoft Corporation

3. MotivationData navigation for keypad enabled devices • Multiple kinds of data • Specific scenarios • Map navigation • Photo-browsing • Calendaring • App / task switching

4. User Interface Goals • Scales from PhonetoTV to Desktop • Glanceable • One-handed operation: “eyes-free”? • Use spatial memory • Efficiently use screen real-estate • Maintain single area of visual focus • Animated transitions

5. 1 2 3 4 5 7 8 9 * 0 # 6 “Jump to the Chase” • Keypad is “Least Common Denominator” • Segment data according to keypad • User recursively navigates among segments

6. Why Use Keypad? • Always available: Ubiquitous • Least-common denominator • Low-acquisition cost • Doesn’t obscure content (vs finger/cursor)

7. Existing Methods vs. • Segmentation isn’t spatial • Context cues too expensive • Can’t use fisheye • Can’t use overview map • Can’t use gutter regions • Require pointing /stylus device

8. ZoneZoom Prototype Daniel C. RobbinsUI Designer VIBE / MSR

9. What You Just SawInteraction Summary • D-Pad allows arbitrary movement • Transitions are animated to show context • Tap = go to sub-zone • Press ‘n Hold = glance at sub-zone

10. 4 8 Glanceability • Maintain context via spring-loaded nav. • Quickly compare locations • Tap vs. Press and Hold 8 4 Press ‘n Hold Sibling to sibling Press ‘n Hold Zoom In

11. “Eyes-free” • Easily navigate to common locations • Take advantage of spatial memory • Navigating before phone is out of pocket • UI navigation without looking at input device • Comparing map locations • Learnable mappings

12. Parabolic Paths NOTE: All interactions are interruptible

13. Graphical Cues • Reinforcement! • Border shading • Disambiguate relationship to parent • Segment numbers • More salient when zoomed-out • Subtle when zoomed-In • Schematic overview • Location relative to parent view • NOT to root

14. ZoneZoom Platform

15. SmartPhlow Seattle Area Traffic Conditions ASI Group / Microsoft Research

16. SmartPhlow

17. SmartPhlow Traffic Application • Two levels of zoom (out and in) • Multiple optimized maps • Microsoft SmartPhone 2002 SDK • GPRS  MS Server  WashDOT server • Downloads ~ 250 bytes of data • Bayes-net back end for trending • Easily compare hotspots • Large deployment!

18. Ongoing & Future Work

19. Our Plans • Adaptive view segmentation • Better context cues: “Where am I?” • Locations near segment borders • Semantic Zooming • Best of breed application: Search • Use zones to traverse taxonomy • Remote controls  apps viewed on TV • 10’ experience rather than 4”

20. Segmentation Methods Regular • Static content • Dynamic content Content Aware

21. Transition Styles Super Fast 2D Medium Fast 2D Segmented 3D Combined 3D NOTE: Maps on Smartphones are bounded Q: what to do with region “beyond”?

22. Future Platform • CF 2.0 for Windows Mobile 5 (Magneto) • Piccolo.net? • D3D Mobile? • Waiting for the hardware…

23. More Information dcr@microsoft.com http://research.microsoft.com/vibe/zonezoom

24. © 2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.