zone-based user interfaces daniel c. robbins ui designer vibe (msr) microsoft corporation daniel c....
TRANSCRIPT
Zone-based User InterfacesZone-based User Interfaces
Daniel C. RobbinsUI DesignerVIBE (MSR)Microsoft Corporation
Daniel C. RobbinsUI DesignerVIBE (MSR)Microsoft Corporation
MotivationData navigation for keypad enabled devicesMotivationData navigation for keypad enabled devices
Multiple kinds of data
Specific scenariosMap navigation
Photo-browsing
Calendaring
App / task switching
User Interface GoalsUser 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”“Jump to the Chase”
Keypad is “Least Common Denominator”
Segment data according to keypad
User recursively navigates among segments
1 2 3
4 5
7 8 9
* 0 #
6
Why Use Keypad?Why Use Keypad?
Always available: Ubiquitous
Least-common denominator
Low-acquisition cost
Doesn’t obscure content (vs finger/cursor)
Existing MethodsExisting Methods
Segmentation isn’t spatial
Context cues too expensiveCan’t use fisheye
Can’t use overview map
Can’t use gutter regions
Require pointing /stylus device
vs.
ZoneZoom PrototypeZoneZoom Prototype
Daniel C. RobbinsUI DesignerVIBE / MSR
Daniel C. RobbinsUI DesignerVIBE / MSR
What You Just SawInteraction SummaryWhat 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
GlanceabilityGlanceability
Maintain context via spring-loaded nav.
Quickly compare locations
Tap vs. Press and Hold
44
Press ‘n HoldZoom In
88
Press ‘n HoldSibling to sibling
“Eyes-free”“Eyes-free”
Easily navigate to common locations
Take advantage of spatial memoryNavigating before phone is out of pocket
UI navigation without looking at input device
Comparing map locations
Learnable mappings
Parabolic PathsParabolic Paths
NOTE: All interactions are interruptible
Graphical CuesGraphical Cues
Reinforcement!
Border shadingDisambiguate relationship to parent
Segment numbers More salient when zoomed-out
Subtle when zoomed-In
Schematic overviewLocation relative to parent view
NOT to root
SmartPhlowSmartPhlow
Seattle Area Traffic ConditionsASI Group / Microsoft ResearchSeattle Area Traffic ConditionsASI Group / Microsoft Research
SmartPhlow Traffic ApplicationSmartPhlow 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 trendingEasily compare hotspots
Large deployment!
Ongoing & Future WorkOngoing & Future Work
Our PlansOur Plans
Adaptive view segmentation
Better context cues: “Where am I?”
Locations near segment borders
Semantic Zooming
Best of breed application: SearchUse zones to traverse taxonomy
Remote controls apps viewed on TV10’ experience rather than 4”
Segmentation MethodsSegmentation Methods
Static content
Dynamic content
Regular
Content
Aware
Transition StylesTransition Styles
Super Fast2D
Medium Fast2D
Segmented3D
Combined3D
NOTE: Maps on Smartphones are boundedQ: what to do with region “beyond”?
Future PlatformFuture Platform
CF 2.0 for Windows Mobile 5 (Magneto)
Piccolo.net?
D3D Mobile?
Waiting for the hardware…
More InformationMore Information
http://research.microsoft.com/vibe/zonezoom
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.