1 / 39

3D Design Example: PhotoAlbum

3D Design Example: PhotoAlbum. Daniel C. Robbins dcr@microsoft.com. Methodology. Users Usage Functionality ~ Metaphor Mapping Details, details, details…. Functionality. Import / Add photos Categorize photos Auto, manual Find photos by Time People Place Create slide shows.

glen
Download Presentation

3D Design Example: PhotoAlbum

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. 3D Design Example: PhotoAlbum Daniel C. Robbins dcr@microsoft.com r

  2. Methodology • Users • Usage • Functionality ~ • Metaphor • Mapping • Details, details, details…

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

  4. 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?

  5. Axes / Dimensions (2)

  6. 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

  7. Cleanup an Image…

  8. Try a First Pass Mapping Cluster based on? Current Time Width = # of items Time

  9. Add Some Real Data

  10. Context • How much context for selection? • Which siblings need comparison? • “When I look at photos from Amsterdam trip, do I really need to see that there are photos from Jamaica trip?” • Time and space are ordered, for 1 person’s photos • Which dimensions need comparison? • Abstraction for context…

  11. Context from other Sets But do we really need context from other clusters?

  12. Context Only Within Set

  13. Abstraction for Context • Text • Icon • Subsample (snapshot) • Subset (clipping) • Cluster based on Metadata • Auto • Manual

  14. Abstraction: Text Jamaica San Francisco San Francisco Burning Man

  15. Abstraction: Icon

  16. Abstraction: Snapshot

  17. Inspection / Interrogation • Selection • Single item • Range • Falloff function / Fisheye • How much detail for selection? • What context during slicing? • Is comparison necessary?

  18. Selection: Single

  19. Selection: All

  20. Selection: Range

  21. Selection: Fisheye

  22. Details: Aspect Ratio • Does it fit on the screen? • Display aspect ratio • Efficient use of space? • Dead-space? • “Dead-space” = wasted space?

  23. Details: Landmarks • Cues for Navigation • Sense of place • Non-repeating • Identifiable • Resolvable at different zoom levels

  24. Landscape Refinement

  25. Details: Large scale Nav. • Overview • Separate Map-view • Fluid zoom methods • Data abstraction during navigation

  26. Nav: Overview -> Map

  27. Data Fading

  28. Mockup Clustering r

  29. Flash Mockup • Non-interactive • Borrow as much UI from product as possible • Demo

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

  31. Carousel

  32. Perspective Wall

  33. Bowl • Natural fisheye

  34. Landscape

  35. 3D Star

  36. Data Layering (1)

  37. Data Layering (2)

  38. More Mockups • Polyarchy Walk-through • Polyarchy Transitions • TaskGallery Widgets • Tree Control Images

  39. Reading List • Principles of Three-Dimensional Design, Wong • The Image of the City, Lynch • Design and Form (Bauhaus), Itten • Metaphors We Live By, Lakoff et al. • Information Illustration, Glasgow • Tufte, Shneiderman, Laurel, Wurman, etc…

More Related