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

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

Design Extremes

TASK GALLERY A 3D Task Management System

Demo / Video LocalWeb /TaskGallery/video.mpg /TaskGallery/video.mpg DemoDemo (internal only)

Design Criteria Tasks Simple Simultaneity Focus Landmarks Personalization

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

My Sketches

Pushing the Sketches

Group Designs

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

Sketches

Filtered Views

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

Navigation * Back * Pin

Prototype work/prototypes/pane%20navigation %2005.html

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

Production

Results

Surprises Clearances wrong Too small Hard to scale up

Pain-points Interference checking Range-of-movement design Assembly visualization Dumb models Not parametric

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

Physical Prototype

Testing

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