cmsc434 week 05 | lecture 08 | feb 23, 2016 ideation ... · human computer interaction laboratory...
TRANSCRIPT
HumanComputerInteractionLaboratory
CMSC434Introduction to Human-Computer Interaction
Week 05 | Lecture 08 | Feb 23, 2016
Ideation, Sketching, Storyboards
Jon Froehlich
@jonfroehlich
COMPUTER SCIENCEUNIVERSITY OF MARYLAND
Assignments
• IA05 Observation Grades Released
–Email Matt with questions/comments
• TA02 Due Thursday, Feb 25th
–One team member upload to Canvas
• IA06 Sketching Assignment Posted
–Due Tues, March 1 @ 11:59PM
• R04 Sketching Reading Posting
–Goes along with IA06
Use the Calendar feature in Canvas to see all upcoming assignments and deadlines
IA06 Sketching Assignment
Part One
Create three different sketches
for the 4 image prompts
Two part assignment.
IA06 Sketching Assignment
Part One
Create three different sketches
for the 4 image prompts
Two part assignment.
Part Two
Create two storyboard designs
for the 3 brief movie clips
Stanford d.school Design ProcessWhere are we?
EMPATHIZE
DEFINE
IDEATE
PROTOTYPE
TEST
Stanford d.School, An Introduction to Design Thinking: Process Guide, https://goo.gl/gt6h34
Stanford d.school Design ProcessWhere are we?
EMPATHIZE
DEFINE
IDEATE
PROTOTYPE
TEST
Stanford d.School, An Introduction to Design Thinking: Process Guide, https://goo.gl/gt6h34
“To create meaningful innovations, you need to know your users and care about their lives.”
How?Via formative inquiry techniques like rapid ethnography, interviews, design probes, surveys
Stanford d.school Design ProcessWhere are we?
EMPATHIZE
DEFINE
IDEATE
PROTOTYPE
TEST
Stanford d.School, An Introduction to Design Thinking: Process Guide, https://goo.gl/gt6h34
“Framing the right problem is the only way to create the right solution.”
How?Synthesize empathy work to develop an understanding of users, needs, and key insights
Stanford d.school Design ProcessWhere are we?
EMPATHIZE
DEFINE
IDEATE
PROTOTYPE
TEST
Stanford d.School, An Introduction to Design Thinking: Process Guide, https://goo.gl/gt6h34
“It’s not about coming up with the ‘right’ idea, it’s about generating the broadest range of possibilities.”
How?Use brainstorming techniques, design remixing, mood boards, sketching. Defer judgment: separate the generation of ideas from the evaluation of ideas
Stanford d.school Design ProcessWhere are we?
EMPATHIZE
DEFINE
IDEATE
PROTOTYPE
TEST
Stanford d.School, An Introduction to Design Thinking: Process Guide, https://goo.gl/gt6h34
TA02 Formative Research TA03 Sketch
Getting the design right and the right design.
Bill Buxton
Sketching User Experiences
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Getting the design right and the right design.
Bill Buxton
Sketching User Experiences
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Step 1: Generate as many ideas as possible for a problem space
Step 1: For the top N ideas, evolve, improve, develop. Push those ideas to their potential.
Awesomeness
Idea1
Idea1_Iteration1
Idea1_IterationN
Adapted from: Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 221.
Idea1
Idea1_Iteration1
Idea1_IterationN
Adapted from: Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 221.
Awesomeness
Idea1
Idea1_Iteration1
Idea1_IterationN
Adapted from: Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 221.
Awesomeness
Idea2
Idea2_Iteration1
Idea2_Iteration2
Idea2_Iteration3
Idea2_IterationN
Idea1
Idea1_Iteration1
Idea1_IterationN
Adapted from: Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 221.
Awesomeness
Idea2
Idea2_Iteration1
Idea2_Iteration2
Idea2_Iteration3
Idea2_IterationN
Idea1
Idea1_Iteration1
Idea1_IterationN
Adapted from: Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 221.
Awesomeness
This idea maxes out at good
This idea maxes out at awesome!
Adapted from: Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 221.
Awesomeness
Idea1: Cell phones must have a physical keyboard & screen
Idea2: Cell phones need not have a physical keyboard!
The best way to have a good
idea is to have lots of ideas
Linus Pauling
Professor of Chemistry
Caltech, UC San Diego, Stanford
Only person awarded two unshared Nobel Prizes
Ideation Process as a Tree
Getting the Design RightTree depth corresponds to iteration of ideas
Getting the Right DesignTree width corresponds to
breadth of ideas
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Elaboration and Reduction CyclesPaul Laseau (1980) described the design process as symbiotic relationship between idea elaboration and idea reduction
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
ReductionDecide on ideas worth
pursuing, iterate & refine
Elaboration Generate ideas. These are
opportunities
Source: http://www.slideshare.net/ugleah/how-to-be-a-ux-team-of-one
An Anecdote from Leah Buley, IxD designer
…a designer that pitched three ideas would
probably be fired.
Alistair Hamilton
VP Design, Symbol Technologies
Source: as quoted by James Landay HCI slides
…a designer that pitched three ideas would
probably be fired. I’d say 5 is an entry point for an
early formal review (distilled from 100’s). …
Alistair Hamilton
VP Design, Symbol Technologies
Source: as quoted by James Landay HCI slides
…a designer that pitched three ideas would
probably be fired. I’d say 5 is an entry point for an
early formal review (distilled from 100’s). … if you are
pushing one, you will be found out, and also fired. … it
is about open mindedness, humility, discovery, and
learning. If you aren’t authentically dedicated to
that approach, you are just doing it wrong
Alistair Hamilton
VP Design, Symbol Technologies
Source: as quoted by James Landay HCI slides
But how can we get ideas…
• Formative user research
• Brainstorming
• Mood boards
• Design inspiration / remixing
• Sketching
• Participatory design
• Working with others
Quantity Group
Graded solely on the quantity of work they produced
Quality Group
Graded solely on the quality of work they produced
Source: Bayles and Orland, Art & Fear: Observations On the Perils (and Rewards) of Artmaking, 2001
Design ExperimentA ceramics teacher announced that he was dividing the class into two groups: those on
the left side of the studio would be graded solely on quantity of work; those on the right
solely on its quality.
Quantity Group
Graded solely on the quantity of work they produced
Quality Group
Graded solely on the quality of work they produced
Source: Bayles and Orland, Art & Fear: Observations On the Perils (and Rewards) of Artmaking, 2001
Design ExperimentA ceramics teacher announced that he was dividing the class into two groups: those on
the left side of the studio would be graded solely on quantity of work; those on the right
solely on its quality.
Which group produced higher quality work?
Quantity Group
Graded solely on the quantity of work they produced
Source: Bayles and Orland, Art & Fear: Observations On the Perils (and Rewards) of Artmaking, 2001
Design Experiment
“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 and Orland, 2001, p.29
Sketching is fundamental to ideation and design.
Traditional disciplines such as industrial design,
graphic design and architecture make extensive use of
sketches to develop, explore, communicate and
evaluate ideas.
Tohidi, Buxton, Baecker, Sellen
NordiCHI 2006
Source: Tohidi, Buxton, Baecker, & Sellen, NordiCHI’06
Sketching has long been a best practice for
designers. Through sketches, designers follow a
generative process of developing, honing, and
choosing ideas.
Greenberg, Carpendale, Marquardt, Buxton
Sketching User Experiences:
The Workbook
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Sketching has long been a best practice for
designers. Through sketches, designers follow a
generative process of developing, honing, and
choosing ideas.
Greenberg, Carpendale, Marquardt, Buxton
Sketching User Experiences:
The Workbook
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Sketching helps us think and generate ideas.
Sketching has long been a best practice for
designers. Through sketches, designers follow a
generative process of developing, honing, and
choosing ideas. Designers also use sketches to
discuss, exchange, and critique ideas with others.
Greenberg, Carpendale, Marquardt, Buxton
Sketching User Experiences:
The Workbook
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Sketching helps us think and generate ideas.
Sketching has long been a best practice for
designers. Through sketches, designers follow a
generative process of developing, honing, and
choosing ideas. Designers also use sketches to
discuss, exchange, and critique ideas with others.
Greenberg, Carpendale, Marquardt, Buxton
Sketching User Experiences:
The Workbook
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Sketching helps us communicate with others… and ourselves!
Sketching helps us think and generate ideas.
Why Sketch?
Think more openly & creatively about your ideas
Create abundant ideas w/out fixating on quality
Invent and explore concepts visually
Iterate quickly
Choose ideas worth pursuing
Archive ideas for later reflection
The act of sketching will help you:
Based on: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Sketches allow for a dialog between the sketch and
the viewer (even if the viewer is the sketcher himself)
that facilitates better understanding of the
problem and in turn generation of new ideas
Tohidi, Buxton, Baecker, Sellen
NordiCHI 2006
Source: Tohidi, Buxton, Baecker, & Sellen, NordiCHI’06
Conversation Between Sketch & Human
Source: Tohidi, Buxton, Baecker, & Sellen, NordiCHI’06
The sketch is created from current knowledge
(left arrow)
“Reading” or interpreting the sketch (right arrow generates new knowledge
The iterative nature of this process allows for an increasing improvement of the sketch/design even if the person making the sketch is the same person that is “reading” it.
Designers do not draw sketches to externally represent ideas
that are already consolidated in their minds. Rather, they
draw sketches to try out ideas, usually vague and uncertain
ones.
Suwa & Tverksey
External Representations Contribute to the Dynamic Construction of Ideas
Diagrams, 2002
Source: Suwa & Tverskey, Diagrams 2002
Designers do not draw sketches to externally represent ideas
that are already consolidated in their minds. Rather, they
draw sketches to try out ideas, usually vague and uncertain
ones. By examining the externalizations, designers can
spot problems they may not have anticipated.
Suwa & Tverksey
External Representations Contribute to the Dynamic Construction of Ideas
Diagrams, 2002
Source: Suwa & Tverskey, Diagrams 2002
Designers do not draw sketches to externally represent ideas
that are already consolidated in their minds. Rather, they
draw sketches to try out ideas, usually vague and uncertain
ones. By examining the externalizations, designers can
spot problems they may not have anticipated. More than
that, they can see new features and relations among
elements that they have drawn, ones not intended in the
original sketch.
Suwa & Tverksey
External Representations Contribute to the Dynamic Construction of Ideas
Diagrams, 2002
Source: Suwa & Tverskey, Diagrams 2002
Designers do not draw sketches to externally represent ideas
that are already consolidated in their minds. Rather, they
draw sketches to try out ideas, usually vague and uncertain
ones. By examining the externalizations, designers can
spot problems they may not have anticipated. More than
that, they can see new features and relations among
elements that they have drawn, ones not intended in the
original sketch. These unintended discoveries promote
new ideas and refine current ones. This process is iterative as
design progresses.
Suwa & Tverksey
External Representations Contribute to the Dynamic Construction of Ideas
Diagrams, 2002
Source: Suwa & Tverskey, Diagrams 2002
Based on: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Sometimes the best sketches are just rough line drawings!
“I outline the composition and, of course, the concept and thought... I draw arrows... Usually, I trace in black and white first.”
Based on: Greenberg et al., Sketching User Experiences: The Workbook, 2012
A fundamental tool that helps designers express, develop, and communicate ideas
Sketching Experience
Draw my phone
Draw my phone’s interface
Draw the experience of using my phone
Which is the true object of design?
Based on slide from James Landay. Original concept: Bill Buxton
The SketchbookMost of you have purchased a nice sketchbook
Size: 8.5”x11” or 9”x12” are typical
and helpful for collaging; however,
optimize for what works for you—
you want something that you can
carry around at all times
Binding: Coiled or sewn. Coiled is
nice because you can completely
fold over pages; however, cheaper
bindings may lead to ripped out
pages. A sewn book is more
durable but have to deal with
crease
Paper style: grid, plain, or
textured. I prefer plain or grid but
again, get what works for you.
Your sketchbook should not have
horizontal lines (like a notebook)
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Drawing ToolsSome designers prefer pencils, I prefer pens. They glide easier on page. No need to erase in rapid ideation!
Mechanical Pencils0.5mm, 0.7mm, 1mm point size
Colored PencilsGet a colored pencil set
(Downside is you have to carry them; most sketches are in b&w.
Use color for highlights or annotations)
Dark PensI like gel pens,
they glide easily
Multi-color PensI use these the most
(even though the lines are thin & they don’t flow as well
as gel)
Sketchbook Best Practices
With you at all times
Sketch frequently
No bad ideas or sketches (don’t erase)
Always annotate (for your future self & others)
Explore broad space (getting right design)
Refine and iterate (getting design right)
Record ideas you see elsewhere
Collect existing materials (printouts, magazines)
Based on slide from James Landay. Original concept: Bill Buxton
Sketchbook ExamplesTwo examples from Bill Buxton’s sketchbook. What do you see?
Source: Buxton, Sketching User Experiences, 2007
Sketchbook Example: Clipping PageAnother example from Bill Buxton showing a collage of inspirations—a type of mood board
Source: Buxton, Sketching User Experiences, 2007
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Let’s analyze this sketch: what techniques are used?
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Let’s analyze this sketch: what techniques are used?
Different pen thicknesses
Interesting 3D perspective
Minimalist design. No unnecessary details
Use of shadow
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Is this a low-effort sketch or a high-effort sketch?
Different pen thicknesses
Interesting 3D perspective
Minimalist design. No unnecessary details
Use of shadow
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Is this a low-effort sketch or a high-effort sketch?
Different pen thicknesses
Interesting 3D perspective
Minimalist design. No unnecessary details
Use of shadow
It’s a high-effort sketch. The kind that you might prepare for a client or for publication after much iteration on initial ideas.
That doesn’t necessarily mean it took the designer a long time to make, just longer than the rapid brainstorming sketches that we’ll initially talk about today.
The technique used to create this sketch is called ‘photo tracing’ (or rototoscoping). The designer took a picture of a scene that s/he wanted to sketch and traced it using paper or a digital tool.
Sketching VocabularyMost sketches are simply composed of lines & basic shapes
Rapidly fill your page with different line thicknesses and
shapes such as rectangles, circles, and triangles.
Play around with depth, with shadow,
with filled-in vs. empty shapes
Sketching VocabularyMost sketches are simply composed of lines & basic shapes
Rapidly fill your page with different line thicknesses and
shapes such as rectangles, circles, and triangles
Sketching ObjectsCombine lines & basic shapes into objects. In-class activity: Rapidly sketch as many
examples of each prompt as possible. Go for breadth!
Sketch ToolsPencil, Pen, Magnifying Glass, Scissors
Source: Greenberg et al., Sketching User Experiences: The Workbook, 2012
Sketch Digital DevicesCamera, Phone, Cell Phone, Computer, Mouse
Sketch DocumentsPaper, Books, Photos, Piles
Sketch Physical ObjectsTables, Chair, Boxes, Light Bulb, Clock