from big to small : weaving joy into ui design daniel c. robbins dcr@microsoft.comdcr@microsoft.com...

Post on 26-Mar-2015

221 Views

Category:

Documents

3 Downloads

Preview:

Click to see full reader

TRANSCRIPT

From Big to Small:Weaving Joy into UI DesignDaniel C. Robbins dcr@microsoft.comhttp://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

top related