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

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

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

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

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

6. Design Extremes

7. TASK GALLERY A 3D Task Management System

8. Demo / Video LocalWeb http://research.microsoft.com/ui /TaskGallery/video.mpg http://research.microsoft.com/ui /TaskGallery/video.mpg DemoDemo (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/wor k/prototypes/widgets.html

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

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 LocalWeb Demo http://research.microsoft.com/vibe/video s/fathumb%20V1-6-attribution.wmv

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

21. Connections Dan Stef MeFriends Family Co-workers BusinessGovernment? More… ActionLocationDate Type PersonSubjectProperties ?

22. Serendipity A - DE - HI - L M - P Q - TU - XY - Z 0 - # ActionLocationDate Type PersonSubjectProperties ? Dan Robbins (me) ActionLocationDate Type PersonSubject? ? Me FriendsFamily Co-workers BusinessGovernment? More… 57,000 results Created Modifie d Viewed Sent Contact ed Received ? More… ActionLocationDate Type PersonSubjectProperties ? Today Yesterday Last 7 Days Last 30 Days Last Year Before last year In the Future More… 23 results Eric Horvitz ActionLocationDate Type PersonSubjectProperties ? 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 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 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

27. Steal from Phlat Always show results Avoid stuck-filters Filtering + free-text Predictive feedback Special case booleans DateOR LocationOR TypeAND CategoryAND

28. Navigation 1 2 4 9 * Back * Pin

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

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

31. Next Steps: Optimized Views FaThumb ClearMenu Search: Back Action Location Time Type PersonCategorySource More… FaThumb ClearMenu Search: Back ActionLocation Time Type PersonCategorySource More… FaThumb ClearMenu Search: Back ActionLocation Time Type PersonCategorySource More… FaThumb ClearMenu Search: Pic00345 1:21pm Pic00346 1:22pm Pic00347 1:23pm Pic00348 1:25pm Back ActionLocationTime Type PersonCategory Source More… FaThumb ClearMenu 1 1 2 2 3 3 6 6 9 9 8 8 7 7 4 4 5 5 Search: FaThumb ClearMenu This block5 blocksNeighbor … City StateCountry Search: FaThumb ClearMenu Search: MondayThursdaySunday Monday TuesdaySaturdayWednesday Tuesday Friday FaThumb ClearMenu Search: TodayYesterdayThis week Last Week This monthLast Month This Year Earlier

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 cant 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