from big to small : weaving joy into ui design daniel c. robbins [email protected]@microsoft.com...
TRANSCRIPT
From Big to Small:Weaving Joy into UI DesignDaniel C. Robbins [email protected]://research.microsoft.com/~dcrMicrosoft Research
NOTE: This presentation requires internet connectivity to correctly display all of the active content. You may also have to enable “active content.”
Me
SculptorDesignerSculptorDesigner
Made a video gameMade a video game
Brown Computer Graphics GroupBrown Computer Graphics Group
UI ConsultingUI Consulting
Husband & FatherHusband & Father
Microsoft ResearchMicrosoft 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
TechCapabilities
Human Capabilities*
* Idiocracy, 2006
UI Design Principles
StabilityStability
PerceptualPerceptualAttentionAttention
Past, Present, & Future
Past, Present, & Future
Design Extremes
TASK GALLERYA 3D Task Management System
Demo / Video
Local Web
• http://research.microsoft.com/ui/TaskGallery/video.mpg
Demo (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 Mockuphtt
p://
rese
arch
.mic
roso
ft.c
om/~
dcr/
wor
k/pr
otot
ypes
/wid
gets
.htm
l
http:
//re
sear
ch.m
icro
soft
.com
/~dc
r/w
ork/
prot
otyp
es/p
eeki
ng_0
1.ht
mPeeking Mockup
Can 3D Be Simple?
Surprises: Slaves to the Metaphor
• Interactive landmarks?• Lonely hallway• Where is the UI?
FATHUMBFaceted Search on a Smartphone
Demo / Video
Local Web
Demo
http://research.microsoft.com/vibe/videos/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
Me Friends Family
Co-workers
BusinessGovernment?
More…
Action Location Date
Type
PersonSubjectProperties
?
Serendipity
A - D E - H I - L
M - P
Q - TU - XY - Z
0 - #
Action Location Date
Type
PersonSubjectProperties
?
Dan Robbins (me)
Action Location Date
Type
PersonSubject?
?
Me Friends Family
Co-workers
BusinessGovernment?
More…
57,000 results
Created Modified Viewed
Sent
Contacted
Received?
More…
Action Location Date
Type
PersonSubjectProperties
?
Today Yesterday Last 7 Days
Last 30 Days
Last YearBefore
last year
In the Future
More…
23 results
Eric HorvitzAction Location Date
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 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
Steal from Phlat
• Always show results• Avoid “stuck-filters”
• Filtering + free-text• Predictive feedback• Special case booleans
Date OR
Location OR
Type AND
Category AND
Navigation
1
2
4
9
*
Back
*
Back
“Pin” “Pin”
Prototype
http://research.microsoft.com/~dcr/work/prototypes/pane%20navigation%2005.html
Overview
• Facets + Free-text
• Nine-pad is least-common-denominator
• Animated navigation• Pivot on meta-data
ResultsResults
Facet Navigation
Facet Navigation
MenuMenu
Current QuerySearch Terms
Current QuerySearch Terms
Standard 9-keypad
Standard 9-keypad
Next Steps: Optimized Views
FaThumb
Clear Menu
Search:
Back
Action Location Time
Type
PersonCategorySource
More…
FaThumb
Clear Menu
Search:
Back
Action Location Time
Type
PersonCategorySource
More…
FaThumb
Clear Menu
Search:
Back
Action Location Time
Type
PersonCategorySource
More…
FaThumb
Clear Menu
Search:
Pic003451:21pm
Pic003461:22pm
Pic003471:23pm
Pic003481:25pm
Back
Action Location Time
Type
PersonCategorySource
More…
FaThumb
Clear Menu
11 22 33
66
998877
44 55
Search:
FaThumb
Clear Menu
This block 5 blocks Neighbor…
City
StateCountry
Search:
FaThumb
Clear Menu
Search:
Monday Thursday Sunday
Monday
TuesdaySaturdayWednesday
Tuesday Friday
FaThumb
Clear Menu
Search:
Today Yesterday
This week
Last Week
This month
Last Month
This Year
Earlier
RAPIDLY PROTOTYPING SCULPTUREMaking 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 SCULPTUREVisualize, 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 THEMESJoy is more important than efficiency
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