Presentation on theme: "From Big to Small : Weaving Joy into UI Design Daniel C. Robbins Microsoft Research."— Presentation transcript:
From Big to Small : Weaving Joy into UI Design Daniel C. Robbins Microsoft Research NOTE: This presentation requires internet connectivity to correctly display all of the active content. You may also have to enable active content.
Me Sculptor Designer Sculptor Designer Made a video game Brown Computer Graphics Group UI Consulting Husband & Father Microsoft Research
Values Design should increase our joy in life Flow is more important than efficiency
Attention is scarcest resource! Humility and levity Good surprises Respect the Human Tech Capabilities Human Capabilities * * Idiocracy, 2006Idiocracy
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
Pushing the Sketches
Widgets Mockup k/prototypes/widgets.html
otypes/peeking_01.htm Peeking Mockup
Can 3D Be Simple?
Surprises: Slaves to the Metaphor Interactive landmarks? Lonely hallway Where is the UI?
FATHUMB Faceted Search on a Smartphone
Demo / Video LocalWeb Demo s/fathumb%20V1-6-attribution.wmv
Lofty Goals Everything is a node Graphically hop through information Filter by canonical dimensions All facets treated equally
Connections Dan Stef MeFriends Family Co-workers BusinessGovernment? More… ActionLocationDate Type PersonSubjectProperties ?
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
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
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 s 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
Steal from Phlat Always show results Avoid stuck-filters Filtering + free-text Predictive feedback Special case booleans DateOR LocationOR TypeAND CategoryAND
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
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: Pic :21pm Pic :22pm Pic :23pm Pic :25pm Back ActionLocationTime Type PersonCategory Source More… FaThumb ClearMenu 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
RAPIDLY PROTOTYPING SCULPTURE Making the virtual real
Advantages Precision Sketch on PC Parts reuse Design variations Just hit print!
Design and Visualization
Surprises Clearances wrong Too small Hard to scale up
LARGE TEMPORARY SCULPTURE Visualize, Prototype, and Test at Home!
Process Tensegrity simulator for initial layout 3DS Max for rendering presentation Small-scale physical prototype Test locally Snap-together assembly on-site
Simulation & Pre-Visualization
Lessons Learned Unintended uses Assembly instructions Spare parts Regular safety checks Metal is heavy
LATE BREAKING NEWS
Boku: End-User Programming Note: This video will not play over the web as it is not released for general consumption yet
COMMON THEMES Joy is more important than efficiency
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