CSE 440: Introduction to HCI User Interface Design, Prototyping, and - - PowerPoint PPT Presentation

▶
cse 440 introduction to hci
SMART_READER_LITE
LIVE PREVIEW

CSE 440: Introduction to HCI User Interface Design, Prototyping, and - - PowerPoint PPT Presentation

Nov 25, 2023 173 likes •1.15k views

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation Lecture 02: James Fogarty Design Diamond Kailey Chan Dhruv Jain Nigini Oliveira Tuesday / Thursday Chris Seeds 12:00 to 1:20 Jihoon Suh Quantity versus

slide-1
SLIDE 1

CSE 440: Introduction to HCI

User Interface Design, Prototyping, and Evaluation

James Fogarty Kailey Chan Dhruv Jain Nigini Oliveira Chris Seeds Jihoon Suh Lecture 02: Design Diamond Tuesday / Thursday 12:00 to 1:20

slide-2
SLIDE 2

Quantity versus Quality

Bayles and Orland, 2001

One class told they will be graded on quality, another on quantity

slide-3
SLIDE 3

Quantity versus Quality

The quantity class produces better pots. Why?

Bayles and Orland, 2001

slide-4
SLIDE 4

Quantity versus Quality

The quantity class produces better pots. Why? “While the quantity group was busily churning

  • ut piles of work—and learning from their

mistakes—the quality group had sat theorizing about perfection, and in the end had little more to show for their efforts than grandiose theories and a pile of dead clay”

Bayles and Orland, 2001

slide-5
SLIDE 5

Today

Administrative

Assignment 0 Assignment 1c: Project Bid Section Balance and Movement Denny 303 on Tuesday 10/10

The Design Diamond

Examining a Design Process Sketching and Prototypes

slide-6
SLIDE 6

Assignment 0: Flash Card

Name

formal, preferred, pronouns

Majors/Minors

career goals

Year

1,2,3,4,5,6,…

Hometown Interesting Fact or “What I did on my …” Submit PDF via Canvas

slide-7
SLIDE 7

Project Status and Assignments

Proposals to be “Funded” and Posted for Bidding

Bidding Tomorrow, Team Formation Thursday Please Watch Your Email During This Process

Looking Forward

Ideation on Friday in Section 2b: Design Research Plan due Tuesday 1/17 2c: Design Research Check-In due Friday 1/20 2d: Design Research Review due Tuesday 1/24

Other Assignments

Assignment 0 Due Thursday Reading 1 Posted, Due Thursday

slide-8
SLIDE 8

Section Balance and Movement

9:30 Section: 12 people 10:30 Section: 15 people 11:30 Section: 14 people 12:30 Section: 13 people Project bidding will include “bid with section” and “bid in another section”, to allow moving A “switch section” bid dominates your other bids Most of you will bid “No Desire to Switch”

slide-9
SLIDE 9

Denny 303 on Tuesday 10/10

slide-10
SLIDE 10

Today

Administrative

Assignment 0 Assignment 1c: Project Bid Section Balance and Movement Denny 303 on Tuesday 10/10

The Design Diamond

Examining a Design Process Sketching and Prototypes

slide-11
SLIDE 11

Objectives

Be able to: Describe an iterative design process Describe the design diamond model of design, its implications, and how it can break down Describe properties of a sketch versus a prototype Differentiate examples of sketches from prototypes

slide-12
SLIDE 12

Sketching User Experiences

slide-13
SLIDE 13

Sketching

slide-14
SLIDE 14

Sketching

slide-15
SLIDE 15

Sketching

slide-16
SLIDE 16

Sketching

slide-17
SLIDE 17

Sketching

A process that enables you to think through ideas and convey design ideas to others very early in the design phase

slide-18
SLIDE 18

Quintessential Activity of Design

slide-19
SLIDE 19

Design as Choice

slide-20
SLIDE 20

IDEO’s Deep Dive (ABC News, 1999)

http://courses.cs.washington.edu/courses/cse440/videos/design/IDEO-DeepDive.mp4

slide-21
SLIDE 21

ABC News and IDEO’s Deep Dive

Things to see in this video:

brainstorming design research sketching critique

A highly iterative design process with a variety of intermediate artifacts

Why build a shopping cart with no bottom?

slide-22
SLIDE 22

IDEO’s Deep Dive (ABC News, 1999)

http://courses.cs.washington.edu/courses/cse440/videos/design/IDEO-DeepDive.mp4

slide-23
SLIDE 23

IDEO’s Deep Dive (ABC News, 1999)

slide-24
SLIDE 24

IDEO’s Deep Dive (ABC News, 1999)

slide-25
SLIDE 25

IDEO’s Deep Dive (ABC News, 1999)

slide-26
SLIDE 26

IDEO’s Deep Dive (ABC News, 1999)

slide-27
SLIDE 27

IDEO’s Deep Dive (ABC News, 1999)

slide-28
SLIDE 28

IDEO’s Deep Dive (ABC News, 1999)

slide-29
SLIDE 29

IDEO’s Deep Dive (ABC News, 1999)

slide-30
SLIDE 30

IDEO’s Deep Dive (ABC News, 1999)

slide-31
SLIDE 31

IDEO’s Deep Dive (ABC News, 1999)

slide-32
SLIDE 32

Perfect Shopping Cart?

slide-33
SLIDE 33

Perfect Shopping Cart?

Several design flaws

Kids will slide and fall out of that seat Where to put bags of dog food, cases of beer? Hook design with reusable bags Self-scanning challenges with theft

Focus on the design process

Designs always have limitations and tradeoffs

slide-34
SLIDE 34

Design as Choice

slide-35
SLIDE 35

Design as Choice

In the diamond, what are two openings for creativity? Why is your design research so important?

slide-36
SLIDE 36

Sketching in Design (2007)

“Design as Choice” “the creativity that you bring to enumerating meaningfully distinct

  • ptions from which to

choose”

slide-37
SLIDE 37

Sketching in Design (2007)

“Design as Choice” “the creativity that you bring to defining the criteria, or heuristics, according to which you make your choices”

slide-38
SLIDE 38

Design as Choice

In the diamond, what are two openings for creativity?

Palette of choices Heuristics to choose

Why is your design research so important?

What you learn directly informs both of these, shaping everything you do this entire quarter

slide-39
SLIDE 39

Elaboration palette of choices Reduction heuristics to choose

Design as Choice

slide-40
SLIDE 40

The Design Diamond

start intentional! generate select danger! danger! danger! danger!

slide-41
SLIDE 41

Properties of Sketches

Quick Timely Inexpensive Disposable Plentiful Clear Vocabulary Distinct Gesture Minimal Detail Appropriate Refinement Suggest and Explore Ambiguous

slide-42
SLIDE 42

Quick

A sketch is quick to make,

  • r at least gives that impression
slide-43
SLIDE 43

Timely

A sketch can be provided when needed

slide-44
SLIDE 44

Inexpensive

Cost must not inhibit the ability to explore a concept, especially early in design

slide-45
SLIDE 45

Disposable

If you cannot afford to throw it away, then it is not a sketch Investment is in the process, not the physical sketch But they are not "worthless"

slide-46
SLIDE 46

Plentiful

Sketches do not exist in isolation Meaning and relevance is in the context of a collection or series

slide-47
SLIDE 47

Clear Vocabulary

The way it is rendered makes it distinctive that it is a sketch (e.g., style, form, signals)

Could be how a line extends through endpoints Physical sketches have their own vocabulary

slide-48
SLIDE 48

Distinct Gesture

Fluidity of sketches gives them a sense of openness and freedom Opposite of engineering drawing, which is tight and precise

vs.

slide-49
SLIDE 49

Minimal Detail

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

slide-50
SLIDE 50

Minimal Detail

52

slide-51
SLIDE 51

Appropriate Degree of Refinement

Make the sketch as refined as the idea

If you have a solid idea, make the sketch look more defined If you have a hazy idea, make the sketch look rougher and less defined

slide-52
SLIDE 52

Suggest and Explore Rather than Confirm

Sketch should act as a catalyst to the desired and appropriate behaviors, conversations, and interactions

slide-53
SLIDE 53

Ambiguity

Intentionally ambiguous Value comes from being able to be interpreted in different ways, even by the person who created them Sketches have holes

slide-54
SLIDE 54

Sketching as Conversation

Mind

knowledge, new knowledge Create

Sketch

representation

Interpret Requires ambiguity

slide-55
SLIDE 55

Sketch vs. Prototype

Sketch Prototype Invite Attend Suggest Describe Explore Refine Question Answer Propose Test Provoke Resolve Tentative, non committal Specific Depiction The primary differences are in the intent

slide-56
SLIDE 56

ABC News and IDEO’s Deep Dive

slide-57
SLIDE 57

Sketching is Not Defined by Ink

Although sketching can often be done in ink, these properties can be found in other forms Those other forms are therefore sketches

slide-58
SLIDE 58

Sketching the Mouse

Making the Macintosh: http://www-sul.stanford.edu/mac/index.html

slide-59
SLIDE 59

Sketching the Mouse

Making the Macintosh: http://www-sul.stanford.edu/mac/index.html

slide-60
SLIDE 60

Physical Sketching

slide-61
SLIDE 61

Physical Sketching

Mueller, WirePrint, UIST 2014

slide-62
SLIDE 62

Physical Sketching

Mueller, WirePrint, UIST 2014

slide-63
SLIDE 63

WirePrint (2014)

Mueller, WirePrint, UIST 2014

slide-64
SLIDE 64

WirePrint (2014)

Mueller, WirePrint, UIST 2014

slide-65
SLIDE 65

Physical Sketching

Mueller, Fabrickation, CHI 2014

slide-66
SLIDE 66

faBrickation (2014)

Mueller, Fabrickation, CHI 2014

slide-67
SLIDE 67

faBrickation (2014)

Mueller, Fabrickation, CHI 2014

slide-68
SLIDE 68

Physical Sketching

Mueller, Constructable, CHI 2012

slide-69
SLIDE 69

Constructable (2012)

Mueller, Constructable, CHI 2012

slide-70
SLIDE 70

Constructable (2012)

Mueller, Constructable, CHI 2012

slide-71
SLIDE 71

The Design Diamond

start intentional! generate select danger! danger! danger! danger!

slide-72
SLIDE 72

Idea Oscillation

start intentional! generate select danger! danger! danger! danger!

slide-73
SLIDE 73

Critiquing Sketches is Important

Ideas are both good and bad

Both are useful in design By making clear what is a bad design, we can avoid actually implementing it Bad ideas help you justify your good ideas

Feedback can turn a good idea into a great idea Sketching generates too many ideas to implement

slide-74
SLIDE 74

Idea Oscillation

slide-75
SLIDE 75

Iteration Toward a Design

slide-76
SLIDE 76

Exploration of Alternatives

slide-77
SLIDE 77

Exploration of Alternatives

… a designer that pitched 3 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 Hamilton VP Design Symbol Technologies

slide-78
SLIDE 78

The Converging Path

slide-79
SLIDE 79

Is this a sketch? Why or why not?

slide-80
SLIDE 80

Is this a sketch? Why or why not?

slide-81
SLIDE 81

Is this a sketch? Why or why not?

slide-82
SLIDE 82

Is this a sketch? Why or why not?

slide-83
SLIDE 83

Is this a sketch? Why or why not?

slide-84
SLIDE 84

Is this a sketch? Why or why not?

slide-85
SLIDE 85

Is this a sketch? Why or why not?

slide-86
SLIDE 86

Is this a sketch? Why or why not?

slide-87
SLIDE 87

Some Evidence

Task: Create a web banner ad for Ambidextrous magazine.

Dow et al. TOCHI 2010.

slide-88
SLIDE 88

Feedback in Parallel or Serial

feedback feedback prototype prototype prototype prototype prototype final feedback feedback feedback feedback feedback Serial condition prototype prototype prototype prototype prototype final Parallel condition feedback feedback feedback Dow et al. TOCHI 2010.

slide-89
SLIDE 89

Procedure

parallel prototyping condition

serial prototyping condition

FINAL

Dow et al. TOCHI 2010.

slide-90
SLIDE 90

Parallel: more diverse, better, more clicks

5 10 15 20 25 30 35 40 45 50 Serial Parallel Expert quality rating (0-50) 0.5 1 1.5 2 2.5 3 3.5 4 Serial Parallel Similarity 50 100 150 200 250 300 350 400 450 500 Serial Parallel Clicks per million impressions

Dow et al. TOCHI 2010.

slide-91
SLIDE 91

Share one or share your best?

prototype prototype final prototype prototype final

feedback feedback feedback

prototype prototype prototype final

Share best condition Share multiple condition Make one condition Dow et al. TOCHI 2010.

slide-92
SLIDE 92

Share Multiple: better, more clicks

1 2 3 4 5 6 7 Share multiple Share best Make one Expert quality rating (0-7) 200 400 600 800 1000 Share multiple Share best Make one Clicks per million impressions

Dow et al. TOCHI 2010.

slide-93
SLIDE 93

Some Evidence

Greater divergence in designs

Prevents sticking with the first idea Allows mashing ideas together

Alternatives facilitate feedback

Enable comparison Can improve tone of critique

slide-94
SLIDE 94

Sketching and the Design Diamond

The design diamond is fundamental to understanding what you are doing here

Much of your education, including in CSE, has taught you to focus on having the right answer Here it matters what you do long before the end

Most ideas get thrown out, including yours

Better ideas are great criticism, and frequently would never have come about otherwise

slide-95
SLIDE 95

CSE 440: Introduction to HCI

User Interface Design, Prototyping, and Evaluation

James Fogarty Kailey Chan Dhruv Jain Nigini Oliveira Chris Seeds Jihoon Suh Lecture 02: Design Diamond Tuesday / Thursday 12:00 to 1:20