1 / 48

From Big to Small : Weaving Joy into UI Design

NOTE : This presentation requires internet connectivity to correctly display all of the active content. You may also have to enable “active content.”. From Big to Small : Weaving Joy into UI Design. Daniel C. Robbins  dcr@microsoft.com http://research.microsoft.com/~dcr

lydie
Download Presentation

From Big to Small : Weaving Joy into UI Design

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. NOTE: This presentation requires internet connectivity to correctly display all of the active content. You may also have to enable “active content.” From Big to Small:Weaving Joy into UI Design Daniel C. Robbins  dcr@microsoft.com http://research.microsoft.com/~dcr Microsoft Research

  2. Me Husband & Father Sculptor Designer Microsoft Research Brown Computer Graphics Group Made a video game UI Consulting

  3. Values Design should increase our joy in life “Flow” is more important than efficiency

  4. Respect the Human • Attention is scarcest resource! • Humility and levity • “Good surprises” Tech Capabilities Human Capabilities* * Idiocracy, 2006

  5. UI Design Principles Stability Attention Perceptual Past, Present, & Future

  6. Design Extremes

  7. Task Gallery A 3D Task Management System

  8. Demo / Video Local Web http://research.microsoft.com/ui/TaskGallery/video.mpg Demo (internal only)

  9. Design Criteria • Tasks • Simple • Simultaneity • Focus • Landmarks • Personalization

  10. Process • Started with free-form brainstorming • Bake-off: teams with competing designs • Pooled resources for chosen design • Flash prototypes for design details • 3DS Max for asset creation • D3D for real app

  11. My Sketches

  12. Pushing the Sketches

  13. Group Designs

  14. Widgets Mockup http://research.microsoft.com/~dcr/work/prototypes/widgets.html

  15. Peeking Mockup http://research.microsoft.com/~dcr/work/prototypes/peeking_01.htm

  16. Can 3D Be Simple?

  17. Surprises: Slaves to the Metaphor • Interactive landmarks? • Lonely hallway • Where is the UI?

  18. FaThumb Faceted Search on a Smartphone

  19. Demo / Video Local Web http://research.microsoft.com/vibe/videos/fathumb%20V1-6-attribution.wmv Demo

  20. Lofty Goals • Everything is a node • Graphically hop through information • Filter by canonical dimensions • All facets treated equally

  21. Connections Me Friends Family More… Co-workers ? Government Business Action Location Date ? Type Properties Subject Person Dan Stef

  22. Serendipity A - D E - H I - L 0 - # M - P Today Me Created Friends Yesterday Modified Last 7 Days Family Viewed Y - Z U - X Q - T More… More… More… Last 30 Days Co-workers Sent ? ? In the Future Received Before last year Government Business Last Year Contacted Action Action Action Action Location Location Location Location Date Date Date Date ? ? ? ? Type Type Type Type Properties ? Properties Properties Subject Subject Subject Subject Person Person Person Person Dan Robbins (me) 57,000 results Eric Horvitz 23 results 125 results

  23. Sketches

  24. Filtered Views

  25. Reality Check • How can I make this work on a phone? • Use a known database: Yellow Pages • Partition the screen / Animate focus • Separate results from filters 

  26. Scenario (“Story”) Driven Design Productivity Consumer Joe is at the park and wants to know if any of his friends are nearby so he can invite them over to play Frisbee Linda is waiting for the bus and wants to hear music that she shares in common with Felicia Tim is getting out of a movie downtown and he wants to get a list of highly rated restaurants that are near the movie theatre Sam and Phyllis are at the appliance store looking at washer and dryers. They want to compare prices and specs of the units they see with units they previously looked at in another store Jack is meeting with an old friend and he wants to show the friend digital images of the two of them • Susan is on her way to a meeting and she wants to see a list of co-workers who are involved with Project Alpha • Mike is in a meeting and he quickly wants to gather a list of all emails related to Project Beta for which Brad was in on the thread • Doug is at a construction work-site and at the last minute he quickly needs to get a list of supply stores that are open late in the day and are nearby • Pat is at a supply showroom and needs to collect product comparison information. Pat takes pictures of a bunch of products (including their model numbers) and quickly tags those items which best meet a given criteria

  27. Steal from Phlat • Always show results • Avoid “stuck-filters” • Filtering + free-text • Predictive feedback • Special case booleans

  28. Navigation 9 2 Back Back 4 1 * * “Pin” “Pin”

  29. Prototype http://research.microsoft.com/~dcr/work/prototypes/pane%20navigation%2005.html

  30. Overview Current Query Search Terms Results Facet Navigation Menu Standard 9-keypad • Facets + Free-text • Nine-pad is least-common-denominator • Animated navigation • Pivot on meta-data

  31. Next Steps: Optimized Views Search: Search: Search: FaThumb FaThumb FaThumb FaThumb FaThumb FaThumb FaThumb FaThumb Action Action Action Action Location Location Location Location Time Time Time Time Clear Clear Clear Clear Clear Clear Clear Clear Menu Menu Menu Menu Menu Menu Menu Menu More… More… More… More… Back Back Back Back Type Type Type Type Source Source Source Source Category Category Category Category Person Person Person Person Pic00345 1:21pm Pic00347 1:23pm This block 1 Today 2 Yesterday 5 blocks 3 This week Neighbor… 4 Earlier 6 Last Week City 5 Pic00346 1:22pm Pic00348 1:25pm Monday Thursday Sunday 7 This Year Last Month Country 8 This month State 9 Tuesday Monday Friday Wednesday Saturday Tuesday Search: Search: Search: Search: Search:

  32. Rapidly Prototyping Sculpture Making the virtual real

  33. Advantages • Precision • Sketch on PC • Parts reuse • Design variations • “Just hit print!”

  34. Design and Visualization

  35. Production

  36. Results

  37. Surprises • Clearances wrong • Too small • Hard to scale up

  38. Pain-points • Interference checking • Range-of-movement design • Assembly visualization • “Dumb” models  Not parametric

  39. Large TEMPORARY Sculpture Visualize, Prototype, and Test at Home!

  40. Process • Tensegrity simulator for initial layout • 3DS Max for rendering  presentation • Small-scale physical prototype • Test locally • Snap-together assembly on-site

  41. Simulation & Pre-Visualization

  42. Physical Prototype

  43. Testing

  44. Lessons Learned • Unintended uses • Assembly instructions • Spare parts • Regular safety checks • Metal is heavy

  45. Late Breaking News

  46. Boku: End-User Programming Note: This video will not play over the web as it is not released for general consumption yet

  47. Common Themes Joy is more important than efficiency

  48. Design in art, is a recognition of the relation between various things, various elements in the creative flux. You can’t invent a design. You recognize it, in the fourth dimension. That is, with your blood and your bones, as well as with your eyes. - D. H. Lawrence

More Related