Zone-based User Interfaces Daniel C. Robbins UI Designer VIBE (MSR) Microsoft Corporation 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 Scales from Phone to TV to Desktop Glanceable One-handed operation: “eyes-free”? Use spatial memory Efficiently use screen real-estate Maintain single area of visual focus Animated transitions

“Jump to the Chase” Keypad is “Least Common Denominator” Segment data according to keypad User recursively navigates among segments *0# 6

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

Existing Methods 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 vs.

ZoneZoom Prototype Daniel C. Robbins UI Designer VIBE / MSR Daniel C. Robbins UI Designer VIBE / MSR

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

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

“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

ZoneZoom Platform

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

SmartPhlow

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!

TaskZones Define window groups based on monitor locations

TaskZones: Virtual Desktop Window groups based on monitor locs. Showing / hiding groups from stored locs. Multiple groups simultaneously visible Spatial memory coupling via num. keypad

Implementation

ZoneZoom Prototype Macromedia Flash on PC Rapid prototyping / quick iterations Rich cues Fast animation Keyboard, mouse, or keypad interaction Web page hostable

SmartPhlow App Microsoft SmartPhone 2002 SDK C code Widest reach

ZoneZoom App Built on top of SmartPhlow Runs on Smartphone: mobile testing Bitmaps for flexibility Segments move w/ incremental navigation

TaskZones Prototype Macromedia Flash Working version C# using.NET Framework Monitor configurations that fit in 3×3 grid

Ongoing & Future Work

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 Static content Dynamic content Regular 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

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