CMSC434 Week 05 | Lecture 08 | Feb 23, 2016 Ideation ... · Human Computer Interaction Laboratory CMSC434 Introduction to Human-Computer Interaction Week 05 | Lecture 08 | Feb 23,

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

https://goo.gl/gt6h34


EMPATHIZE

DEFINE

IDEATE

PROTOTYPE

TEST


“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



EMPATHIZE

DEFINE

IDEATE

PROTOTYPE

TEST


“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



EMPATHIZE

DEFINE

IDEATE

PROTOTYPE

TEST


“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



EMPATHIZE

DEFINE

IDEATE

PROTOTYPE

TEST


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


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


Awesomeness

Idea1

Idea1_Iteration1

Idea1_IterationN


Awesomeness

Idea2

Idea2_Iteration1

Idea2_Iteration2

Idea2_Iteration3

Idea2_IterationN

Idea1

Idea1_Iteration1

Idea1_IterationN


Awesomeness

Idea2

Idea2_Iteration1

Idea2_Iteration2

Idea2_Iteration3

Idea2_IterationN

Idea1

Idea1_Iteration1

Idea1_IterationN


Awesomeness

This idea maxes out at good

This idea maxes out at awesome!


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


Elaboration and Reduction CyclesPaul Laseau (1980) described the design process as symbiotic relationship between idea elaboration and idea reduction


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

Source: http://www.slideshare.net/ugleah/how-to-be-a-ux-team-of-one

…a designer that pitched three ideas would

probably be fired.

Alistair Hamilton

VP Design, Symbol Technologies

Source: as quoted by James Landay HCI slides


probably be fired. I’d say 5 is an entry point for an

early formal review (distilled from 100’s). …

Alistair Hamilton




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



But how can we get ideas…

• Formative user research

• Brainstorming

• Mood boards

• Design inspiration / remixing

• Sketching

• Participatory design

• Working with others

Bayles and Orland, 2001, Art & Fear: Observations On the Perils (and Rewards) of Artmaking

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


Quality Group

Graded solely on the quality of work they produced


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



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





choosing ideas.



The Workbook


Sketching helps us think and generate ideas.




choosing ideas. Designers also use sketches to

discuss, exchange, and critique ideas with others.



The Workbook






choosing ideas. Designers also use sketches to

discuss, exchange, and critique ideas with others.



The Workbook


Sketching helps us communicate with others… and ourselves!


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


Conversation Between Sketch & Human


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




ones. By examining the externalizations, designers can

spot problems they may not have anticipated.

Suwa & Tverksey


Diagrams, 2002






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


Diagrams, 2002






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


Diagrams, 2002



Sometimes the best sketches are just rough line drawings!

“I directed Jaws, Close Encounters of the Third Kind, and E.T. Who am I?”

Steven Spielberg, On sketching, http://youtu.be/nBH89Y0Xj7c

“I do most of the original sketches myself... Stick figures and things... I can't draw.”

Steven Spielberg, On sketching, http://youtu.be/nBH89Y0Xj7c

“I outline the composition and, of course, the concept and thought... I draw arrows... Usually, I trace in black and white first.”


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)


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


Let’s analyze this sketch: what techniques are used?


Let’s analyze this sketch: what techniques are used?

Different pen thicknesses

Interesting 3D perspective

Minimalist design. No unnecessary details

Use of shadow


Is this a low-effort sketch or a high-effort sketch?




Use of shadow


Is this a low-effort sketch or a high-effort sketch?




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


Sketch Digital DevicesCamera, Phone, Cell Phone, Computer, Mouse

Sketch DocumentsPaper, Books, Photos, Piles

Sketch Physical ObjectsTables, Chair, Boxes, Light Bulb, Clock

Dark Palette

Light Palette

Light Palette

Light Palette