1 / 118

Visual Design for 3D User Interfaces

@ somewhere…. Visual Design for 3D User Interfaces. Daniel C. Robbins dcr@microsoft.com. Why is it so hard to use computers?. The Ideal?. Structure of This Talk. Who am I? Problems with current UIs What to do about it? Examples from our research Lessons we learned Metaphors

devi
Download Presentation

Visual Design for 3D User Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. @ somewhere… Visual Design for 3D User Interfaces Daniel C. Robbins dcr@microsoft.com

  2. Why is it so hard to use computers? The Ideal?

  3. Structure of This Talk • Who am I? • Problems with current UIs • What to do about it? • Examples from our research • Lessons we learned • Metaphors • Future directions

  4. Who Am I? • Fine-arts major • Furniture, sculpture, jewelry, etc. • UI Designer for 13 years • 7 years at MS, 6 in MSR • Combining academic and product focus

  5. Contact Info • dcr@microsoft.com • http://research.microsoft.com/~dcr

  6. What Is a User-interface? • Means by which a person uses a computer • The sensory connection between a user and the functionality of a computer-based application • Human-computer interaction • Human-computer-human interaction

  7. UI Puzzlers • Has the Web killed innovative UI? • Video: what is truth?

  8. Problems w/ Current UIs • Too hard to use • Too many options • Unreliable • Inconsistent Too Vague

  9. Specific Problems • Multiple representations for an object • Objects look completely different in different places • Low-level interaction • Manipulation centric vs. task-centric • Should be: “Just do what I wanted you to do!”

  10. Specific Problems (2) • Discretely shifting spatial configurations • The rug is pulled out from under the user • Multiple simultaneous views • Divided attention • Homogeneous representations • Everything looks the same • No context • How do changes to one thing affect another?

  11. So What? Why Fix It? • Increase customer base • Different ages • Different abilities • New ways of using computers • On-the-go • One-function-at-a-time • Step-up use • Over the Net

  12. How to Fix It?

  13. Past Future Present Present Future Past Mantra: Cause and Effect What can the user do? What is the user doing? What has the user done?

  14. Specifics • Take advantage of human perception • 3D, animation, constancy, richer cues • Take advantage of human experience • Appropriate use of metaphors • In-situ assisted learning / “hard-fun” • Video games, apprenticeship, sports • Not the office-assistant!

  15. What is a 3D UI? NOT

  16. Examples From Our Research Data Mountain, TaskGallery, PhotoMountain

  17. The TaskGallery “Let’s change everything”

  18. Task Gallery: Functionality • UI exploration for new desktop UI 1) Windows management • Comparing multiple windows is hard 2) Task management • Switching between user tasks is hard • Use rooms concept, but use 3D to engage spatial memory • Push the technology

  19. The Task Gallery: Video • Runs on commodity hardware • Uses unmodified applications • Runs on Windows 2000 with “Application Redirection” • Results

  20. Good UI Practices • Show cause-and-effect • Combine related user actions, params. • Distinguish UI from data • Combine UI and data (Direct Manip.) • Use appropriate “channels” • Appropriate metaphor • Support current functionality

  21. Spatial Memory: the Bet! • Evolution: perceptual abilities • Remember (generally) where stuff is (?) • Engage navigational memory • Reinforce with landmarks: proximity • Requires spatial stability/constancy

  22. Spatial Cues #2 • Kevin Lynch: The Image of the City • Urban Design • Boundaries, neighborhoods, topography

  23. The DataMountain Back to basics

  24. The Data Mountain • What is the role of landmarks? • Is the arrangement of the data itself enough of a cue?

  25. Cues: Neighborhood

  26. Boundaries

  27. The PhotoMountain Adapting the DataMountain to Photographs

  28. PhotoMountain Functionality • Import / Add photos • Categorize photos • Auto, manual • Find photos by • Time • People • Place • Create slide shows

  29. Design Refinements

  30. Lessons We Learned How do we actually design this stuff?

  31. Principles • Get the “Big Picture” • Channels • Geometry • Metaphor

  32. Focus + Context • Scarcest resource is human attention! • Hierarchical regions for organization • Broadenor narrow attention • Vs switchingattention • Parallel attention • 3D is a natural way to do this “Get interactions cheaply”

  33. High-level Interaction • Make one click do lots of stuff • Free-form Navigation vs. High-level • Doom vs. “chauffer”

  34. Channels: Bag of Tricks • Animation • Rendering style , Transparency • Abstraction • Audio • Harderin 3D • Channels already taken (size, color, etc.)

  35. Methodology How to free up design

  36. Basic Geometries • Carousel • P-Wall • Bowl • Landscape • 3D Star (chandelier) • Layering • Embedding multiple dimensions • Endocentric vs. Exocentric

  37. Carousel

  38. Perspective Wall

  39. Bowl • Natural fisheye

  40. Landscape

  41. 3D Star

  42. Data Layering (1)

  43. Data Layering (2)

  44. # of tics Axis 1 # of spines axis of bend amount of bend Axis 2 Other?

  45. All at Once

  46. Using These Principles The next version of the PhotoMountain

  47. Axes / Dimensions • Identify Axes / Dimensions • Prioritize dimensions (rankings) • Which is primary? • Bounded vs. Unbounded • If bounded, how big? • Extra Credit -> • Does there have to be a Primary Axis?

  48. Axes / Dimensions for the PhotoMountain

  49. clusters • Indexed Cylinder • Time slice through Map • Blimp shows selection • floats and gives Slide-show • Dual Perspective Walls • Slice through Geography • Tents for collections Draw Some Geometries

  50. Cleanup an Image…

More Related