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

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.”

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

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

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

Values

Design should increase our joy in life

“Flow” is more important than efficiency

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

• Attention is scarcest resource!

• Humility and levity• “Good surprises”

Respect the Human

TechCapabilities

Human Capabilities*

* Idiocracy, 2006

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

UI Design Principles

StabilityStability

PerceptualPerceptualAttentionAttention

Past, Present, & Future

Past, Present, & Future

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

Design Extremes

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

TASK GALLERYA 3D Task Management System

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

Demo / Video

Local Web

• http://research.microsoft.com/ui/TaskGallery/video.mpg

Demo (internal only)

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

Design Criteria

• Tasks• Simple• Simultaneity• Focus• Landmarks• Personalization

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

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

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

My Sketches

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

Pushing the Sketches

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

Group Designs

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

Widgets Mockuphtt

p://

rese

arch

.mic

roso

ft.c

om/~

dcr/

wor

k/pr

otot

ypes

/wid

gets

.htm

l

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

http:

//re

sear

ch.m

icro

soft

.com

/~dc

r/w

ork/

prot

otyp

es/p

eeki

ng_0

1.ht

mPeeking Mockup

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

Can 3D Be Simple?

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

Surprises: Slaves to the Metaphor

• Interactive landmarks?• Lonely hallway• Where is the UI?

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

FATHUMBFaceted Search on a Smartphone

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

Demo / Video

Local Web

Demo

http://research.microsoft.com/vibe/videos/fathumb%20V1-6-attribution.wmv

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

Lofty Goals

• Everything is a node

• Graphically hop through information• Filter by canonical dimensions• All facets treated equally

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

Connections

Dan

Stef

Me Friends Family

Co-workers

BusinessGovernment?

More…

Action Location Date

Type

PersonSubjectProperties

?

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

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

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

Sketches

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

Filtered Views

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

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

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

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

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

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

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

Navigation

1

2

4

9

*

Back

*

Back

“Pin” “Pin”

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

Prototype

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

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

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

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

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

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

RAPIDLY PROTOTYPING SCULPTUREMaking the virtual real

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

Advantages

• Precision• Sketch on PC• Parts reuse• Design variations

• “Just hit print!”

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

Design and Visualization

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

Production

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

Results

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

Surprises

• Clearances wrong• Too small

• Hard to scale up

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

Pain-points

• Interference checking• Range-of-movement design• Assembly visualization

• “Dumb” models Not parametric

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

LARGE TEMPORARY SCULPTUREVisualize, Prototype, and Test at Home!

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

Process

• Tensegrity simulator for initial layout• 3DS Max for rendering presentation• Small-scale physical prototype

• Test locally• Snap-together assembly on-site

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

Simulation & Pre-Visualization

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

Physical Prototype

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

Testing

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

Lessons Learned

• Unintended uses

• Assembly instructions• Spare parts• Regular safety checks• Metal is heavy

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

LATE BREAKING NEWS

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

Boku: End-User Programming

Note: This video will not play over the web as it is not released for general consumption yet

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

COMMON THEMESJoy is more important than efficiency

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

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


Recommended