visual design for 3d user interfaces daniel c. robbins [email protected] @ somewhere…
TRANSCRIPT
![Page 1: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/1.jpg)
Visual Design for 3D User Visual Design for 3D User InterfacesInterfacesVisual Design for 3D User Visual Design for 3D User InterfacesInterfacesDaniel C. Robbins Daniel C. Robbins [email protected]@microsoft.comDaniel C. Robbins Daniel C. Robbins [email protected]@microsoft.com
@ somewhere…
![Page 2: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/2.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
The Ideal?The Ideal?The Ideal?The Ideal?• Why is it so hard to use Why is it so hard to use
computers?computers?
![Page 3: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/3.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Structure of This TalkStructure of This TalkStructure of This TalkStructure of This Talk• Who am I?Who am I?• Problems with current UIsProblems with current UIs• What to do about it?What to do about it?• Examples from our researchExamples from our research• Lessons we learnedLessons we learned• MetaphorsMetaphors• Future directionsFuture directions
![Page 4: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/4.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Who Am I?Who Am I?Who Am I?Who Am I?• Fine-arts majorFine-arts major• Furniture, sculpture, jewelry, etc.Furniture, sculpture, jewelry, etc.• UI Designer for 13 yearsUI Designer for 13 years
– 7 years at MS, 6 in MSR7 years at MS, 6 in MSR– Combining academic and product Combining academic and product
focusfocus
![Page 5: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/5.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Contact InfoContact InfoContact InfoContact Info• [email protected]@microsoft.com• http://research.microsoft.com/http://research.microsoft.com/
~dcr~dcr
![Page 6: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/6.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
What Is a User-What Is a User-interface?interface?What Is a User-What Is a User-interface?interface?• Means by which a person uses a Means by which a person uses a
computercomputer• The sensory connection between a The sensory connection between a
user and the functionality of a user and the functionality of a computer-based applicationcomputer-based application– HumanHuman-computer interaction-computer interaction– HumanHuman-computer--computer-humanhuman
interactioninteraction
![Page 7: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/7.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
UI PuzzlersUI PuzzlersUI PuzzlersUI Puzzlers• Has the Web killed innovative UI?Has the Web killed innovative UI?• Video: what is truth?Video: what is truth?
![Page 8: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/8.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Problems w/ Current Problems w/ Current UIsUIsProblems w/ Current Problems w/ Current UIsUIs• Too hard to useToo hard to use• Too many optionsToo many options• UnreliableUnreliable• InconsistentInconsistent
Too VagueToo Vague
![Page 9: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/9.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Specific ProblemsSpecific ProblemsSpecific ProblemsSpecific Problems• Multiple representations for an Multiple representations for an
objectobject– Objects look completely different in Objects look completely different in
different placesdifferent places
• Low-level interactionLow-level interaction– Manipulation centric vs. task-centricManipulation centric vs. task-centric– Should be:Should be:
““Just do what I wanted you to do!”Just do what I wanted you to do!”
![Page 10: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/10.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Specific Problems (2)Specific Problems (2)Specific Problems (2)Specific Problems (2)• Discretely shifting spatial Discretely shifting spatial
configurationsconfigurations– The rug is pulled out from under the userThe rug is pulled out from under the user
• Multiple simultaneous viewsMultiple simultaneous views– Divided attentionDivided attention
• Homogeneous representationsHomogeneous representations– Everything looks the sameEverything looks the same
• No contextNo context– How do changes to one thing affect How do changes to one thing affect
another?another?
![Page 11: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/11.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
So What? Why Fix It?So What? Why Fix It?So What? Why Fix It?So What? Why Fix It?• Increase customer baseIncrease customer base
– Different agesDifferent ages– Different abilitiesDifferent abilities
• New ways of using computersNew ways of using computers– On-the-goOn-the-go– One-function-at-a-timeOne-function-at-a-time– Step-up useStep-up use– Over the NetOver the Net
![Page 12: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/12.jpg)
How to Fix It?How to Fix It?How to Fix It?How to Fix It?
![Page 13: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/13.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Mantra: Cause and Mantra: Cause and EffectEffectMantra: Cause and Mantra: Cause and EffectEffect
What can the user do?What can the user do?What can the user do?What can the user do?
What is the user What is the user doing?doing?
What is the user What is the user doing?doing?
PastPastPastPast
PresentPresentPresentPresent
FutureFutureFutureFutureWhat has the user What has the user
done?done?What has the user What has the user
done?done?
FutureFutureFutureFuture
PresentPresentPresentPresent
PastPastPastPast
![Page 14: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/14.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
SpecificsSpecificsSpecificsSpecifics• Take advantage of Take advantage of human human
perceptionperception– 3D, animation, constancy, richer cues3D, animation, constancy, richer cues
• Take advantage of human experienceTake advantage of human experience– Appropriate use of Appropriate use of metaphorsmetaphors
• In-situ assisted learning / “hard-fun”In-situ assisted learning / “hard-fun”– Video games, apprenticeship, sportsVideo games, apprenticeship, sports– Not the office-assistant!Not the office-assistant!
![Page 15: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/15.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
What is a 3D UI?What is a 3D UI?What is a 3D UI?What is a 3D UI?NOTNOT
![Page 16: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/16.jpg)
Examples From Our Examples From Our ResearchResearchExamples From Our Examples From Our ResearchResearchData Mountain, TaskGallery, Data Mountain, TaskGallery, PhotoMountainPhotoMountainData Mountain, TaskGallery, Data Mountain, TaskGallery, PhotoMountainPhotoMountain
![Page 17: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/17.jpg)
The TaskGalleryThe TaskGalleryThe TaskGalleryThe TaskGallery““Let’s change everything”Let’s change everything”““Let’s change everything”Let’s change everything”
![Page 18: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/18.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Task Gallery: Task Gallery: FunctionalityFunctionalityTask Gallery: Task Gallery: FunctionalityFunctionality• UI exploration for new desktop UIUI exploration for new desktop UI
1)1) Windows management Windows management– Comparing multiple windows is hardComparing multiple windows is hard
2)2) Task management Task management– Switching between user tasks is hardSwitching between user tasks is hard– Use rooms concept, but use 3D to Use rooms concept, but use 3D to
engage spatial memoryengage spatial memory
• Push the technologyPush the technology
![Page 19: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/19.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
The Task Gallery: VideoThe Task Gallery: VideoThe Task Gallery: VideoThe Task Gallery: Video• Runs on commodity hardwareRuns on commodity hardware
• Uses unmodified applicationsUses unmodified applications
• Runs on Windows 2000 with “Runs on Windows 2000 with “
Application RedirectionApplication Redirection””
• ResultsResults
![Page 20: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/20.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Good UI PracticesGood UI PracticesGood UI PracticesGood UI Practices• Show cause-and-effectShow cause-and-effect• Combine Combine related user actions, related user actions,
params.params.• Distinguish Distinguish UI from dataUI from data• Combine UI and data (Combine UI and data (Direct Direct ManipManip.).)• Use appropriate “Use appropriate “channelschannels””• Appropriate metaphorAppropriate metaphor• Support current functionalitySupport current functionality
![Page 21: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/21.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Spatial Memory: the Spatial Memory: the Bet!Bet!Spatial Memory: the Spatial Memory: the Bet!Bet!• EvolutionEvolution: perceptual abilities: perceptual abilities
– Remember (generally) where stuff is Remember (generally) where stuff is (?)(?)
• Engage navigational memoryEngage navigational memory• Reinforce with Reinforce with landmarkslandmarks: :
proximityproximity• Requires spatial Requires spatial
stability/constancystability/constancy
![Page 22: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/22.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Spatial Cues #2Spatial Cues #2Spatial Cues #2Spatial Cues #2• Kevin Lynch: Kevin Lynch: The Image of the The Image of the
CityCity– Urban DesignUrban Design
• Boundaries, neighborhoods, Boundaries, neighborhoods, topographytopography
![Page 23: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/23.jpg)
The DataMountainThe DataMountainThe DataMountainThe DataMountainBack to basicsBack to basicsBack to basicsBack to basics
![Page 24: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/24.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
The Data MountainThe Data MountainThe Data MountainThe Data Mountain• What is the role of landmarks?What is the role of landmarks?• Is the arrangement of the data Is the arrangement of the data
itself enough of a cue?itself enough of a cue?
![Page 25: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/25.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Cues: NeighborhoodCues: NeighborhoodCues: NeighborhoodCues: Neighborhood
![Page 26: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/26.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
BoundariesBoundariesBoundariesBoundaries
![Page 27: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/27.jpg)
The PhotoMountainThe PhotoMountainThe PhotoMountainThe PhotoMountainAdapting the DataMountain to Adapting the DataMountain to PhotographsPhotographsAdapting the DataMountain to Adapting the DataMountain to PhotographsPhotographs
![Page 28: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/28.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
PhotoMountain PhotoMountain FunctionalityFunctionalityPhotoMountain PhotoMountain FunctionalityFunctionality• Import / Add photosImport / Add photos• Categorize photosCategorize photos
– Auto, manualAuto, manual
• Find photos byFind photos by– TimeTime– PeoplePeople– PlacePlace
• Create slide showsCreate slide shows
![Page 29: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/29.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Design RefinementsDesign RefinementsDesign RefinementsDesign Refinements
![Page 30: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/30.jpg)
Lessons We LearnedLessons We LearnedLessons We LearnedLessons We LearnedHow do we actually design this stuff?How do we actually design this stuff?How do we actually design this stuff?How do we actually design this stuff?
![Page 31: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/31.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
PrinciplesPrinciplesPrinciplesPrinciples• Get the “Big Picture”Get the “Big Picture”• ChannelsChannels• GeometryGeometry• MetaphorMetaphor
![Page 32: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/32.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Focus + ContextFocus + ContextFocus + ContextFocus + Context• Scarcest resource is human Scarcest resource is human
attention!attention!• Hierarchical regions for Hierarchical regions for
organizationorganization• BroadenBroaden or or narrow narrow attentionattention
– Vs Vs switchingswitching attention attention– Parallel attentionParallel attention– 3D is a natural way to do this 3D is a natural way to do this
““Get interactions cheaply”Get interactions cheaply”
![Page 33: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/33.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
High-level InteractionHigh-level InteractionHigh-level InteractionHigh-level Interaction• Make one click do Make one click do lots of stufflots of stuff• Free-form Free-form Navigation vs. High-Navigation vs. High-
levellevel– Doom vs. “chauffer”Doom vs. “chauffer”
![Page 34: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/34.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Channels: Bag of TricksChannels: Bag of TricksChannels: Bag of TricksChannels: Bag of Tricks• Animation Animation • Rendering styleRendering style , , TransparencyTransparency• AbstractionAbstraction• AudioAudio• HarderHarder in 3Din 3D
– Channels already taken (size, color, Channels already taken (size, color, etc.)etc.)
![Page 35: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/35.jpg)
MethodologyMethodologyMethodologyMethodologyHow to free up designHow to free up designHow to free up designHow to free up design
![Page 36: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/36.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Basic GeometriesBasic GeometriesBasic GeometriesBasic Geometries• CarouselCarousel• P-WallP-Wall• BowlBowl• LandscapeLandscape• 3D Star (chandelier)3D Star (chandelier)• LayeringLayering
– Embedding multiple dimensionsEmbedding multiple dimensions• Endocentric vs. ExocentricEndocentric vs. Exocentric
![Page 37: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/37.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
CarouselCarouselCarouselCarousel
![Page 38: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/38.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Perspective WallPerspective WallPerspective WallPerspective Wall
![Page 39: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/39.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
BowlBowlBowlBowl• Natural Natural fisheyefisheye
![Page 40: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/40.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
LandscapeLandscapeLandscapeLandscape
![Page 41: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/41.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
3D Star3D Star3D Star3D Star
![Page 42: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/42.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Data Layering (1)Data Layering (1)Data Layering (1)Data Layering (1)
![Page 43: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/43.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Data Layering (2)Data Layering (2)Data Layering (2)Data Layering (2)
![Page 44: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/44.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Other?Other?Other?Other?Axis 1Axis 1Axis 1Axis 1
Axis 2Axis 2Axis 2Axis 2
# of tics# of tics# of tics# of tics
amount amount of bendof bend
amount amount of bendof bend
# of spines# of spines# of spines# of spines
axis of axis of bendbend
axis of axis of bendbend
![Page 45: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/45.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
All at OnceAll at OnceAll at OnceAll at Once
![Page 46: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/46.jpg)
Using These PrinciplesUsing These PrinciplesUsing These PrinciplesUsing These PrinciplesThe next version of the PhotoMountainThe next version of the PhotoMountainThe next version of the PhotoMountainThe next version of the PhotoMountain
![Page 47: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/47.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Axes / DimensionsAxes / DimensionsAxes / DimensionsAxes / Dimensions• Identify Axes / DimensionsIdentify Axes / Dimensions• Prioritize dimensions (rankings)Prioritize dimensions (rankings)
– Which is primary?Which is primary?
• Bounded vs. UnboundedBounded vs. Unbounded– If bounded, how big?If bounded, how big?
•Extra Credit ->Extra Credit ->
•Does there have to be a Does there have to be a Primary Primary AxisAxis??
![Page 48: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/48.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Axes / Dimensions for the Axes / Dimensions for the PhotoMountainPhotoMountainAxes / Dimensions for the Axes / Dimensions for the PhotoMountainPhotoMountain
Time People Place Composite: “Places I
have Lived”
Bounded No (within cluster)
? Yes
Hierarchy Depth
Year, Month,
Day, etc…
Friends -> College -> Close -
> Girlfriend
s
USA -> RI ->
Providence ->
George St.
USA -> MI…, RI…, ME…, WA…
Hierarchy
Breadth
Friends, Family,
Co-workers,
etc…
Alaska, Alabama,
George St., Brook St., Hope St.,
etc…
![Page 49: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/49.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
•Tents for collections
•Time slice through Map
•clusters•Slice through Geography
•Blimp shows selection
•floats and gives Slide-show
Draw Some GeometriesDraw Some GeometriesDraw Some GeometriesDraw Some Geometries
•Dual Perspective Walls
•Indexed Cylinder
![Page 50: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/50.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Cleanup an Image…Cleanup an Image…Cleanup an Image…Cleanup an Image…
![Page 51: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/51.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Try a First Pass Try a First Pass MappingMappingTry a First Pass Try a First Pass MappingMapping
Time
Width = # of items
Current Time
Cluster based on?
![Page 52: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/52.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Add Some Real DataAdd Some Real DataAdd Some Real DataAdd Some Real Data
![Page 53: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/53.jpg)
MetaphorsMetaphorsMetaphorsMetaphorsIs there anything new?Is there anything new?Is there anything new?Is there anything new?
![Page 54: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/54.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Why Use a MetaphorWhy Use a MetaphorWhy Use a MetaphorWhy Use a Metaphor• Capitalize on previous knowledgeCapitalize on previous knowledge• Make a UI Make a UI seemseem friendlier (more friendlier (more
approachableapproachable• Provide a set of rules that Provide a set of rules that explainexplain
and and predictpredict the behavior of the behavior of objectsobjects– Under computer controlUnder computer control– Under user controlUnder user control
![Page 55: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/55.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Inspiration for Inspiration for Metaphors?Metaphors?Inspiration for Inspiration for Metaphors?Metaphors?• NatureNature• The machineThe machine• The spiritualThe spiritual
• Is everything in our world Is everything in our world designed?designed?
![Page 56: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/56.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Example MetaphorsExample MetaphorsExample MetaphorsExample Metaphors
![Page 57: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/57.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Problems With Problems With MetaphorsMetaphorsProblems With Problems With MetaphorsMetaphors• Mapping can be arbitraryMapping can be arbitrary• ScalabilityScalability• False impressionsFalse impressions• High expectationsHigh expectations• Question:Question:
– Can we use “real-world” objects as Can we use “real-world” objects as landmarks in an abstract world?landmarks in an abstract world?
![Page 58: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/58.jpg)
Future DirectionsFuture DirectionsFuture DirectionsFuture Directions
![Page 59: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/59.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Other Geom #1Other Geom #1Other Geom #1Other Geom #1
![Page 60: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/60.jpg)
Future DirectionsFuture DirectionsFuture DirectionsFuture Directions3D UI and the connected world3D UI and the connected world3D UI and the connected world3D UI and the connected world
![Page 61: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/61.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Wall DisplaysWall DisplaysWall DisplaysWall Displays
![Page 62: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/62.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Working TogetherWorking TogetherWorking TogetherWorking Together
![Page 63: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/63.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Working from HomeWorking from HomeWorking from HomeWorking from Home
![Page 64: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/64.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Dynamic TrackingDynamic TrackingDynamic TrackingDynamic Tracking
![Page 65: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/65.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Sharing and RevisingSharing and RevisingSharing and RevisingSharing and Revising
![Page 66: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/66.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Shared EnvironmentsShared EnvironmentsShared EnvironmentsShared Environments
![Page 67: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/67.jpg)
The Way-outThe Way-outThe Way-outThe Way-outLets get wackyLets get wackyLets get wackyLets get wacky
![Page 68: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/68.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Public Kiosks #1Public Kiosks #1Public Kiosks #1Public Kiosks #1
![Page 69: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/69.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Public Kiosk #2Public Kiosk #2Public Kiosk #2Public Kiosk #2
![Page 70: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/70.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Reading ListReading ListReading ListReading List• Principles of Three-Dimensional Principles of Three-Dimensional
Design, LueckingDesign, Luecking• Principles of Three-Dimensional Principles of Three-Dimensional
Design, WongDesign, Wong• The Image of the City, LynchThe Image of the City, Lynch• Design and Form (Bauhaus), IttenDesign and Form (Bauhaus), Itten• Metaphors We Live By, Lakoff et al.Metaphors We Live By, Lakoff et al.• Tufte, Shneiderman, Laurel, Wurman, Tufte, Shneiderman, Laurel, Wurman,
etc…etc…
![Page 71: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/71.jpg)
ENDENDENDEND
![Page 72: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/72.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Window ComparisonWindow ComparisonWindow ComparisonWindow Comparison• RearrangeRearrange• ““Peel-back”Peel-back”• TransparencyTransparency Flash Mock
up
![Page 73: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/73.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
User StudiesUser StudiesUser StudiesUser Studies– Four iterative Four iterative
usability tests usability tests completedcompleted
– Numerous Numerous usability problems usability problems identified and identified and fixedfixed
– Very high Very high satisfaction satisfaction ratingsratings
![Page 74: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/74.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
What Did Users Like?What Did Users Like?What Did Users Like?What Did Users Like?• Transparency Transparency (to deal with (to deal with
occlusion)occlusion)• Glancing (spatial awareness)Glancing (spatial awareness)• Context menusContext menus• Overview of tasksOverview of tasks
![Page 75: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/75.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
ProblemsProblemsProblemsProblems• OcclusionOcclusion• DiscoverabilityDiscoverability• Can it Can it scalescale??• Target audience?Target audience?
![Page 76: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/76.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Future WorkFuture WorkFuture WorkFuture Work• Other metaphorsOther metaphors• Other geometric arrangementsOther geometric arrangements• Peripheral notificationPeripheral notification• Semantic zooming for thumbnailsSemantic zooming for thumbnails
![Page 77: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/77.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Multiple Multiple RepresentationsRepresentationsMultiple Multiple RepresentationsRepresentations
Back Back
![Page 78: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/78.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Low-level interactionLow-level interactionLow-level interactionLow-level interaction
![Page 79: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/79.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Discrete ChangesDiscrete ChangesDiscrete ChangesDiscrete Changes
![Page 80: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/80.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Multiple ViewsMultiple ViewsMultiple ViewsMultiple Views
5R x 3C
![Page 81: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/81.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Homogeneous Reps.Homogeneous Reps.Homogeneous Reps.Homogeneous Reps.
![Page 82: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/82.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Context and Context and RelationshipsRelationshipsContext and Context and RelationshipsRelationships
Back Back
![Page 83: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/83.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
AnimationAnimationAnimationAnimation• No animation #1, No animation #1, #2#2??• ““If it’s in the way, make it go If it’s in the way, make it go
away”away”• Shift load from cognitive to Shift load from cognitive to
perceptualperceptual• Don’t force user to figure out what Don’t force user to figure out what
changedchanged– Animation stylesAnimation styles
![Page 84: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/84.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Discrete SwitchingDiscrete SwitchingDiscrete SwitchingDiscrete SwitchingBut But
with animwith animationation!!
![Page 85: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/85.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Discrete BroadenDiscrete BroadenDiscrete BroadenDiscrete Broaden
But But with animation!
Animation
![Page 86: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/86.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Rendering Styles #1Rendering Styles #1Rendering Styles #1Rendering Styles #1
• 2D 2D Wireframe Wireframe for navigation for navigation UI elementsUI elements
![Page 87: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/87.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Rendering Styles #2Rendering Styles #2Rendering Styles #2Rendering Styles #2• Icons for Window Icons for Window
Manipulation Manipulation controlscontrols
• Different stylesDifferent styles
SelectSelect
Add to Add to SelectionSelection
X-ray X-ray VisionVision
Send Send BackBack
ToToPodiumPodium
ToToSpaceSpace
MoveMove
CloseClose
Widgets
mockup
Widgets
mockup
![Page 88: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/88.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
AbstractionAbstractionAbstractionAbstraction• Icons vs. ThumbnailsIcons vs. Thumbnails• Depends on:Depends on:
– Degree of attentionDegree of attention– PerceptibilityPerceptibility– ConfusabilityConfusability– Content (high freq. Vs. low freq.)Content (high freq. Vs. low freq.)
• Need semantic zooming!Need semantic zooming!• Tied to metaphor? Tied to metaphor?
![Page 89: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/89.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
2D vs. 3D Channels: 2D vs. 3D Channels: SizeSize2D vs. 3D Channels: 2D vs. 3D Channels: SizeSize
1
2
3
41
2
3
4
![Page 90: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/90.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
2D vs. 3D Channels: 2D vs. 3D Channels: ColorColor2D vs. 3D Channels: 2D vs. 3D Channels: ColorColor
1
2
3
41
2
3
4
![Page 91: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/91.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Criteria: Fixing the Criteria: Fixing the ProblemsProblems
• Spatial memorySpatial memory• Context: human attentionContext: human attention• Visual recognitionVisual recognition• StabilityStability• ScalabilityScalability• Good UI practicesGood UI practices
PerceptioPerception n
vs. vs.
CognitionCognition
![Page 92: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/92.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Output RedirectionOutput RedirectionOutput RedirectionOutput Redirection
![Page 93: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/93.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Input RedirectionInput RedirectionInput RedirectionInput Redirection
![Page 94: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/94.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
The GutsThe GutsThe GutsThe Guts• Commodity hardwareCommodity hardware
• Unmodified applicationsUnmodified applications
• Windows 2000 with “Application Windows 2000 with “Application
Redirection”Redirection”
![Page 95: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/95.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Audio ComparisonAudio ComparisonAudio ComparisonAudio Comparison• No audioNo audio • With audioWith audio
![Page 96: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/96.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
ScalabilityScalabilityScalabilityScalability
A few tasksA few tasksMany tasks
![Page 97: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/97.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Spatial Cues: Spatial Cues: LandmarksLandmarksSpatial Cues: Spatial Cues: LandmarksLandmarks
Shadows aid in Shadows aid in depth depth perceptionperception
Landmarks aid in spatial memory
![Page 98: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/98.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Visual Recognition (1)Visual Recognition (1)Visual Recognition (1)Visual Recognition (1)• Objects Objects
representerepresented by d by thumbnailsthumbnails
• User User selectable selectable wallpaperwallpaper
![Page 99: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/99.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Visual Recognition (2)Visual Recognition (2)Visual Recognition (2)Visual Recognition (2)• Live Live
applicatioapplications ns – (Dynamic (Dynamic
updating)updating)
![Page 100: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/100.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Task Gallery: EvaluationTask Gallery: EvaluationTask Gallery: EvaluationTask Gallery: Evaluation• Different interactionsDifferent interactions• User StudiesUser Studies• ProblemsProblems• Future workFuture work
![Page 101: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/101.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Body CentricBody CentricBody CentricBody Centric• Left, Right HandsLeft, Right Hands• FeetFeet• Look UpLook Up• GlancingGlancing
– Lightweight, ephemeral interactionLightweight, ephemeral interaction
![Page 102: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/102.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Spatial StabilitySpatial StabilitySpatial StabilitySpatial StabilitySort on sizeSort on sizeSort by NameSort by Name
![Page 103: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/103.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Transparency VideoTransparency VideoTransparency VideoTransparency Video
![Page 104: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/104.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Animation VideoAnimation VideoAnimation VideoAnimation Video
![Page 105: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/105.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
New Task VideoNew Task VideoNew Task VideoNew Task Video
![Page 106: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/106.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Drag Task Video (Direct Drag Task Video (Direct manip)manip)Drag Task Video (Direct Drag Task Video (Direct manip)manip)
![Page 107: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/107.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Rename Task VideoRename Task VideoRename Task VideoRename Task Video
![Page 108: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/108.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Switch Tasks VideoSwitch Tasks VideoSwitch Tasks VideoSwitch Tasks Video
![Page 109: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/109.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Show All Tasks VideoShow All Tasks VideoShow All Tasks VideoShow All Tasks Video
![Page 110: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/110.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Transparency VideoTransparency VideoTransparency VideoTransparency Video
![Page 111: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/111.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Wallpaper VideoWallpaper VideoWallpaper VideoWallpaper Video
![Page 112: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/112.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Freeform Nav VideoFreeform Nav VideoFreeform Nav VideoFreeform Nav Video
![Page 113: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/113.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Hands VideoHands VideoHands VideoHands Video
![Page 114: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/114.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Glancing VideoGlancing VideoGlancing VideoGlancing Video
![Page 115: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/115.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
TG Full VideoTG Full VideoTG Full VideoTG Full Video
![Page 116: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/116.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
DM Short VideoDM Short VideoDM Short VideoDM Short Video
![Page 117: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/117.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Broaden VideoBroaden VideoBroaden VideoBroaden Video
![Page 118: Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com @ somewhere…](https://reader036.vdocuments.mx/reader036/viewer/2022062320/56649d955503460f94a7ddf5/html5/thumbnails/118.jpg)
Back Back Good UIGood UI ChannelsChannelsFocus+Focus+ MetaphorMetaphorProbs.Probs.
Narrow VideoNarrow VideoNarrow VideoNarrow Video