Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Designing User Experiences
« Getting the design right and the right design »
Rémi BARRAQUAND
http://www.slideshare.net/rem...
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 2
Important. These slides are not yet finished,
many references ar...
What is this lecture about?
"   It is not a lecture on design, but how designers (should) work…
"   It is about the design...
The Master
Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 4
The Master’s Book
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG
Bill Buxton5
The Master’s Lecture @Stanford
Bill Buxton
http://www.youtube.com/watch?v=xx1WveKV7aE
Rémi Barraquand, Cours IHM 2011, Ann...
Objectives of this course
"   Better understand, distinguish and use
"   Sketching, sketches, prototyping, prototypes, ske...
IHM vs. TPI
This Course
IHM
TPIRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 8
About the Organisation
"   2 classes of 3 hours each
"   5 TAs sessions of 3 hours each
"   Experience important aspects o...
About the Evaluation
"   Final Project
"   Sketchbook
"   Progressive description of visual ideas
"   Habitual use – cleve...
About You
"   Personal work…
"   Sketching anywhere, anytime… carry on
your sketchbook wherever you go.
"   See what is ou...
Design for the Wild
A shift from object-centered to experience-
centered design
Rémi Barraquand, Cours IHM 2011, Année spé...
Plan
"   What it is all about?
"   Design For The Wild
"   What is the object of design?
"   Designing for the wild
"   Th...
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...
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 15
What we sell and design, is the experience
that comes out of the box, engenders,
advocates, supports… – Bill Buxton
Rémi B...
Plan
"   What it is all about
"   Design For The Wild
"   What is the object of design?
"   Designing for the wild
"   The...
Design for the Wild
"   Kayaking along the coast of Greenland…
"   How do you find your way:
"   Paper map?
"   Digital ma...
Design for the Wild
" Tactile 3D wooden maps
"   You can use them wearing gloves
"   They have infinite battery life
"   C...
“It is not the physical entity or what is in
the box (the material product) that is the
true outcome of design. Rather, it...
From a Materialist to Experiential
Perspective of Design
| a shift from “object-centered to experience-centered” design
“W...
Design for the Wild
"   Requires us to think of technologies as “social entities”
which have the flexibility to respond in...
Plan
"   What it is all about
"   Design For The Wild
"   What is the object of design?
"   Designing for the wild
"   The...
The Role of Design
"   Design teams should be composed of people with different
backgrounds and histories because all can ...
The Role of Design
"   Explicit Design Process
"   Reproduction in film making
"   Development of a new automobile
"   Nee...
The Role of Design
"   Problem setting
"   What is the right thing to build?
"   Problem solving
"   How do we build this?...
Sketching & Prototyping
Sketching is a quintessential activity of Design
Rémi Barraquand, Cours IHM 2011, Année spéciale E...
Plan
"   Introduction
"   Design For The Wild
"   Sketching & Prototyping
"   Design Process
"   What Is a Sketch? What Is...
Design Right vs. Right Design
"   Getting the Design Right
"   Generate an idea
Ideaidea
idea
Rémi Barraquand, Cours IHM 2...
But is it the best idea?
Design Right vs. Right Design
"   Getting the Design Right
"   Generate an idea
"   Iterate and d...
But is it the best idea?
Design Right vs. Right Design
"   Getting the Design Right
"   Generate an idea
"   Iterate and d...
idea4idea1
idea2
idea4
idea5
idea7
Design Right vs. Right Design
"   Getting the Design Right
"   Generate an idea
"   Ite...
Design Right vs. Right Design
"   Getting the right design
"   Generate many ideas, e.g. inspired by brainstorming, discus...
The Ceramic Class
The ceramics teacher announced on opening day that he was dividing the
class into two groups. All those ...
Getting the Right Design
"   Think it, sketch it, read it, make it quick, timely,
disposable, plentiful… more than ever ho...
Keypads Touch
Different Design Ideas For Cellphones
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 36
Design Funnel
Reduction
decision-making
Elaboration
opportunity seeking
Design process
Rémi Barraquand, Cours IHM 2011, An...
Design Is Creativity
Design is choice. There are two
places where there is room for
creativity
1.  the creativity that you...
Another Design Funnel
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 39
Product View: The Status Quo
SalesEngineering
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 40
Product View: Integrating Design
SalesEngineeringDesign
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 41
Product View: No Silo
SalesEngineeringDesign
Design
Engineering
Management
& Marketing
Sales
Rémi Barraquand, Cours IHM 20...
Design Process: Wrap up
"   The design process is about
"   getting the right design, and then getting the design
right
" ...
Plan
"   Introduction
"   Design For The Wild
"   Sketching & Prototyping
"   Design Process
"   What Is a Sketch? What Is...
PART I: Design As Dreamcatcher
Figure 34: Details from Taccola’s Notebook (from first half of C15)
Several sketches of shi...
PART I: Design As Dreamcatcher
Figure 34: Details from Taccola’s Notebook (from first half of C15)
Several sketches of shi...
Sketching is not (crappy) drawing
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 47
Sketching is not (crappy) drawing
re 42: A Contrast in Skill: Two Drawings of a House
top drawing was done by a 6-year old...
The Attribute of Sketches
"   Quick
"   To make
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 49
The Attribute of Sketches
"   Quick
"   To make
"   Timely
"   Provided when needed
Rémi Barraquand, Cours IHM 2011, Année...
The Attribute of Sketches
"   Quick
"   To make
"   Timely
"   Provided when needed
"   Disposable
"   Investment in the c...
The Attribute of Sketches
"   Quick
"   To make
"   Timely
"   Provided when needed
"   Disposable
"   Investment in the c...
The Attribute of Sketches
"   Quick
"   Timely
"   Disposable
"   Plentiful
"   Clear Vocabulary
"   Rendering & style
ind...
108
This is a refinement of the
sketch seen in Figure 35.
Through the use of shading,
the sketch communicates
more about t...
PART I: Design As Dreamcatcher
Figure 39: Thumbnail Sketches, Scanned from Sketchbook
In what century were these made? Yes...
The Attribute of Sketches
"   Quick
"   Timely
"   Disposable
"   Plentiful
"   Clear Vocabulary
"   Constrained Resolutio...
The Attribute of Sketches
"   Quick / Timely
"   Inexpensive / Disposable
"   Plentiful
"   Clear vocabulary
You know that...
The Larger Family of Rendering
Sketch: This is mainly what we have been talking about. They are some-
times referred to as...
The Larger Family of Rendering
Presentation Drawing: These are drawings made for the customer, client,
or patron. As state...
The Anatomy of Sketching
"   To get the most out of a sketch, we need to leave big
enough holes
"   Ambiguity creates the ...
“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
Bu...
“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
Bu...
Figure 41: A Sketch of a Dialogue with a Sketch
The “conversation” between the sketch (right bubble) and the mind (left
bu...
Figure 41: A Sketch of a Dialogue with a Sketch
The “conversation” between the sketch (right bubble) and the mind (left
bu...
Sketching as a Tool of Thought
"   Conversation between the designer and its sketches.
"   Sketching is more related to an...
Sketching is a quintessential
activity of DesignRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG
Plan
"   Introduction
"   Design For The Wild
"   Sketching & Prototyping
"   Design Process
"   What Is a Sketch? What Is...
A Sketch is not a Prototype
"   Difference is
"   A contrast of purpose/intent (always)
"   A contrast in form (usually bu...
From Sketch to Prototype
"   Sketches
"   Early iteration stage of design
"   Prototypes
"   Capturing/detailing the actua...
Figure 52: The Sketch to Prototype Continuum
The difference between the two is as much a contrast of purpose, or intent,
a...
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 71
Early design
Late design
Brainstorm different ideas and
representations
Choose a representation
Rough out interface style
...
Sketch vs. Prototype: Wrap Up
"   Attributes of a sketch
"   Quick , timely, disposable, plentiful, clear vocabulary, cons...
Plan
"   Introduction
"   Design For The Wild
"   Sketching & Prototyping
"   Design Process
"   What Is a Sketch? What Is...
What is Sketching at
a Meta Level?
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 75
How do we recognize
a sketch if it is not in
its traditional form ?
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMA...
Anything that share
the property of a
sketch is a sketch…
We now have criteria that describe a sketch
We just have to appl...
Sketching in Interaction Design
"   Analogous to traditional sketching
"   Shares all the same key attributes
"   More fee...
Plan
"   Introduction
"   Design For The Wild
"   Sketching & Prototyping
"   Design Process
"   What Is a Sketch? What Is...
What do we
design today?
What do we have
to deal with?
How do (should)
we design today?
Rémi Barraquand, Cours IHM 2011, A...
Draw this phone
What kind of skill do you need to
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 81
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éci...
Draw this phone
Draw this phone’s
interface
Draw the experience of
using this phone
What kind of skill do you need to
Whic...
Draw this phone
Draw this phone’s
interface
Draw the experience of
using this phone
What kind of skill do you need to
Whic...
Plan
"   Introduction
"   Design For The Wild
"   Sketching & Prototyping
"   Design Process
"   What Is a Sketch? What Is...
The Sketchbook
"   Why a sketchbook?
"   supports the design funnel process
Rémi Barraquand, Cours IHM 2011, Année spécial...
The Sketchbook
"   Why a sketchbook?
"   Brainstorm many initial ideas – both good and bad
"   Explore & refine ideas both...
Best Practice
"   Use your sketchbook regularly
"   Sketch anywhere, anytime, frequently
"   Only works if you carry it wi...
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
A...
Sketchbook Instruments
"   The pencil
"   Cheap, flexible
"   Easy to carry
Rémi Barraquand, Cours IHM 2011, Année spécial...
Sketchbook Instruments
"   The pencil
"   The eraser and sharpener
"   Handy, but optional
Rémi Barraquand, Cours IHM 2011...
Sketchbook Instruments
"   The pencil
"   The eraser and sharpener
"   Tape, scissors and glue
"   For cutting and pasting...
Sketchbook Instruments
"   The pencil
"   The eraser and sharpener
"   Tape, scissors and glue
"   Small camera
"   For ta...
Sketchbook Instruments
"   The pencil
"   The eraser and sharpener
"   Tape, scissors and glue
"   Small camera
"   Other ...
Filling Your Sketchbook
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 95
You are not an Artist
Idea
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 96
You are not an Artist
Idea, variation
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 97
You are not an Artist
Idea, variation,
annotation
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 98
You are not an Artist
Idea, variation, annotation,
flow over time,
relationships
Rémi Barraquand, Cours IHM 2011, Année sp...
You are not an Artist
Idea, variation, annotation,
flow over time,
relationships
Rémi Barraquand, Cours IHM 2011, Année sp...
You are not an Artist
Idea, variation, annotation,
flow over time, relationships,
Scenario
Rémi Barraquand, Cours IHM 2011...
You are not an Artist
Idea, variation, annotation,
flow over time, relationships,
Scenario, Collecting
Rémi Barraquand, Co...
Sketch Examples – Idea variations
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 103
Sketch Examples – Design variations
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 104
Sketch Examples – Variations
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 105
Sketch Examples – Storyboard
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 106
Sketch Examples – Storyboard transitions
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 107
Sketch Examples – Scenario
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 108
Sketchbook: Wrap Up
"   Sketchbooks are for:
"   Brainstorming, exploring, refining varying, archiving, reflecting,
commun...
Upcoming SlideShare
Loading in …5
×

of

Sketching User Experience Slide 1 Sketching User Experience Slide 2 Sketching User Experience Slide 3 Sketching User Experience Slide 4 Sketching User Experience Slide 5 Sketching User Experience Slide 6 Sketching User Experience Slide 7 Sketching User Experience Slide 8 Sketching User Experience Slide 9 Sketching User Experience Slide 10 Sketching User Experience Slide 11 Sketching User Experience Slide 12 Sketching User Experience Slide 13 Sketching User Experience Slide 14 Sketching User Experience Slide 15 Sketching User Experience Slide 16 Sketching User Experience Slide 17 Sketching User Experience Slide 18 Sketching User Experience Slide 19 Sketching User Experience Slide 20 Sketching User Experience Slide 21 Sketching User Experience Slide 22 Sketching User Experience Slide 23 Sketching User Experience Slide 24 Sketching User Experience Slide 25 Sketching User Experience Slide 26 Sketching User Experience Slide 27 Sketching User Experience Slide 28 Sketching User Experience Slide 29 Sketching User Experience Slide 30 Sketching User Experience Slide 31 Sketching User Experience Slide 32 Sketching User Experience Slide 33 Sketching User Experience Slide 34 Sketching User Experience Slide 35 Sketching User Experience Slide 36 Sketching User Experience Slide 37 Sketching User Experience Slide 38 Sketching User Experience Slide 39 Sketching User Experience Slide 40 Sketching User Experience Slide 41 Sketching User Experience Slide 42 Sketching User Experience Slide 43 Sketching User Experience Slide 44 Sketching User Experience Slide 45 Sketching User Experience Slide 46 Sketching User Experience Slide 47 Sketching User Experience Slide 48 Sketching User Experience Slide 49 Sketching User Experience Slide 50 Sketching User Experience Slide 51 Sketching User Experience Slide 52 Sketching User Experience Slide 53 Sketching User Experience Slide 54 Sketching User Experience Slide 55 Sketching User Experience Slide 56 Sketching User Experience Slide 57 Sketching User Experience Slide 58 Sketching User Experience Slide 59 Sketching User Experience Slide 60 Sketching User Experience Slide 61 Sketching User Experience Slide 62 Sketching User Experience Slide 63 Sketching User Experience Slide 64 Sketching User Experience Slide 65 Sketching User Experience Slide 66 Sketching User Experience Slide 67 Sketching User Experience Slide 68 Sketching User Experience Slide 69 Sketching User Experience Slide 70 Sketching User Experience Slide 71 Sketching User Experience Slide 72 Sketching User Experience Slide 73 Sketching User Experience Slide 74 Sketching User Experience Slide 75 Sketching User Experience Slide 76 Sketching User Experience Slide 77 Sketching User Experience Slide 78 Sketching User Experience Slide 79 Sketching User Experience Slide 80 Sketching User Experience Slide 81 Sketching User Experience Slide 82 Sketching User Experience Slide 83 Sketching User Experience Slide 84 Sketching User Experience Slide 85 Sketching User Experience Slide 86 Sketching User Experience Slide 87 Sketching User Experience Slide 88 Sketching User Experience Slide 89 Sketching User Experience Slide 90 Sketching User Experience Slide 91 Sketching User Experience Slide 92 Sketching User Experience Slide 93 Sketching User Experience Slide 94 Sketching User Experience Slide 95 Sketching User Experience Slide 96 Sketching User Experience Slide 97 Sketching User Experience Slide 98 Sketching User Experience Slide 99 Sketching User Experience Slide 100 Sketching User Experience Slide 101 Sketching User Experience Slide 102 Sketching User Experience Slide 103 Sketching User Experience Slide 104 Sketching User Experience Slide 105 Sketching User Experience Slide 106 Sketching User Experience Slide 107 Sketching User Experience Slide 108 Sketching User Experience Slide 109
Upcoming SlideShare
Sketching Interfaces Workshop - Interactions12 (Dublin)
Next
Download to read offline and view in fullscreen.

34 Likes

Share

Download to read offline

Sketching User Experience

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Sketching User Experience

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. The Master Bill BuxtonRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 4
  5. 5. The Master’s Book Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG Bill Buxton5
  6. 6. 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
  7. 7. 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
  8. 8. IHM vs. TPI This Course IHM TPIRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 8
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 15
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. “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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. Sketching & Prototyping Sketching is a quintessential activity of Design Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 27
  28. 28. 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
  29. 29. Design Right vs. Right Design "   Getting the Design Right "   Generate an idea Ideaidea idea Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 29
  30. 30. But is it the best idea? Design Right vs. Right Design "   Getting the Design Right "   Generate an idea "   Iterate and develop it Ideaideaidea idea idea idea idea idea Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 30
  31. 31. 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 Ideaideaidea idea idea idea idea idea other idea? Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 31
  32. 32. idea4idea1 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 Ideaideaidea 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. Keypads Touch Different Design Ideas For Cellphones Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 36
  37. 37. Design Funnel Reduction decision-making Elaboration opportunity seeking Design process Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 37
  38. 38. 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
  39. 39. Another Design Funnel Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 39
  40. 40. Product View: The Status Quo SalesEngineering Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 40
  41. 41. Product View: Integrating Design SalesEngineeringDesign Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 41
  42. 42. Product View: No Silo SalesEngineeringDesign Design Engineering Management & Marketing Sales Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 42
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. Sketching is not (crappy) drawing Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 47
  48. 48. Sketching is not (crappy) drawing re 42: A Contrast in Skill: Two Drawings of a House 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 he 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 ding is just as important as skill in rendering. res: Keegan Reid & Michael Sagan Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 48
  49. 49. The Attribute of Sketches "   Quick "   To make Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 49
  50. 50. The Attribute of Sketches "   Quick "   To make "   Timely "   Provided when needed Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 50
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 108 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 Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 54
  55. 55. PART I: Design As Dreamcatcher 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 Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 55
  56. 56. 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
  57. 57. 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
  58. 58. 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. Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 58
  59. 59. The Larger Family of Rendering 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. 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. Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 59
  60. 60. 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
  61. 61. “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
  62. 62. “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
  63. 63. 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.” sketch representation mind (new) knowledge Create (seeing that) Read (seeing as) Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 63
  64. 64. 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.” sketch representation 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
  65. 65. 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
  66. 66. Sketching is a quintessential activity of DesignRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG
  67. 67. 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
  68. 68. 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
  69. 69. From Sketch to Prototype "   Sketches "   Early iteration stage of design "   Prototypes "   Capturing/detailing the actual design Figure 51: The Dynamics of the Design Funnel Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 69
  70. 70. 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
  71. 71. Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 71
  72. 72. 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 prototypesTask 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
  73. 73. 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
  74. 74. 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
  75. 75. What is Sketching at a Meta Level? Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 75
  76. 76. 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
  77. 77. 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
  78. 78. 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
  79. 79. 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
  80. 80. 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
  81. 81. Draw this phone What kind of skill do you need to Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 81
  82. 82. 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
  83. 83. 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
  84. 84. 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? S K E T C H I N G Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 84
  85. 85. 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
  86. 86. The Sketchbook "   Why a sketchbook? "   supports the design funnel process Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 86
  87. 87. 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
  88. 88. 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
  89. 89. 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
  90. 90. Sketchbook Instruments "   The pencil "   Cheap, flexible "   Easy to carry Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 90
  91. 91. Sketchbook Instruments "   The pencil "   The eraser and sharpener "   Handy, but optional Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 91
  92. 92. 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
  93. 93. 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
  94. 94. 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
  95. 95. Filling Your Sketchbook Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 95
  96. 96. You are not an Artist Idea Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 96
  97. 97. You are not an Artist Idea, variation Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 97
  98. 98. You are not an Artist Idea, variation, annotation Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 98
  99. 99. You are not an Artist Idea, variation, annotation, flow over time, relationships Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 99
  100. 100. You are not an Artist Idea, variation, annotation, flow over time, relationships Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 100
  101. 101. 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
  102. 102. 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
  103. 103. Sketch Examples – Idea variations Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 103
  104. 104. Sketch Examples – Design variations Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 104
  105. 105. Sketch Examples – Variations Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 105
  106. 106. Sketch Examples – Storyboard Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 106
  107. 107. Sketch Examples – Storyboard transitions Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 107
  108. 108. Sketch Examples – Scenario Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 108
  109. 109. 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
  • VemmyZhao

    Oct. 13, 2019
  • otobong

    Dec. 13, 2018
  • wiliwe

    Mar. 25, 2018
  • Shefalig

    Aug. 21, 2017
  • yunalin2

    May. 21, 2017
  • AlyonaMorozova4

    Mar. 15, 2017
  • davidkerruish

    Oct. 5, 2016
  • bolajav

    Aug. 30, 2016
  • ssssss55

    Aug. 8, 2016
  • RiccardoCosti

    Apr. 8, 2016
  • yuhaohsu1

    Dec. 5, 2015
  • RicardoPinheiro11

    Sep. 9, 2015
  • TatsuyaIwasaki

    Sep. 1, 2015
  • fishkid

    Jul. 19, 2015
  • notyetchosenfew

    Apr. 29, 2015
  • tmichaud1

    Apr. 2, 2015
  • IdaliaHdezGalvan

    Mar. 4, 2015
  • jezevcovo

    Mar. 4, 2015
  • pierredecafmeyer

    Dec. 23, 2014
  • aryanaabbasian

    Nov. 13, 2014

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

Views

Total views

14,301

On Slideshare

0

From embeds

0

Number of embeds

405

Actions

Downloads

491

Shares

0

Comments

0

Likes

34

×