From Big to Small : Weaving Joy into UI Design Daniel C. Robbins dcr@ @microsoft.com dcr Microsoft Research

  • View
    215

  • Download
    3

Embed Size (px)

Text of From Big to Small : Weaving Joy into UI Design Daniel C. Robbins dcr@ @microsoft.com dcr Microsoft...

  • Slide 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. Slide 2 Me Sculptor Designer Sculptor Designer Made a video game Brown Computer Graphics Group UI Consulting Husband & Father Microsoft Research Slide 3 Values Design should increase our joy in life Flow is more important than efficiency Slide 4 Attention is scarcest resource! Humility and levity Good surprises Respect the Human Tech Capabilities Human Capabilities * * Idiocracy, 2006Idiocracy Slide 5 UI Design Principles Stability Perceptual Attention Past, Present, & Future Slide 6 Design Extremes Slide 7 TASK GALLERY A 3D Task Management System Slide 8 Demo / Video LocalWeb http://research.microsoft.com/ui /TaskGallery/video.mpg http://research.microsoft.com/ui /TaskGallery/video.mpg DemoDemo (internal only) Slide 9 Design Criteria Tasks Simple Simultaneity Focus Landmarks Personalization Slide 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 Slide 11 My Sketches Slide 12 Pushing the Sketches Slide 13 Group Designs Slide 14 Widgets Mockup http://research.microsoft.com/~dcr/wor k/prototypes/widgets.html Slide 15 http://research.microsoft.com/~dcr/work/prot otypes/peeking_01.htm Peeking Mockup Slide 16 Can 3D Be Simple? Slide 17 Surprises: Slaves to the Metaphor Interactive landmarks? Lonely hallway Where is the UI? Slide 18 FATHUMB Faceted Search on a Smartphone Slide 19 Demo / Video LocalWeb Demo http://research.microsoft.com/vibe/video s/fathumb%20V1-6-attribution.wmv Slide 20 Lofty Goals Everything is a node Graphically hop through information Filter by canonical dimensions All facets treated equally Slide 21 Connections Dan Stef MeFriends Family Co-workers BusinessGovernment? More ActionLocationDate Type PersonSubjectProperties ? Slide 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 Slide 23 Sketches Slide 24 Filtered Views Slide 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 Slide 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 Slide 27 Steal from Phlat Always show results Avoid stuck-filters Filtering + free-text Predictive feedback Special case booleans DateOR LocationOR TypeAND CategoryAND Slide 28 Navigation 1 2 4 9 * Back * Pin Slide 29 Prototype http://research.microsoft.com/~dcr/ work/prototypes/pane%20navigation %2005.html Slide 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 Slide 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 Slide 32 RAPIDLY PROTOTYPING SCULPTURE Making the virtual real Slide 33 Advantages Precision Sketch on PC Parts reuse Design variations Just hit print! Slide 34 Design and Visualization Slide 35 Production Slide 36 Results Slide 37 Surprises Clearances wrong Too small Hard to scale up Slide 38 Pain-points Interference checking Range-of-movement design Assembly visualization Dumb models Not parametric Slide 39 LARGE TEMPORARY SCULPTURE Visualize, Prototype, and Test at Home! Slide 40 Process Tensegrity simulator for initial layout 3DS Max for rendering presentation Small-scale physical prototype Test locally Snap-together assembly on-site Slide 41 Simulation & Pre-Visualization Slide 42 Physical Prototype Slide 43 Testing Slide 44 Lessons Learned Unintended uses Assembly instructions Spare parts Regular safety checks Metal is heavy Slide 45 LATE BREAKING NEWS Slide 46 Boku: End-User Programming Note: This video will not play over the web as it is not released for general consumption yet Slide 47 COMMON THEMES Joy is more important than efficiency Slide 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