240 likes | 447 Views
Zone-based User Interfaces. Daniel C. Robbins UI Designer VIBE (MSR) Microsoft Corporation. Motivation Data navigation for keypad enabled devices. Multiple kinds of data Specific scenarios Map navigation Photo-browsing Calendaring App / task switching. User Interface Goals.
E N D
Zone-based User Interfaces Daniel C. Robbins UI Designer VIBE (MSR) Microsoft Corporation
MotivationData navigation for keypad enabled devices • Multiple kinds of data • Specific scenarios • Map navigation • Photo-browsing • Calendaring • App / task switching
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
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
Why Use Keypad? • Always available: Ubiquitous • Least-common denominator • Low-acquisition cost • Doesn’t obscure content (vs finger/cursor)
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
ZoneZoom Prototype Daniel C. RobbinsUI Designer VIBE / MSR
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
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
“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
Parabolic Paths NOTE: All interactions are interruptible
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
SmartPhlow Seattle Area Traffic Conditions ASI Group / Microsoft Research
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!
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”
Segmentation Methods Regular • Static content • Dynamic content Content Aware
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”?
Future Platform • CF 2.0 for Windows Mobile 5 (Magneto) • Piccolo.net? • D3D Mobile? • Waiting for the hardware…
More Information dcr@microsoft.com http://research.microsoft.com/vibe/zonezoom
© 2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.