early stage prototyping - stanford hci...

10
1 dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2016 Prof. James A. Landay Stanford University 2016/10/20 Prof. James A. Landay Computer Science Department Stanford University Autumn 2016 DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATION Early Stage Prototyping October 20, 2016 Hall of Fame or Shame? 2 Paper iPad App By 53 Hall of Fame or Shame? 3 Hall of Fame or Shame? 4 Paper iPad App By 53 Hall of Fame! 2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 5 Good pens feel natural & the app is extremely good for its only real purpose: idea generation / notation once 3 basic gestures are learned, they become a natural part of rapid ideation look & feel is important here as the tools are “pleasurable” & work as expected Bad gestures are not easily discoverable and require a short initial tutorial Paper iPad App By 53 Hall of Fame or Shame? 2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 6 iOS 6 Maps By Apple Inc.

Upload: truongdan

Post on 06-Mar-2018

222 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Early Stage Prototyping - Stanford HCI grouphci.stanford.edu/.../cs147/2016/au/lectures/07-lo-fi-prototyping.pdf · “Prototyping for Tiny Fingers”by Rettig 2016/10/20 dt+UX: Design

1

dt+UX – Design Thinking for User Experience Design, Prototyping & EvaluationAutumn 2016Prof. James A. LandayStanford University

2016/10/20

Prof. James A. LandayComputer Science DepartmentStanford University

Autumn 2016

DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATION

Early Stage Prototyping

October 20, 2016

Hall of Fame or Shame?

2

Paper iPad AppBy 53

Hall of Fame or Shame?

3

Hall of Fame or Shame?

4

Paper iPad AppBy 53

Hall of Fame!

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 5

Good– pens feel natural & the app is extremely

good for its only real purpose: idea generation / notation

– once 3 basic gestures are learned, they become a natural part of rapid ideation

– look & feel is important here as the toolsare “pleasurable” & work as expected

Bad– gestures are not easily discoverable and

require a short initial tutorial

Paper iPad AppBy 53 Hall of Fame or Shame?

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 6

iOS 6 MapsBy Apple Inc.

Page 2: Early Stage Prototyping - Stanford HCI grouphci.stanford.edu/.../cs147/2016/au/lectures/07-lo-fi-prototyping.pdf · “Prototyping for Tiny Fingers”by Rettig 2016/10/20 dt+UX: Design

2

dt+UX – Design Thinking for User Experience Design, Prototyping & EvaluationAutumn 2016Prof. James A. LandayStanford University

2016/10/20

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 7

iOS 6 MapsBy Apple Inc.

Hall of Shame!

Good– beautiful alternative to the competition

& generally easier to read

– turn by turn directions are efficient,clear & functions well – in general

Bad– despite any aesthetics, the data is

wrong & sparse, meaning, it does not perform the one task it should do well– getting from A to B

Hall of Shame!

Google Maps Data vs iOS6 Maps Data2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 8

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 9

iOS 6 MapsBy Apple Inc.

Hall of Shame!

A clear example of where no matter how good a design may be, without its most important function in this case, correct data, the interface is useless

Potentially Hall of Fame

Apple crowd sourced data

The UI for problem reporting is well designed

With so many users have potential to fix data rapidly

→ it has gotten much better!

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 10

Outline

• Storyboarding

• Types of prototypes

• Low-fi prototyping

• Conducting a low-fi test

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 11

Design Process: Exploration

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 12

Expand Design Space• Brainstorming

• Sketching

• Storyboarding

• Prototyping

Production

Design Refinement

Design Exploration

Discovery

Page 3: Early Stage Prototyping - Stanford HCI grouphci.stanford.edu/.../cs147/2016/au/lectures/07-lo-fi-prototyping.pdf · “Prototyping for Tiny Fingers”by Rettig 2016/10/20 dt+UX: Design

3

dt+UX – Design Thinking for User Experience Design, Prototyping & EvaluationAutumn 2016Prof. James A. LandayStanford University

2016/10/20

Sketches & Storyboards

• Where do storyboards come from?– film & animation

• Give you a “script” of important events– leave out the details

– concentrate on the important interactions

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 13 2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 14

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 15

Sketches & Storyboards in UX Design

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 16

Sketches & Storyboards in UX Design

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 17 2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 18

Ink Chat

Starts to tell a story, but still describes the design

Page 4: Early Stage Prototyping - Stanford HCI grouphci.stanford.edu/.../cs147/2016/au/lectures/07-lo-fi-prototyping.pdf · “Prototyping for Tiny Fingers”by Rettig 2016/10/20 dt+UX: Design

4

dt+UX – Design Thinking for User Experience Design, Prototyping & EvaluationAutumn 2016Prof. James A. LandayStanford University

2016/10/20

Sketches & Storyboards in UX Design

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 19

Task:Task Flow #1

What is a Prototype?

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 20

“A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.” – Wikipedia

a working representation of a final artifacthttp://www.computerhistory.org/collections/accession/102716262

Types of Prototypes

Prototypes are concrete representations of a design

Prototype dimensions– representation: form of the prototype

• off-line (paper) or on-line (software)

– precision: level of detail (e.g., informal or polished)

– interactivity: watch-only vs. fully interactive• fixed prototype (video clips)

• fixed-path prototype (each step triggered by specified actions)– at extreme could be 1 path or possibly more open (e.g., Denim)

• open prototype (real, but limited error handling or performance)

– evolution: expected life cycle of prototype• e.g., throw away or iterative

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 21

Karem SuerPJ McCormick

Types of Prototypes

Prototypes are concrete representations of a design

Prototype dimensions– representation: form of the prototype

• off-line (paper) or on-line (software)

– precision: level of detail (e.g., informal or polished)

– interactivity: watch-only vs. fully interactive• fixed prototype (video clips)

• fixed-path prototype (each step triggered by specified actions)– at extreme could be 1 path or possibly more open (e.g., Denim)

• open prototype (real, but limited error handling or performance)

– evolution: expected life cycle of prototype• e.g., throw away or iterative

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 22

Fidelity in Prototyping

• Fidelity refers to the level of detail

• High fidelity?– prototypes look like the

final product

• Low fidelity?– artists renditions with

many details missing

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 23

Hi-fi Prototypes Warp

• Perceptions of the tester/reviewer– representation communicates “finished”

• comments focus on color, fonts, & alignment

• Time– encourage precision

• specifying details takes more time

• Creativity– lose track of the big picture

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 24

Page 5: Early Stage Prototyping - Stanford HCI grouphci.stanford.edu/.../cs147/2016/au/lectures/07-lo-fi-prototyping.pdf · “Prototyping for Tiny Fingers”by Rettig 2016/10/20 dt+UX: Design

5

dt+UX – Design Thinking for User Experience Design, Prototyping & EvaluationAutumn 2016Prof. James A. LandayStanford University

2016/10/20

Why Use Low-fi Prototypes?

• Traditional methods take too long– sketches → prototype → evaluate → iterate

• Can instead simulate the prototype– sketches → evaluate → iterate

– sketches act as prototypes• designer “plays computer”; others observe & record

• Kindergarten building skills– allows non-programmers to participate

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 25

The Basic Materials

• Large, heavy, white paper (A3 or 11x17)• 5x8 in./A5/A6 index cards• Tape, stick glue, correction tape• Pens & markers (many colors & sizes)• Post-its• Overhead

transparencies• Scissors• X-acto knives, etc.

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 26http://www.flickr.com/photos/latitude14/3651034642/sizes/l/in/photostream/

“Prototyping for Tiny Fingers” by Rettig

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 27 2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 28

ESP2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 29 2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 30

Page 6: Early Stage Prototyping - Stanford HCI grouphci.stanford.edu/.../cs147/2016/au/lectures/07-lo-fi-prototyping.pdf · “Prototyping for Tiny Fingers”by Rettig 2016/10/20 dt+UX: Design

6

dt+UX – Design Thinking for User Experience Design, Prototyping & EvaluationAutumn 2016Prof. James A. LandayStanford University

2016/10/20

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 31

ZAPT

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 32

Cookable

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 33

Cookable

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 34

Cookable

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 35

Cookable

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 36

Cookable

Page 7: Early Stage Prototyping - Stanford HCI grouphci.stanford.edu/.../cs147/2016/au/lectures/07-lo-fi-prototyping.pdf · “Prototyping for Tiny Fingers”by Rettig 2016/10/20 dt+UX: Design

7

dt+UX – Design Thinking for User Experience Design, Prototyping & EvaluationAutumn 2016Prof. James A. LandayStanford University

2016/10/20

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 37

Who is Zuki?

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 38

Who is Zuki?

Administrivia

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 40

Administrivia• Web Team Survey

– https://goo.gl/forms/qnqe9lZ03sQiFdju2• SFMOMA Field Trip, Sunday, Nov. 13

– http://tinyurl.com/sfmoma147• Assignment #5 – Low-fi Prototype & Pilot Usability

Test– 15-20 rough sketches of different design realizations

(everyone on team contributes) • think different modalities (e.g., visual, speech, watch) or

different visual UIs (gestures, taps, etc.)• will do most of this in studio

– pick best 2 realizations & storyboard more– pick best realization & add details to storyboard– build low-fi prototype of the best & test it w/ 3 target

participants

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 41

POV, HMW, EP Assignment #2

Written Report: avg=90, std. dev.=5

Team Presentation: avg=90, std. dev.=5

Individual Presenter: avg=93, std. dev.=4

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 42

Page 8: Early Stage Prototyping - Stanford HCI grouphci.stanford.edu/.../cs147/2016/au/lectures/07-lo-fi-prototyping.pdf · “Prototyping for Tiny Fingers”by Rettig 2016/10/20 dt+UX: Design

8

dt+UX – Design Thinking for User Experience Design, Prototyping & EvaluationAutumn 2016Prof. James A. LandayStanford University

2016/10/20

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 43

T E A MM E E T I N G S

Constructing the Model

• Set a deadline– don’t think too long - build it!

• Draw a window frame on large paper

• Put different screen regions on cards– anything that moves, changes, appears/disappears

• Ready response for any user action– e.g., have those pull-down menus already made

• Use photocopier/printer to make many versions

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 44

Constructing the Model

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 45

Constructing the Model

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 46

Constructing the Model

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 47

Constructing the Model

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 48

Page 9: Early Stage Prototyping - Stanford HCI grouphci.stanford.edu/.../cs147/2016/au/lectures/07-lo-fi-prototyping.pdf · “Prototyping for Tiny Fingers”by Rettig 2016/10/20 dt+UX: Design

9

dt+UX – Design Thinking for User Experience Design, Prototyping & EvaluationAutumn 2016Prof. James A. LandayStanford University

2016/10/20

Constructing the Model

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 49

Preparing for a Test

• Select your “customers”– understand background of intended users

– use a questionnaire to get the people you need

– don’t use friends or family• I think existing “customers” are OK (Rettig disagrees)

• Prepare scenarios that are– typical of the product during actual use

– make prototype support these (small, yet broad)

• Practice to avoid “bugs”

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 50

Conducting a Test

• Four roles– greeter – puts users at ease & gets data– facilitator – only team member who speaks

• gives instructions & encourages thoughts, opinions

– computer – knows application logic & controls it• always simulates the response, w/o explanation

– observers – take notes & recommendations

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 51 2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 52

Conducting a Test

Conducting a Test

• Four roles– greeter – puts users at ease & gets data– facilitator – only team member who speaks

• gives instructions & encourages thoughts, opinions

– computer – knows application logic & controls it• always simulates the response, w/o explanation

– observers – take notes & recommendations

• Typical session is 1 hour– preparation, the test, debriefing

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 53

JAL2

Evaluating Results

• Sort & prioritize observations– what was important?

– lots of problems in the same area?

• Create a written report on findings– gives agenda for meeting on design changes

• Make changes & iterate

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 54

Page 10: Early Stage Prototyping - Stanford HCI grouphci.stanford.edu/.../cs147/2016/au/lectures/07-lo-fi-prototyping.pdf · “Prototyping for Tiny Fingers”by Rettig 2016/10/20 dt+UX: Design

10

dt+UX – Design Thinking for User Experience Design, Prototyping & EvaluationAutumn 2016Prof. James A. LandayStanford University

2016/10/20

Advantages of Low-fi Prototyping

• Takes only a few hours– no expensive equipment needed

• Can test multiple alternatives– fast iterations

• number of iterations is tied to final quality

• Almost all interaction can be faked(Wizard of Oz method)

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 55

Problems with Low-fi Prototypes

• “Computer” inherently buggy• Slow compared to real app

– timings not accurate

• Hard to implement somefunctionality– pulldowns, feedback, drag, viz …

• Won’t look like final product– sometimes hard to recognize

widgets

• End-users can’t use by themselves– not in context of user’s work

environment

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 56

Commercial Tools

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 57

Balsamiq Mockupssee tutorial herehttp://support.balsamiq.com/customer/portal/articles/107999

POP

Reflector 2.0

Summary

• Prototypes are a concrete representation of adesign or final product

• Low-fi testing allows us to quickly iterate– get feedback from users & change right away

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 58

Further ReadingPrototyping

• Books– Paper Prototyping: The Fast and Easy Way to Design and Refine

User Interfaces, by Carolyn Snyder, Morgan Kaufmann, 2003

• Articles– “Prototyping for Tiny Fingers” by Marc Rettig, in Communications of

the ACM, 1994 – “Using Paper Prototypes to Manage Risk” by Carolyn Snyder,

http://world.std.com/~uieweb/paper.htm– “The Perils of Prototyping” by Alan Cooper,

http://www.chi-sa.org.za/Documents/articles/perils.htm

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 59

Next Time

• Lecture– Watch, Critique & Vote on Concept Videos– Mid-term course evaluation

• No Reading

• Project– 15-20 sketches of 3-5 design realizations in studio…– Pick the top two & storyboard those– Pick the top 1 & build/test low-fi prototypes using 3

key tasks for next week’s studio presentation• Recruit representative participants now!

2016/10/20 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 60