11
1 dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation CS 147, Autumn 2015 Prof. James A. Landay Stanford University 10/6/2015 Prof. James A. Landay Computer Science Department Stanford University Autumn 2015 DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATION dt UX + Design Exploration Through Sketching & Experience Prototyping * slides m ar ked Buxton ar e cour tesy of Bill Buxton, fr om his talk Why I Love the iP od, iP hone, Wii and Google, r em ix uk, 18@19 S ept. 2008, Br ighton October 6, 2015 Thiswork islicensed under the Creative Commons Attribution Noncommercial-Share Alike 3.0 Unported License. To view a thislicense, visit http://creativecommons.org/licenses/by-nc By LG THINQ Smart Fridge Hall of Fame or Shame? By LG THINQ Smart Fridge Hall of Fame or Shame? 3 Hall of Shame! Forget about UI specifics Who wants this???? 4 Interface Hall of Shame or Fame? 10/6/2015 dt+UX: Design Thinking for User Experience Desi gn, Prototypi ng & Eva luati on 5 Amtrak Web Site (US trains) Interface Hall of Fame/Shame! • Good – tells you what’s wrong gets your attention • Bad – doesn’t label where to fix issues tells you that you made an error, because you didn’t know their codes 10/6/2015 dt+UX: Design Thinking for User Experience Desi gn, Prototypi ng & Eva luati on 6 Amtrak Web Site (US trains)

dt+UX – Design Thinking for User Experience Design, Prototyping

  • Upload
    doxuyen

  • View
    257

  • Download
    0

Embed Size (px)

Citation preview

Page 1: dt+UX – Design Thinking for User Experience Design, Prototyping

1

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation CS 147, Autumn 2015Prof. James A. LandayStanford University

10/6/2015

Prof. James A. LandayComputer Science DepartmentStanford University

Autumn 2015

DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATIONdt UX+

Design Exploration Through Sketching & Experience Prototyping

* "slides"marked"Buxton" are"courtesy" of" Bill"Buxton," from"his" talk"�Why"I" Love" the"iPod," iPhone," Wii"and"Google�," remix"uk,"18@19" Sept." 2008,"Br ighton

October 6, 2015

Thiswork is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view athis license, visit http:/ / creativecommons.org/ licenses/by-nc-sa/3.0/

By LGTHINQ Smart Fridge

Hall of Fame or Shame?

By LGTHINQ Smart Fridge

Hall of Fame or Shame?

3

Hall of Shame!

Forget about UI specificsWho wants this????

4

Interface Hall of Shame or Fame?

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 5

Amtrak Web Site (US trains)

Interface Hall of Fame/Shame!

• Good– tells you what’s wrong– gets your attention

• Bad– doesn’t label where to

fix issues– tells you that you made

an error, because you didn’t know their codes

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 6

Amtrak Web Site (US trains)

Page 2: dt+UX – Design Thinking for User Experience Design, Prototyping

2

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation CS 147, Autumn 2015Prof. James A. LandayStanford University

10/6/2015

Interface Hall of Fame/Shame!

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 7

Amtrak Web Site (US trains)

New Version is marginally better

Dyson AirBlade hand dryerexample courtesy of Maya I.

Interface Hall of Fame or Shame?

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 8

Interface Hall of Fame!

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 9

Dyson AirBlade hand dryerexample courtesy of Maya I.

Good– shape indicates function– so simple that instructions fit in 1

image– fun!

Bad– dripping water?– too much noise– still takes too long

Prof. James A. LandayComputer Science DepartmentStanford University

Autumn 2015

DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATIONdt UX+

Design Exploration Through Sketching & Experience Prototyping

* "slides"marked"Buxton" are"courtesy" of" Bill"Buxton," from"his" talk"�Why"I" Love" the"iPod," iPhone," Wii"and"Google�," remix"uk,"18@19" Sept." 2008,"Br ighton

October 6, 2015

Thiswork is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view athis license, visit http:/ / creativecommons.org/ licenses/by-nc-sa/3.0/

Outline

• Sketching to explore user experiences• Team Break• Experience prototyping

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 11

Design Process: Discovery

Assess Needs

• understand client’s expectations

• determine scope of project

• characteristics of customers & tasks

• evaluate existing practices & products

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 12

Production

Design.Refinement

Design.Exploration

Discovery

Page 3: dt+UX – Design Thinking for User Experience Design, Prototyping

3

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation CS 147, Autumn 2015Prof. James A. LandayStanford University

10/6/2015

Design Process: Exploration

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 13

Production

Design.Refinement

Design,Exploration

DiscoveryExpand Design Space

• brainstorming• sketching• storyboarding• prototyping

Iteration At.every.stage!

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 14

Design

PrototypeEvaluateSketch

PaperVideoToolProgram

GutCritExpert.EvalLoCfi.TestUser.Study

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation

Sketching: A Quintessential Activity of Design

* Courtesy Bill Buxton

16

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation Kicker Studio, www.kickerstudio.com17 10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation

Kicker Studio, www.kickerstudio.com

18

Page 4: dt+UX – Design Thinking for User Experience Design, Prototyping

4

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation CS 147, Autumn 2015Prof. James A. LandayStanford University

10/6/2015

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation Kicker Studio, www.kickerstudio.com 19 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 10/6/2015 Courtesy Bill Buxton20

From Sketch to Prototype

21Courtesy Bill Buxton

Difference in intent rather than in form

The Anatomy of “Sketching”• Quick / Timely• Inexpensive / Disposable• Plentiful• Clear vocabulary. You know that it is a sketch

(lines extend through endpoints, …)• No higher resolution than required to

communicate the intended purpose/concept• Resolution doesn’t suggest a degree of

refinement of concept that exceeds actual state• Ambiguous

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 22

Courtesy Bill Buxton

If.you.want. to.get.the. most.out. of.a.sketch,. you. need.to.leave. big.enough. holes.

There. has. to.be.enough. room. for.the. imagination.

Courtesy Bill Buxton

Elaboration (“Flare”) Reduction (“Focus”)

Laseau (1980)

Design as Choice

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 24

Courtesy Bill Buxton

Page 5: dt+UX – Design Thinking for User Experience Design, Prototyping

5

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation CS 147, Autumn 2015Prof. James A. LandayStanford University

10/6/2015

Exploration of Alternatives

dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 25

… a designer that pitched three ideas would probably be fired. I’d say 5 is an entry point for an early formal review (distilled from 100’s). … if you are pushing one you will be found out, and also fired. … it is about open mindedness, humility, discovery, and learning. If you aren’t authentically dedicated to that approach you are just doing it wrong!

Alistair HamiltonVP Design

Symbol Technologies

Courtesy Bill Buxton

Exploration of Alternatives

dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 26

People on a design team must be as happy to be wrong as right. If their ideas hold up under strong (but fair) criticism, then great, they can proceed with confidence. If their ideas are rejected with good rationale, then they have learned something. …There are no dumb questions. There are no ideas too crazy to consider. Get it on the table, even if you are playing around. It may lead to something.

Bill BuxtonSketching User Experiences

pg. 147-149

Courtesy Bill Buxton

Courtesy Bill Buxton

Design

What does the customer want to buy?

Courtesy Bill Buxton

Experience Design

“The experience of even s imple artifacts does not exis t in a vacuum but, rather, in dynamic relationship with other people, places , and objects” – Buchenau & Suri 2000

Experience vs. Interface Design

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 29

CitrusMate Plus Mighty OJ Manual Juicer OrangeX Manual Juicer

Experience Design

• Draw my phone• Draw my phone’s interface• Draw the experience of

using my phone

• Which is the true object of design?

dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 3010/6/2015

Courtesy Bill Buxtonhttp://www.lis tmeapp.com/

Page 6: dt+UX – Design Thinking for User Experience Design, Prototyping

6

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation CS 147, Autumn 2015Prof. James A. LandayStanford University

10/6/2015

Minimal Detail Include only what is required to render the intended purpose or concept

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 31http://www.smashingmagazine.com/2013/06/sketching-for-better-mobile-experiences /

People.think.focusing. is.about.saying.“yes.”.But…“Focusing.is.about.saying.no.”.– Steve.Jobs

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 32

Scott McCloud’s Understanding Comics

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 33

Strive for diversity of solutions

Team Break

1. Reflect on last week’s assignment (5-10 min)– what did you like about your team work?– what do you wish could be improved?

2. This weeks assignment (20 min)– what will it take to get finished?– what remains to be done? plan it!– can you address the critique from your TA in

what you are doing for this week?10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 34

Design Thinking

dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 3510/6/2015

Design Thinking

dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 3610/6/2015

Page 7: dt+UX – Design Thinking for User Experience Design, Prototyping

7

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation CS 147, Autumn 2015Prof. James A. LandayStanford University

10/6/2015

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 37

PROTOTYPE

to think

to learn

TEST YOUR ASSUMPTIONSTRY THE MARSHMALLOW

From a resources and project management point of view: Prototyping reduces risk! Early failures are much cheaper (time and $) than late failures!

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 38

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 39

You can use an eraser on the drafting table or a sledgehammer on the construction site.

Frank Lloyd Wright

Types of Prototypes

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 40

looks like works like

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 41 10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 42

Interacts Like = Experience Prototype

Page 8: dt+UX – Design Thinking for User Experience Design, Prototyping

8

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation CS 147, Autumn 2015Prof. James A. LandayStanford University

10/6/2015

43

Famous Experience Prototype

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 44

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 45 10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 46

TEST

what newinformation do youhave about theuser’s need?

what newinformation do youhave about how yoursolution addressesthe need?

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 47 10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 48

Page 9: dt+UX – Design Thinking for User Experience Design, Prototyping

9

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation CS 147, Autumn 2015Prof. James A. LandayStanford University

10/6/2015

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 49 10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 50

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 51 10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 52

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 53 10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 54

Page 10: dt+UX – Design Thinking for User Experience Design, Prototyping

10

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation CS 147, Autumn 2015Prof. James A. LandayStanford University

10/6/2015

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 55 10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 56

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 57 10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 58

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 59 10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 60

Page 11: dt+UX – Design Thinking for User Experience Design, Prototyping

11

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation CS 147, Autumn 2015Prof. James A. LandayStanford University

10/6/2015

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 61

Parallel Experience Prototyping Goal

• Prototype to test an assumption

• Prototype can be a piece of idea rather than a complete solution

• Think of it as another needfindingtechnique

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 62

Summary• Sketching allows exploration of many

concepts in the very early stages of design

• As investment goes up, need to use more and more formal criteria for evaluation

• Experience prototyping allows us to try many ideas quickly & learn more about the problem & solution space (prototype to learn)

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 63

Next Time• Web Workshop on HTML/CSS/Git led by Cathy Zhu

– Tonight, 7-8 PM, Lathrop

• Assignment 3: Project Web Site– online later today– not graded until near the end of quarter (but you should create it now)– all project assignments need to be linked off this site (relative links)

• Lecture – Concept Videos

• Project (due Thursday/Friday in studio)– Create/test experience prototypes for top 3 solutions– Test each prototype with at least 1 target users– In presentation, get across what you learned!

10/6/2015 dt+UX: Des ign Think ing for Us er Ex perience Des ign, Prototy ping & Ev aluation 64