Presiding Officer Training module 2024 lok sabha elections
Sketching User Experience
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. 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. 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
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. 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. IHM vs. TPI
This Course
IHM
TPIRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 8
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. 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. 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. 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. 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. 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
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. 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. 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. 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. “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. 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. 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. 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. 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. 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. 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
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. 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. 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. 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. 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. 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. 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. 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
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
40. Product View: The Status Quo
SalesEngineering
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 40
41. Product View: Integrating Design
SalesEngineeringDesign
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 41
42. Product View: No Silo
SalesEngineeringDesign
Design
Engineering
Management
& Marketing
Sales
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 42
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. 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. 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. 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. Sketching is not (crappy) drawing
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 47
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. The Attribute of Sketches
" Quick
" To make
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 49
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. “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. “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. 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. 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. 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. Sketching is a quintessential
activity of DesignRémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG
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. 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. 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. 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
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. 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. 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. What is Sketching at
a Meta Level?
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 75
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. 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. 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. 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. 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. Draw this phone
What kind of skill do you need to
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 81
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. 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. 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. 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. The Sketchbook
" Why a sketchbook?
" supports the design funnel process
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 86
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. 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. 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. Sketchbook Instruments
" The pencil
" Cheap, flexible
" Easy to carry
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 90
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. 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. 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. 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
96. You are not an Artist
Idea
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 96
97. You are not an Artist
Idea, variation
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 97
98. You are not an Artist
Idea, variation,
annotation
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 98
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. 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. 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. 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. Sketch Examples – Idea variations
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 103
104. Sketch Examples – Design variations
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 104
105. Sketch Examples – Variations
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 105
106. Sketch Examples – Storyboard
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 106
107. Sketch Examples – Storyboard transitions
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 107
108. Sketch Examples – Scenario
Rémi Barraquand, Cours IHM 2011, Année spéciale ENSIMAG 108
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
Editor's Notes
This is a nice picture of a bike, nice looking rendering design, etc.
This is what we sell, it is the experience
This is what we sell, it is the experience.It is not instead of the artifact, the artifact obviously are huge part of shaping experience, I cannot experience “m’éclatercomme un malade a dévalerunemontagne” without my bike. It is not about the bike right, it is completely dependent upon the bike. It is the adrenaline in that case, so there is obviously a tied relation ship between the artifact and the experience but there is much than that.
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
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
Getting the right design is about starting with a single design idea – usually the first idea you generate -…
… and iteratively developing it until it is as good as it can get. If you are really good, it will be the optimal design for that idea.But is it the best idea possible? Unlikely.
The problem is that the design can only be as good as that particular idea. If the idea is not a good one, the best solution will only be so.In Computer Science, this is known as local hill climbing, where the local maxima is potentially much less than the optimal or global maxima.The point is that if you look at many ideas rather than a single one, you may find a better overall solution.
This is called Getting the Right Design vs. Getting the Design Right , that is:Getting the right designgenerate many ideas, e.g., inspired by brainstorming, discussions, lateral thinking, client discussions, observations, etc.reflect on all your ideas; choose the ones that look promisingthen Getting the design rightiterate and develop your choicescontinually refine your choices as the better solutions become apparentof course, add in new ideas as they come up
This is called Getting the Right Design vs. Getting the Design Right , that is:Getting the right designgenerate many ideas, e.g., inspired by brainstorming, discussions, lateral thinking, client discussions, observations, etc.reflect on all your ideas; choose the ones that look promisingthen Getting the design rightiterate and develop your choicescontinually refine your choices as the better solutions become apparentof course, add in new ideas as they come up
As an example, consider the many design variations of the traditional keypad cell phone. The iPhone design was a radical shift, as it was based on a different idea for input: touch
Here’s another way to look at it. The design process is a symbiotic relationship between idea elaboration and reduction.Elaboration: generate solutions. These are the opportunitiesReduction: decide on the ones worth pursuing, and then elaborate on those solutions
Bill Buxton’s quote about design as choice stresses creativity in both generating meaningful ideas, and in choosing between these idea.
This is yet another variation on representing the design funnel, by S. Pugh. Of importance, is that the generation of ideas and the convergence of ideas alternate, with the process gradually converging to the final concept
Lets now consider the importance of design in software product lifecycle.The ‘status quo’ is that projects get a green light right at the start, and go directly to engineering where they are built. The next phase is when they ship – usually late, with bugs, over budget, and missing functionality.
By inserting an explicit design process prior to the green light, many designs can be considered before any commitment is made.The design funnel generates and develops ideas in parallel, where it filters, and eliminates designs until convergence. At that point one or more designs can be considered for green light.
This is perhaps a more accurate picture, as it shows the interplay between design, engineering, management, marketing and sales throughout the entire product cycle.
When I look design as I think about it, there is this archetypal activity, overreaching all design discipline, architectural design, industrial design, graphical design, where I cannot come up with an example where sketching is not involved. I do not say sketching is design, but when I see design I see sketching.These are the first known examples of using sketching as a tool of thought.
These are the first known examples of using sketching as a tool of thought.
So lets review the attributes of what makes a sketch work in the design funnel, particularly in generating ideas and choosing between them.
The idea of the vocabulary, resolution and concept state really talks about where you are in the design funnel. Initial sketches will be very open ended, with course resolution so that the basic concept is suggested. Later refinements and variations of a chosen sketch may have a more concrete vocabulary and more resolution, but will still show its speculative nature.
Critically, a sketch should never close off design. Rather, it should constantly suggest what could be, and leave room for growth and variation. Indeed, that is what separates a sketch from a prototype.
What do Bill mean by ambiguity? Next slides is for that
If you closed all in, and specify everything, you will not let enough room for the imagination to play.There is no ambiguity, you are telling me something, you are not asking me something.And the most fundamental thing about sketching, it is about asking it is not about telling.You have to leave big enough holes for your imagination to fit in.Timing comes later with the prototype, when you know what you want.
This is why the these things about resolution and rendering style are so critical.If somebody comes in, early in the project when you are doing the user interface for a mobile phone for instance, with nice looking screenshot of the interface, of any photoshop like rendering, you should give him 1 warning instead of a bonus if you are generous. I (Bill Buxton) will get a new designer. It is an insult, at this stage, you are not there to give answer, you are here to ask questions, not answer them. You don’t higher designer to answer question but to ask questions. The can find the answer later but not at the beginning.
Software developers often use sketches and prototypes as synonyms. They are not the same.
Sketches dominate the early part of the design funnel. They have to be cheap and plentiful.Prototypes appear at the latter part (or even during engineering). They are more refined and perhaps appropriate for initial user testing. There are also fewer of them, as they are more expensive.
How do I recognize non traditional sketching if it is not in the traditional form?
How do I recognize non traditional sketching if it is not in the traditional form?
How do I recognize non traditional sketching if it is not in the traditional form?
The response is simple, we have the criteria, I can apply the same matrix.And if it shares the same criteria, blablabla, even if it does not look nothing to call it a sketch, or micro sketches, it is a sketch !
All of us can draw this phone, and all of us can recognize which is which.We are drawing the product, right.
Here is the challenge, draw the interface of this phone.I’ve no problem drawing that phone, I can extend my skills to what I’ve seen people do.But even if you are good at drawing the phone, it will be much much harder to design the interface of this phone.This thing must be design, but how do we design the interface if we cannot draw it?
But this is the third question, draw the experience of using this phone.And now, even the best of view are as much handicap as those without “pencil skill” for the first two.The problem is that I use draw instead of sketching, because I wanted to explain this without having to introduce a lot of term, but understand that each of this have to be design.And therefore, sketching is the fundamental aspect of the process of doing the design for each of the three level of the design.
But this is the third question, draw the experience of using this phone.And now, even the best of view are as much handicap as those without “pencil skill” for the first two.The problem is that I use draw instead of sketching, because I wanted to explain this without having to introduce a lot of term, but understand that each of this have to be design.And therefore, sketching is the fundamental aspect of the process of doing the design for each of the three level of the design.
To set the scene, remember the design funnel.First, each stage is iterative, where one constantly generates and reduces ideas until resolutionSecond, the granularity of exploration and development is finer as these iterations progress.Fundamentally, the sketchbook is a tool that supports this design funnel process, by cheaply and quickly collecting a multitude of ideas and their variations, and recording them for later choice.
To set the scene, remember the design funnel.First, each stage is iterative, where one constantly generates and reduces ideas until resolutionSecond, the granularity of exploration and development is finer as these iterations progress.Fundamentally, the sketchbook is a tool that supports this design funnel process, by cheaply and quickly collecting a multitude of ideas and their variations, and recording them for later choice.
Sketchbooks are of little use if you don’t have it with you and you don’t use it. A sketchbook is really about getting into the idea of design, into the habit of sketching regularly and frequently.
Sketchbooks vary considerably. Some things you need to consider are:Durability – covers, page bindings (so they last)Page count (so you can fill them)Size (for carrying convenience)Whether you can fold them over (for ease of use in tight spaces)Physical and visual aesthetics (you should be proud to carry it; a badge of your professionWhile you can sketch on almost anything, the sketch doesn’t make a sketchbook.Avoid cheap scrap books and exercise books, and bits of paper.But of course, you can sketch on these and then paste it into your sketchbook.
The most basic instrument you need is a pencil, maybe an eraser. The key is to carry it with you always, maybe by inserting into the coil binding of your sketchobook.
The most basic instrument you need is a pencil, maybe an eraser. The key is to carry it with you always, maybe by inserting into the coil binding of your sketchobook.
Later, we will talk about how you can use a sketchbook to collect found objects, like magazine clippings. Scissors, glue, and tape will let you easily add these to your sketchbook.
Every now and then you will come across something that inspires an idea. Take a photo of it, print it, and paste it into your sketchbook.
Of course, there are myriads of media. Feel free to use them, but be careful. Remember, sketches should be cheap, fast, easy to do, and often of low fidelity. If media gets in the way of this, go back to a pencil.
So, now that you have a sketchbook and some instruments, what should be in your sketchbook?The following illustrate some samples. We will get into these and others in considerably more detail in later talks.
Sketching is about generating and collecting ideas. If you can draw, great. But an ugly, crude drawing can capture an idea as well as a beautiful one.
Lets look at a few examples of sketchbooks from various fields, where we see how they support idea generation, variation, and ultimately choice.In this example, we see various sketches, where the artist is exploring and varying posture and form. Note how incomplete some of them are, where they let the mind’s eye fill in possible details
Industrial designers make fairly similar uses of sketches, in this case in exploring various ideas and details of a form factor. Note that sketches such as these can include textual annotations, which themselves suggest possibilities
While this one shows how an idea flows over time, and the relationships between different parts of the idea
Sketches can also be storyboards, where key scenes are shown (much like a comic book)
Sketches can also depict how an idea (or product) is used via visual scenarios, or stories
Sketches can be used for collecting materials seen or found in other places; these can inspire you as well. Indeed, much creativity is about finding, varying, and remixing ideas that already exist
Sketches serve many purposes. This one collects four different versions of an idea
This example – in this case a photo – shows of 4 different remote control designs, where the sketches are made from paper taped on top of the lower part of a remote control.
The key idea is to have many ideas, and many variations. Paper and pen is cheap and quick. Explore.
The key idea is to have many ideas, and many variations. Paper and pen is cheap and quick. Explore.
Sketches can show storyboard transitions, where a different action can result in a different flow of activities
Sketches can also depict how an idea (or product) is used via visual scenarios, or stories