Sketching User Experience

109
Designing User Experiences « Getting the design right and the right design » Rémi BARRAQUAND http://www.slideshare.net/remibarraquand Sketching Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG

description

Slides presenting the idea of Bill Buxton on designing for the wild and experience design.

Transcript of Sketching User Experience

Page 1: Sketching User Experience

Designing User Experiences « Getting the design right and the right design »

Rémi BARRAQUAND

http://www.slideshare.net/remibarraquand

Sketching

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG

Page 2: Sketching User Experience

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 2

Important. These slides are not yet finished, many references are missing. Main References: •  Bill Buxton – Books, Blog, Lectures •  Saul Greenberg – Lectures CPSC 581

Page 3: Sketching User Experience

What is this lecture about? "   It is not a lecture on design, but how designers (should) work…

"   It is about the design process itself… the design process seen as the process of sketching.

Sketching User Experience is, nominally, a book about product design. But it would be just as accurate to say that it's a book about software development, or, more generally, about the often broken process of bringing new products to market, with examples ranging from the iPod to an orange juicer.

“When I see design I see sketching” − Bill Buxton

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 3

Page 4: Sketching User Experience

The Master

Bill Buxton Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 4

Page 5: Sketching User Experience

The Master’s Book

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG

Bill Buxton 5

Page 6: Sketching User Experience

The Master’s Lecture @Stanford

Bill Buxton http://www.youtube.com/watch?v=xx1WveKV7aE

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 6

Page 7: Sketching User Experience

Objectives of this course "   Better understand, distinguish and use

"   Sketching, sketches, prototyping, prototypes, sketching vs. prototyping, sketches vs. prototypes

"   Incorporate the “best practices” of experience design into your everyday skills "   Critical analysis of interface designs

"   Creativity via applied exercises

"   Idea brainstorming via sketching "   Sketches and prototypes development

"   Implementation of a final product (TPI)

"   Portfolio summaries

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 7

Page 8: Sketching User Experience

IHM vs. TPI

This Course

IHM

TPI Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 8

Page 9: Sketching User Experience

About the Organisation "   2 classes of 3 hours each

"   5 TAs sessions of 3 hours each

"   Experience important aspects of the design process "   Generative

"   Reductive

"   Create a real product from scratch and experience each step "   Problem statement, state of the art, analysis of the users needs, etc.

"   Explore: sketching, sketching user experience

"   Challenge: brainstorming, presentation

"   Converge to a prototype and a final product (TPI)

Are you experienced ? – Jimi Hendrix If not, get experienced, or get a new job – Bill Buxton

Design Funnel

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 9

Page 10: Sketching User Experience

About the Evaluation "   Final Project

"   Sketchbook "   Progressive description of visual ideas

"   Habitual use – clever quantity!

"   Portfolio "   Summary of accomplishment (synopsis of your work and progression)

"   Organization, methods, archives of supporting documents

"   Prototype(s) & Final Application "   IHM, Task Model, Ergonomic Criteria, Conception, etc.

"   Participation "   Class discussions and critics

"   Presentation of your own work

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 10

Page 11: Sketching User Experience

About You "   Personal work…

"   Sketching anywhere, anytime… carry on your sketchbook wherever you go.

"   See what is out there, collect, generate, develop… your media choice affects what you create…

"   Challenge the design of others constantly, understand the work of others, present yours…

"   Think about your Portfolio, collect your works, be proud…

“It take as much creativity to understand a good idea than to have it in the first place” “We are very good at judging each others work and skills” “Your better ideas are not kept in the process, be open to critics” “If you are not failing it means you are not trying hard enough”

– Bill Buxton

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 11

Page 12: Sketching User Experience

Design for the Wild A shift from object-centered to experience-centered design

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 12

Page 13: Sketching User Experience

Plan "   What it is all about?

"   Design For The Wild "   What is the object of design?

"   Designing for the wild

"   The role of design

"   Sketching & Prototyping

"   Wrap up

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 13

Page 14: Sketching User Experience

What do we sell? Is it the object?

What do we

design? Is it the object?

What is the true object of design?

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 14

Page 15: Sketching User Experience

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 15

Page 16: Sketching User Experience

What we sell and design, is the experience that comes out of the box, engenders, advocates, supports… – Bill Buxton

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 16

Page 17: Sketching User Experience

Plan "   What it is all about

"   Design For The Wild "   What is the object of design?

"   Designing for the wild

"   The role of design

"   Sketching & Prototyping

"   Wrap up

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 17

Page 18: Sketching User Experience

Design for the Wild "   Kayaking along the coast of Greenland…

"   How do you find your way: "   Paper map? "   Digital map on PC? "   On an internet PDA? "   Other ideas?

Where am I?

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 18

Page 19: Sketching User Experience

Design for the Wild " Tactile 3D wooden maps

"   You can use them wearing gloves

"   They have infinite battery life

"   Can be read during night

"   They float in the water

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 19

Page 20: Sketching User Experience

“It is not the physical entity or what is in the box (the material product) that is the true outcome of design. Rather, it is the behavioral, experiential, and emotional responses that come about as a result of its existence and its use in the real world” – Bill Buxton

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 20

Page 21: Sketching User Experience

From a Materialist to Experiential Perspective of Design | a shift from “object-centered to experience-centered” design

“We are deluding ourselves if we think that the products that we design are the “things” that we sell, rather than individual, social and cultural experience that they engender, and the value and impact and they have.” – Bill Buxton

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG

Page 22: Sketching User Experience

Design for the Wild "   Requires us to think of technologies as “social entities”

which have the flexibility to respond in multiple ways, depending on how people appropriate them.

"   To design a technology, we must make our best efforts to understand the larger social and physical context within which it is intended to function.

"   We must be able to experience our designs in the wild (i.e. the use-context in all its richness) during the early stages of the process.

“The only way to engineer the future tomorrow is to have lived in it yesterday” – Bill Buxton

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 22

Page 23: Sketching User Experience

Plan "   What it is all about

"   Design For The Wild "   What is the object of design?

"   Designing for the wild

"   The role of design

"   Sketching & Prototyping

"   Wrap up

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 23

Page 24: Sketching User Experience

The Role of Design

"   Design teams should be composed of people with different backgrounds and histories because all can bring valuable, complimentary skills to bear in the creation of new products. It is a social thing.

"   Design must also include design of the engineering process, marketing plan and business plan.

"   Design is a professional discipline and requires methods not only skills "   Every one is a designer – Don Norman

"   Every one is not a designer – Bill Buxton

“We need holistic approach to experience-based design” – Bill Buxton

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 24

Page 25: Sketching User Experience

The Role of Design "   Explicit Design Process

"   Reproduction in film making

"   Development of a new automobile

"   Need to insert a design process at the front end of product development "   The cost and time lost due to this additional stage will be

significantly less than the cost and time lost due to the poor planning and overruns that will result if it is not included.

"   Dangerous Assumptions "   We know what we want at the start of a project

"   We know enough to start building it

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 25

Page 26: Sketching User Experience

The Role of Design

"   Problem setting "   What is the right thing to build?

"   Problem solving "   How do we build this?

“You must get the right design as well as the design right” – Bill Buxton

“The role of design is to get the right design. The role of usability engineering is to get the design right” – Bill Buxton

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 26

Page 27: Sketching User Experience

Sketching & Prototyping Sketching is a quintessential activity of Design

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 27

Page 28: Sketching User Experience

Plan "   Introduction

"   Design For The Wild

"   Sketching & Prototyping "   Design Process "   What Is a Sketch? What Is Sketching? "   Sketches vs. Prototypes "   About Meta-Sketching "   Experience Design "   Sketching the Interaction "   Sketch’s Social Life "   The Sketchbook

"   Wrap up

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 28

Page 29: Sketching User Experience

Design Right vs. Right Design "   Getting the Design Right

"   Generate an idea Idea idea

idea

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 29

Page 30: Sketching User Experience

But is it the best idea?

Design Right vs. Right Design "   Getting the Design Right

"   Generate an idea

"   Iterate and develop it Idea idea idea idea idea

idea

idea

idea

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 30

Page 31: Sketching User Experience

But is it the best idea?

Design Right vs. Right Design "   Getting the Design Right

"   Generate an idea

"   Iterate and develop it

⇒  The problem "   Other better solutions may be available in different ideas

"   Local vs. global maxima (local hill climbing)

"   Often results from fixating on a single idea

Idea idea idea idea idea

idea

idea

idea other idea?

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 31

Page 32: Sketching User Experience

idea4 idea1

idea2

idea4 idea5

idea7

Design Right vs. Right Design "   Getting the Design Right

"   Generate an idea

"   Iterate and develop it

"   Getting the Right Design "   Generate many idea and variation (Generation)

"   Reflect and choose (Reduction)

"   Then iterate and develop your choice

Idea idea idea idea idea

idea

idea

idea1

idea2

idea3

idea4

idea5

idea6

idea7

idea5 idea5

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 32

Page 33: Sketching User Experience

Design Right vs. Right Design "   Getting the right design

"   Generate many ideas, e.g. inspired by brainstorming, discussions, lateral thinking, client discussions, observations, etc.

"   Reflect on all your ideas. "   Choose the ones that look promising

"   then Getting the design right "   Iterate and develop your choices "   Continually refine your choices as the better solutions become

apparent "   Of course, add in new ideas as they come up

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 33

Page 34: Sketching User Experience

The Ceramic Class The ceramics teacher announced on opening day that he was dividing the class into two groups. All those on the left side of the studio, he said, would be graded solely on the quantity of work they produced, all those on the right solely on its quality. His procedure was simple: on the final day of class he would bring in his bathroom scales and weigh the work of the “quantity” group: fifty pounds of pots rated an “A”, forty pounds a “B”, and so on. Those being graded on “quality,” however, needed to produce only one pot—albeit a perfect one—to get an “A.”

Well, came grading time and a curious fact emerged: the works of highest quality were all produced by the group being graded for quantity. It seems that while the “quantity” group was busily churning out 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 & Orland 2001; p. 29)

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 34

Page 35: Sketching User Experience

Getting the Right Design "   Think it, sketch it, read it, make it quick, timely,

disposable, plentiful… more than ever hour after our work is never over – Daft Sketch

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 35

Page 36: Sketching User Experience

Keypads Touch

Different Design Ideas For Cellphones

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 36

Page 37: Sketching User Experience

Design Funnel

Reduction decision-making

Elaboration opportunity seeking

Design process

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 37

Page 38: Sketching User Experience

Design Is Creativity

Design is choice. There are two places where there is room for creativity

1.  the creativity that you bring to enumerating meaningfully distinct options from which to choose

2.  the creativity that you bring to defining the criteria, or heuristics, according to which you make your choices.

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 38

Page 39: Sketching User Experience

Another Design Funnel

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 39

Page 40: Sketching User Experience

Product View: The Status Quo

Sales Engineering

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 40

Page 41: Sketching User Experience

Product View: Integrating Design

Sales Engineering Design

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 41

Page 42: Sketching User Experience

Product View: No Silo

Sales Engineering Design

Design

Engineering

Management & Marketing

Sales

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 42

Page 43: Sketching User Experience

Design Process: Wrap up "   The design process is about

"   getting the right design, and then getting the design right

"   The design funnel is about iteratively "   generating and elaborating designs "   choosing and reducing between designs

"   Design in product development is about "   using the design funnel to develop ideas for green/red

light appraisal

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 43

Page 44: Sketching User Experience

Plan "   Introduction

"   Design For The Wild

"   Sketching & Prototyping "   Design Process "   What Is a Sketch? What Is Sketching? "   Sketches vs. Prototypes "   About Meta-Sketching "   Experience Design "   Sketching the Interaction "   Sketch’s Social Life "   The Sketchbook

"   Wrap up

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 44

Page 45: Sketching User Experience

PART I: Design As Dreamcatcher

Figure 34: Details from Taccola’s Notebook (from first half of C15)

Several sketches of ships are shown exhibiting different types of protective

shields, and one with a “grappler.” These are the first known examples of

using sketching as a tool of thought.

Source: McGee (2004); Detail of Munich, Bayerische Staatsbibliothek.

Codex Latinus Monacensis 197 Part 2, fol. 52’

Details from Taccola’s Notebook (from first half of C15) Several sketches of ships are shown exhibiting different types of protective shields, and one with a “grappler.” (Source: McGee (2004); Detail of Munich, Bayerische Staatsbibliothek. Latinus Monacensis 197 Part 2, fol. 52’)

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 45

Page 46: Sketching User Experience

PART I: Design As Dreamcatcher

Figure 34: Details from Taccola’s Notebook (from first half of C15)

Several sketches of ships are shown exhibiting different types of protective

shields, and one with a “grappler.” These are the first known examples of

using sketching as a tool of thought.

Source: McGee (2004); Detail of Munich, Bayerische Staatsbibliothek.

Codex Latinus Monacensis 197 Part 2, fol. 52’

Details from Taccola’s Notebook (from first half of C15) Several sketches of ships are shown exhibiting different types of protective shields, and one with a “grappler.” (Source: McGee (2004); Detail of Munich, Bayerische Staatsbibliothek. Latinus Monacensis 197 Part 2, fol. 52’)

Sketching is a tool of thought

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 46

Page 47: Sketching User Experience

Sketching is not (crappy) drawing

Figure 42: A Contrast in Skill: Two Drawings of a House

The top drawing was done by a 6-year old child and the one below by a professional designer. But I didn’t have to tell you that. Drawing skill is obvious

in the resulting artifact. However, skill in reading sketches is far less obvious. The artifact, such as it is, is in the mind and is not tangible. Yet, skill in

reading is just as important as skill in rendering.

Figures: Keegan Reid & Michael Sagan

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 47

Page 48: Sketching User Experience

Sketching is not (crappy) drawing

Figure 42: A Contrast in Skill: Two Drawings of a House

The top drawing was done by a 6-year old child and the one below by a professional designer. But I didn’t have to tell you that. Drawing skill is obvious

in the resulting artifact. However, skill in reading sketches is far less obvious. The artifact, such as it is, is in the mind and is not tangible. Yet, skill in

reading is just as important as skill in rendering.

Figures: Keegan Reid & Michael Sagan

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 48

Page 49: Sketching User Experience

The Attribute of Sketches "   Quick

"   To make

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 49

Page 50: Sketching User Experience

The Attribute of Sketches "   Quick

"   To make

"   Timely "   Provided when needed

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 50

Page 51: Sketching User Experience

The Attribute of Sketches "   Quick

"   To make

"   Timely "   Provided when needed

"   Disposable "   Investment in the concept,

not the execution

"   Inexpensive

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 51

Page 52: Sketching User Experience

The Attribute of Sketches "   Quick

"   To make

"   Timely "   Provided when needed

"   Disposable "   Investment in the concept,

not the execution "   Inexpensive

"   Plentiful "   They make sense in a

a collection or series of ideas.

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 52

Page 53: Sketching User Experience

The Attribute of Sketches "   Quick

"   Timely

"   Disposable

"   Plentiful

"   Clear Vocabulary "   Rendering & style

indicates it’s a sketch, not an implementation

"   Constrained Resolution "   No higher than required

to capture its concept

"   Consistency with State "   Refinement of rendering

matches the state of concept development

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 53

Page 54: Sketching User Experience

108

Figure 35: Early Three-

Quarter View Sketch of Time

Trial Bike

Although done on a computer,

this is a freehand sketch. No-

tice that the representation is

tentative. What tells you this?

Contrast this to the represen-

tation in Figure 37.

Credit: Michael Sagan, Trek

Bicycles

Figure 36: Shaded Three-

Quarter View Sketch of Time

Trial Bike

This is a refinement of the

sketch seen in Figure 35.

Through the use of shading,

the sketch communicates

more about the 3D form of

the concept. Notice that de-

spite this refinement lines

still extend through the “hard

points.”

Credit: Michael Sagan, Trek

Bicycles

108

Figure 35: Early Three-

Quarter View Sketch of Time

Trial Bike

Although done on a computer,

this is a freehand sketch. No-

tice that the representation is

tentative. What tells you this?

Contrast this to the represen-

tation in Figure 37.

Credit: Michael Sagan, Trek

Bicycles

Figure 36: Shaded Three-

Quarter View Sketch of Time

Trial Bike

This is a refinement of the

sketch seen in Figure 35.

Through the use of shading,

the sketch communicates

more about the 3D form of

the concept. Notice that de-

spite this refinement lines

still extend through the “hard

points.”

Credit: Michael Sagan, Trek

Bicycles

Figure 38: Accurate 3D

Shaded Model Superim-

posed Over Three-Quarter

View Sketch

This image is perhaps the

most interesting. It is a com-

posite of a three-quarter view

of the 3D model seen in Fig-

ure 37 superimposed over

the sketch seen in Figure

35. Given what we have seen

thus far, ask yourself why the

designer would do this.

Credit: Michael Sagan, Trek

Bicycles

Figure 37: Side View of 3D

Shaded Model of Time Trial

Bike

This is a side view of the same

bike seen in the previous two

figures. Contrast this repre-

sentation to that in Figure 36.

Both are shaded to highlight

the form. Ignoring the addi-

tion of the graphics for the

moment, is it obvious, is it

clear which of the two is more

refined, closer to “final,” and

which took the most effort to

create, and which will take

the most effort to redo in the

event of a change or sugges-

tion. This image is clearly not

a sketch.

Credit: Michael Sagan, Trek

Bicycles

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 54

Page 55: Sketching User Experience

PART I: Design As Dreamcatcher

110

Figure 39: Thumbnail Sketches, Scanned from Sketchbook

In what century were these made? Yesterday? During the renaissance?

You can’t tell from the form, only from the content.

Credit: Michael Sagan, Trek Bicycles

PART I: Design As Dreamcatcher

Figure 34: Details from Taccola’s Notebook (from first half of C15)

Several sketches of ships are shown exhibiting different types of protective

shields, and one with a “grappler.” These are the first known examples of

using sketching as a tool of thought.

Source: McGee (2004); Detail of Munich, Bayerische Staatsbibliothek.

Codex Latinus Monacensis 197 Part 2, fol. 52’

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 55

Page 56: Sketching User Experience

The Attribute of Sketches "   Quick

"   Timely

"   Disposable

"   Plentiful

"   Clear Vocabulary

"   Constrained Resolution

"   Consistency with State

"   Suggest & explore rather than confirm "   Value lies in suggesting and provoking what could be

i.e. they are the catalyst to conversation and interaction

"   A catalyst "   Evokes conversations and discussion

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 56

Page 57: Sketching User Experience

The Attribute of Sketches "   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 of the rendering does not suggest a degree of refinement of the concept exceeds its actual state

"   Ambiguous

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 57

Page 58: Sketching User Experience

The Larger Family of Rendering Sketch: This is mainly what we have been talking about. They are some-

times referred to as Thinking Drawings, and are described as Design

Drawings by Lawson (1997). They are generally made by designers mainly

for designers, and are central to the process of ideation.

Memory Drawing: These are one of the oldest styles of drawing. These are

renderings made to record or capture ideas. Think of them as extensions

of one’s memory—like a hand-rendered photograph recording a thought

or something seen.

Presentation Drawing: These are drawings made for the customer, client,

or patron. As stated by Powell (2002, p.6), these people “usually lacked

the skill needed to read these drawings [sketches] and therefore under-

stand what the product would be like before it was actually made.” Hence,

just as the value of a sketch is in its ambiguity, and the “holes” that it con-

tains, the value of a presentation drawing is in its ability to communicate

and represent what is being presented to the untrained eye.

122

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 58

Page 59: Sketching User Experience

The Larger Family of Rendering

Sketch: This is mainly what we have been talking about. They are some-

times referred to as Thinking Drawings, and are described as Design

Drawings by Lawson (1997). They are generally made by designers mainly

for designers, and are central to the process of ideation.

Memory Drawing: These are one of the oldest styles of drawing. These are

renderings made to record or capture ideas. Think of them as extensions

of one’s memory—like a hand-rendered photograph recording a thought

or something seen.

Presentation Drawing: These are drawings made for the customer, client,

or patron. As stated by Powell (2002, p.6), these people “usually lacked

the skill needed to read these drawings [sketches] and therefore under-

stand what the product would be like before it was actually made.” Hence,

just as the value of a sketch is in its ambiguity, and the “holes” that it con-

tains, the value of a presentation drawing is in its ability to communicate

and represent what is being presented to the untrained eye.

122

Technical Drawing: Technical drawings are a class of drawing that are

primarily intended for those who actually are going to build what is drawn.

They are typically accurate and are at the drafting and blueprint end of

the scale, rather than that of sketching.

Description Drawing: This class of drawing is intended to explain some-

thing, such as a how something works, or is constructed. It would include

things like cut-away or exploded-view drawings, or it could be broken up

into frames, like a cartoon, as with the emergency cards that one finds

in the seat-back pocket on airplanes.

Figure 44: Examples of Rendering Styles

Credit: Symbol Technologies

123

Technical Drawing: Technical drawings are a class of drawing that are

primarily intended for those who actually are going to build what is drawn.

They are typically accurate and are at the drafting and blueprint end of

the scale, rather than that of sketching.

Description Drawing: This class of drawing is intended to explain some-

thing, such as a how something works, or is constructed. It would include

things like cut-away or exploded-view drawings, or it could be broken up

into frames, like a cartoon, as with the emergency cards that one finds

in the seat-back pocket on airplanes.

Figure 44: Examples of Rendering Styles

Credit: Symbol Technologies

123

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 59

Page 60: Sketching User Experience

The Anatomy of Sketching "   To get the most out of a sketch, we need to leave big

enough holes

"   Ambiguity creates the holes

"   It enables a sketch to be interpreted in different ways, even by the person who created it.

“The fundamental thing about sketching is that it is about asking not telling” – Bill Buxton

“A Sketch is more about feel than look” – Bill Buxton Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 60

Page 61: Sketching User Experience

“If you want to get the most out of a sketch, you need to leave big enough holes for the imagination to fit in.” – Bill Buxton Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 61

Page 62: Sketching User Experience

“If you want to get the most out of a sketch, you need to leave big enough holes for the imagination to fit in.” – Bill Buxton There has to be enough room for the imagination.

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 62

Page 63: Sketching User Experience

Figure 41: A Sketch of a Dialogue with a Sketch

The “conversation” between the sketch (right bubble) and the mind (left

bubble). A sketch is created from current knowledge (top arrow). Reading,

or interpreting the resulting representation (bottom arrow), creates new

knowledge. The creation results from what Goldschmidt calls “seeing

that” reasoning, and the extraction of new knowledge results from what

she calls “seeing as.”

sketchrepresentation

mind(new) knowledge

Create(seeing that)

Read(seeing as)

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 63

Page 64: Sketching User Experience

Figure 41: A Sketch of a Dialogue with a Sketch

The “conversation” between the sketch (right bubble) and the mind (left

bubble). A sketch is created from current knowledge (top arrow). Reading,

or interpreting the resulting representation (bottom arrow), creates new

knowledge. The creation results from what Goldschmidt calls “seeing

that” reasoning, and the extraction of new knowledge results from what

she calls “seeing as.”

sketchrepresentation

mind(new) knowledge

Create(seeing that)

Read(seeing as)

“Sketching is about the activity not the result” – Bill Buxton

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 64

Page 65: Sketching User Experience

Sketching as a Tool of Thought "   Conversation between the designer and its sketches.

"   Sketching is more related to an activity or process rather than to a physical object (the sketch). The sketch is the vehicle, not the destination. Ambiguity help us find our way.

"   Conversation with a sketch involves skills in both reading and writing (distinguishing designers from non-designers).

“I take as much creativity to understand (read) a good idea (sketch) than to have (draw) it at the first place” – Bill Buxton

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 65

Page 66: Sketching User Experience

Sketching is a quintessential activity of Design

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG

Page 67: Sketching User Experience

Plan "   Introduction

"   Design For The Wild

"   Sketching & Prototyping "   Design Process "   What Is a Sketch? What Is Sketching? "   Sketches vs. Prototypes "   About Meta-Sketching "   Experience Design "   Sketching the Interaction "   Sketch’s Social Life "   The Sketchbook

"   Wrap up

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 67

Page 68: Sketching User Experience

A Sketch is not a Prototype "   Difference is

"   A contrast of purpose/intent (always)

"   A contrast in form (usually but not always)

Sketch ≠ Low Fidelity Prototype

"   Rather it is "   A continuum

Sketch Prototype Low investment More opportunities to explore Fail early… learn

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 68

Page 69: Sketching User Experience

From Sketch to Prototype "   Sketches

"   Early iteration stage of design

"   Prototypes "   Capturing/detailing the actual design

Figure 51: The Dynamics of the Design Funnel

The design funnel begins with ideation, and ends with usability testing. The

former is largely dominated by sketching, which enables ideas to be explored

quickly and cheaply. More refined (and expensive) prototypes provide the ba-

sis for the testing at the later stages of design. Where testing is a key concern,

the most dominant artifacts are more refined (and expensive) prototypes.

The transition from one to the other is represented by the transition from

orange to yellow in the figure. As we progress, our overall investment in the

process grows. This is indicated by the rising arrow and the y-axis label on

the left. The y-axis label on the right side of the figure emphasizes that as

our investment increases, so should the weight of the criteria that we use

to evaluate our design decisions. In other words, you don’t manage ideation

the same way, or with the same rigor, as usability. Finally, the circular arrows

are a reminder that we include users throughout the iterative process, not

just during usability testing.

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 69

Page 70: Sketching User Experience

Figure 52: The Sketch to Prototype Continuum

The difference between the two is as much a contrast of purpose, or intent,

as it is a contrast in form. The arrows emphasize that this is a continuum,

not an either/or proposition.

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 70

Page 71: Sketching User Experience

15

29

Sketches and prototypes

From Laseau, 1980

30

Sketches and prototypes

From Laseau, 1980

Elaboration Reduction

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 71

Page 72: Sketching User Experience

Early design

Late design

Brainstorm different ideas and representations

Choose a representation Rough out interface style

Multitude of sketches

Sketch variations and details

Sketch or low fidelity prototypes Task centered walkthrough and redesign

Fine tune interface, screen design Heuristic evaluation and redesign

Usability testing and redesign

Low to medium fidelity prototypes

Limited field testing

Alpha/Beta tests

High fidelity prototypes

Working systems

From Sketch to Prototype

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 72

Page 73: Sketching User Experience

Sketch vs. Prototype: Wrap Up "   Attributes of a sketch

"   Quick , timely, disposable, plentiful, clear vocabulary, constrained resolution, consistent with design state

"   A sketch is not a prototype "   Difference is a contrast of purpose/intent (always), and form (mostly)

"   Sketch properties "   Evocative, suggest, explore, question, propose, provoke, t

"   Prototype properties "   Didactic, describe, refine, answer, test, resolve, specific, depiction

"   Don’t forget it is a continuum !

Sketch Prototype Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 73

Page 74: Sketching User Experience

Plan "   Introduction

"   Design For The Wild

"   Sketching & Prototyping "   Design Process "   What Is a Sketch? What Is Sketching? "   Sketches vs. Prototypes "   About Meta-Sketching "   Experience Design "   Sketching the Interaction "   Sketch’s Social Life "   The Sketchbook

"   Wrap up

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 74

Page 75: Sketching User Experience

What is Sketching at a Meta Level?

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 75

Page 76: Sketching User Experience

How do we recognize a sketch if it is not in its traditional form ?

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 76

Page 77: Sketching User Experience

Anything that share the property of a

sketch is a sketch… We now have criteria that describe a sketch

We just have to apply these metrics: is it fast, inexpensive, timely, etc.

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 77

Page 78: Sketching User Experience

Sketching in Interaction Design "   Analogous to traditional sketching

"   Shares all the same key attributes

"   More feel than look

"   Must accommodate time and dynamics

"   Phrasing

“When we have this description, of what a sketch is, its attributes, we can then start inventing new things that share those attributes, and therefore improve our current technics by inventing new and better tools that help us sketch.” – Bill Buxton

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 78

Page 79: Sketching User Experience

Plan "   Introduction

"   Design For The Wild

"   Sketching & Prototyping "   Design Process "   What Is a Sketch? What Is Sketching? "   Sketches vs. Prototypes "   About Meta-Sketching "   Experience Design "   Sketching the Interaction "   Sketch’s Social Life "   The Sketchbook

"   Wrap up

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 79

Page 80: Sketching User Experience

What do we design today? What do we have to deal with? How do (should) we design today?

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 80

Page 81: Sketching User Experience

Draw this phone

What kind of skill do you need to

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 81

Page 82: Sketching User Experience

Draw this phone Draw this phone’s interface

What kind of skill do you need to

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 82

Page 83: Sketching User Experience

Draw this phone Draw this phone’s interface Draw the experience of using this phone

What kind of skill do you need to

Which is the true object of design?

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 83

Page 84: Sketching User Experience

Draw this phone Draw this phone’s interface Draw the experience of using this phone

What kind of skill do you need to

Which is the true object of design?

SKETCHING

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 84

Page 85: Sketching User Experience

Plan "   Introduction

"   Design For The Wild

"   Sketching & Prototyping "   Design Process "   What Is a Sketch? What Is Sketching? "   Sketches vs. Prototypes "   About Meta-Sketching "   Experience Design "   Sketching the Interaction "   Sketch’s Social Life "   The Sketchbook

"   Wrap up

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 85

Page 86: Sketching User Experience

The Sketchbook "   Why a sketchbook?

"   supports the design funnel process

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 86

Page 87: Sketching User Experience

The Sketchbook "   Why a sketchbook?

"   Brainstorm many initial ideas – both good and bad "   Explore & refine ideas both in the large and in the small "   Develop variations, alternatives, details "   Archive your ideas for later review "   Reflect on changing thought processes over time "   Communicate ideas to others by showing "   Choose ones worth developing

"   Record good ideas you see elsewhere "   Clip inspiring images from sources like magazines "   Shoot, print and collect inspiring photos

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 87

Page 88: Sketching User Experience

Best Practice "   Use your sketchbook regularly

"   Sketch anywhere, anytime, frequently

"   Only works if you carry it with you

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 88

Page 89: Sketching User Experience

Choose Your Sketchbook

To consider Durability X X P

page count P X P size P P P

fold over X X P aesthetics X X P Archival X X P

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 89

Page 90: Sketching User Experience

Sketchbook Instruments "   The pencil

"   Cheap, flexible

"   Easy to carry

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 90

Page 91: Sketching User Experience

Sketchbook Instruments "   The pencil

"   The eraser and sharpener "   Handy, but optional

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 91

Page 92: Sketching User Experience

Sketchbook Instruments "   The pencil

"   The eraser and sharpener

"   Tape, scissors and glue "   For cutting and pasting in found objects

"   Don’t have to carry it with you

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 92

Page 93: Sketching User Experience

Sketchbook Instruments "   The pencil

"   The eraser and sharpener

"   Tape, scissors and glue

"   Small camera "   For taking photos of interesting ideas

"   Select, print and tape photos into your sketchbook

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 93

Page 94: Sketching User Experience

Sketchbook Instruments "   The pencil

"   The eraser and sharpener

"   Tape, scissors and glue

"   Small camera

"   Other media & tools

Remember, sketches should be cheap, fast, easy to do, and often of low fidelity. Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 94

Page 95: Sketching User Experience

Filling Your Sketchbook

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 95

Page 96: Sketching User Experience

You are not an Artist Idea

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 96

Page 97: Sketching User Experience

You are not an Artist Idea, variation

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 97

Page 98: Sketching User Experience

You are not an Artist Idea, variation,

annotation

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 98

Page 99: Sketching User Experience

You are not an Artist Idea, variation, annotation,

flow over time, relationships

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 99

Page 100: Sketching User Experience

You are not an Artist Idea, variation, annotation,

flow over time, relationships

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 100

Page 101: Sketching User Experience

You are not an Artist Idea, variation, annotation, flow over time, relationships,

Scenario

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 101

Page 102: Sketching User Experience

You are not an Artist Idea, variation, annotation, flow over time, relationships,

Scenario, Collecting

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 102

Page 103: Sketching User Experience

Sketch Examples – Idea variations

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 103

Page 104: Sketching User Experience

Sketch Examples – Design variations

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 104

Page 105: Sketching User Experience

Sketch Examples – Variations

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 105

Page 106: Sketching User Experience

Sketch Examples – Storyboard

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 106

Page 107: Sketching User Experience

Sketch Examples – Storyboard transitions

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 107

Page 108: Sketching User Experience

Sketch Examples – Scenario

Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 108

Page 109: Sketching User Experience

Sketchbook: Wrap Up "   Sketchbooks are for:

"   Brainstorming, exploring, refining varying, archiving, reflecting, communicating and choosing ideas

"   Recording good ideas you see elsewhere

"   Sketchbooks are:

"   Convenient (pages, size, fold over), durable archive, aesthetic

"   Sketchbook instruments are:

"   Pencil, optional eraser, sharpener, glue, tape, scissors, camera, and other media

"   Sketchbooks can be filled with:

"   Your sketches (many different kinds) and found objects

"   Sketchbooks are used regularly

"   Sketch anywhere, anytime Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 109