powerpoint presentation › class › spring2013 › cmsc434 › cmsc434_sp2013… · that’s why...

CMSC434

Design Process Continued!

Thursday, February 7, 2013

Instructor: Jon Froehlich

TA: Matthew Mauriello

Intro to Human-Computer Interaction

Hall of Fame Hall of Shame

Piazza reply vs. followup, submitted by John Connor

Piazza reply vs. followup, submitted by John Connor

Piazza reply vs. followup, submitted by John Connor

iTunes, submitted by Vincent Chang

iTunes, submitted by Vincent Chang

iTunes, submitted by Vincent Chang

iTunes, submitted by Vincent Chang

iTunes, submitted by Vincent Chang

Let’s go shopping!

RevisitingCartRedesign

How did we do?

ForTuesday

1 2

Reading Response:

The first 8 pages of Ron Baecker’s

Design and Evaluation

3

Reading Response:

Design Critique Project Pitches

Critique, Comment, & Choose

Design in the material world is the process by which

ideas, tastes, prejudices, basic scientific principles and

available resources are weighed and combined into

a well-defined plan for the eventual construction of

an object or system.

— McMasters

Boeing Corporation

The Art and Science of Design

Designing User Interfaces

A soufflé is eggs, butter, milk, and flour but

the difference between soaring and sinking

is in the execution.

Björn Hartmann Professor of Human-Computer Interaction

Computer Science, University of California, Berkeley

As with most things, following a vetted process

and practicing will improve performance

If we wish to improve our products,

We must improve our processes;

We must continually redesign

Not just our products

But also the way we design

That’s why we study the design process

To know what we do and how we do it

To understand it and improve it

To become better

Hugh Dubberly, How do you design?, Dubberly Design Office, San Francisco

Hugh Dubberly, How do you design?, Dubberly Design Office, San Francisco

Leland Nicolai, Viewpoint: An Industry view of Engineering Design Education, International Journal of Engineering Education, 1998

What does design require?

This is a conceptual design space for a given idea

Best design for idea

Worst design for idea

Concept from Scott Klemmer and Greenberg et al. Sketching User Experiences, 2012

This 3D Gaussian curve

represents all possible

designs for a particular idea

This is a conceptual design space for a given idea

Best design for idea

Worst design for idea

Design #1

Design #2

Design #3 Optimal

design

Concept from Scott Klemmer and Greenberg et al. Sketching User Experiences, 2012

This is a conceptual design space for a given idea

Best design for idea

Worst design for idea

Design #1

Design #2

Design #3 Optimal

design

Concept from Scott Klemmer and Greenberg et al. Sketching User Experiences, 2012

Nicely demonstrates that we should mockup

and tryout multiple designs for a given idea

This is a conceptual design space for a given idea

Best design for idea

Worst design for idea

Design #1

Design #2

Design #3 Optimal

design

Concept from Scott Klemmer and Greenberg et al. Sketching User Experiences, 2012

But what if that idea was not such a

good idea in the first place?

Windows CE 3.0 Pocket PC 2000

Windows CE 2.0

1998

Pocket PC 2000

April 2000

Pocket PC 2002

Oct 2001

Win Mobile 2003

June 2003

Win Mobile 5

May 2005

Win Mobile 6

Feb 2007

Windows CE 3.0 Pocket PC 2000

Windows CE 2.0

1998

Pocket PC 2000

April 2000

Pocket PC 2002

Oct 2001

Win Mobile 2003

June 2003

Win Mobile 5

May 2005

Win Mobile 6

Feb 2007

Apple iPhone

June 2007

Ballmer laughs at iPhone, http://youtu.be/eywi0h_Y5_U

This is a conceptual design space for a given idea

Best design for idea

Worst design for idea

Design #1

Design #2

Design #3 Optimal

design

Concept from Scott Klemmer and Greenberg et al. Sketching User Experiences, 2012

Consider many ideas to overcome this problem

Concept from Scott Klemmer and Greenberg et al. Sketching User Experiences, 2012

Design Through a Computer Science Metaphor

HillClimbing

Problem: algorithm can get stuck at a local maxima

SimulatedAnnealing

Simulated Annealing can escape local minima with chaotic jumps.

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

A Design Process

Hugh Dubberly, How do you design?, Dubberly Design Office, San Francisco

A problem A solution

A Design Process

Hugh Dubberly, How do you design?, Dubberly Design Office, San Francisco

A problem

A solution

Tim Brennan Apple (Creative Services Department)

“Somebody calls up with a project; we do

some stuff; and the money follows”

Process Model Benefits Has potential for playfullness/fun

Is similar to a random walk

Has a feeling of iteration…

A Design Process

Original source: Don Koberg and Jim Bagnall; My Source: Björn Hartmann, CS160 course at UC Berkeley

A Design Process

Original source: Don Koberg and Jim Bagnall; My Source: Björn Hartmann, CS160 course at UC Berkeley

Source: Björn Hartmann, CS160 course at UC Berkeley

Source: Björn Hartmann, CS160 course at UC Berkeley

Source: Björn Hartmann, CS160 course at UC Berkeley

Source: Björn Hartmann, CS160 course at UC Berkeley

Source: Björn Hartmann, CS160 course at UC Berkeley

Source: Björn Hartmann, CS160 course at UC Berkeley

Source: Björn Hartmann, CS160 course at UC Berkeley

Source: Björn Hartmann, CS160 course at UC Berkeley

A Design Process

Original source: Don Koberg and Jim Bagnall; My Source: Björn Hartmann, CS160 course at UC Berkeley

The process of ideation.

As we already saw: consider many ideas!

Concept from Scott Klemmer and Greenberg et al. Sketching User Experiences, 2012

IDEOBrainstormingRules 1. Be visual

2. Defer judgment

3. Encourage wild ideas

4. Build on the ideas of others

5. Go for quantity

6. One conversation at a time

7. Stay focused on the topic

Tom Kelley and Jonathan Littman, The Art of Innovation: Lessons in Creativity from IDEO, 2001

Elaboration

Design Process

Original source: Paul Laseau,Graphic Thinking for Architects & Designers, 1980; Ref from Greenberg et al., Sketching User Experiences, 2012

Elaboration and Reduction

Design Process

Original source: Paul Laseau,Graphic Thinking for Architects & Designers, 1980; Ref from Greenberg et al., Sketching User Experiences, 2012

Design Process

Elaboration and Reduction

Design Process Design Process

Original source: Paul Laseau,Graphic Thinking for Architects & Designers, 1980; Ref from Greenberg et al., Sketching User Experiences, 2012

Design Process

Elaboration and Reduction

Original source: Paul Laseau,Graphic Thinking for Architects & Designers, 1980; Ref from Greenberg et al., Sketching User Experiences, 2012

Design Funnel

Original source: Stuart Pugh,Total Design: Integrated Methods for Successful Products Engineering, 1990; Image from Greenberg et al., 2012

The alternating trend between idea generation and convergence with a

process of reduction towards the final concept

Design Funnel

UXBooth, Concerning Fidelity in Design, http://www.uxbooth.com/articles/concerning-fidelity-and-design/

Design Funnel

UXBooth, Concerning Fidelity in Design, http://www.uxbooth.com/articles/concerning-fidelity-and-design/

Lo-fidelity prototyping and testing

AnExperiment Design an egg drop vessel

[Dow, 2011]

Shut your laptops. Do not use your

phones or any other electronic devices.

[Maier, 1930]

Connect all 9 dots with 4 lines

[Maier, 1930]

Connect all 9 dots with 4 lines

Switch 1 Switch 2 Switch 3

Only one of the three switches

turns on the light upstairs.

You can only make one trip

upstairs.

You can only flip one switch at a

time.

You cannot see the second floor

light (or any ambient light) from

the first floor.

It’s a windowless building.

You have a flashlight.

There are two staircases.

How can you determine which of the three switches

turns on the second floor light?

incandescent

lightbulb

Scenario & Rules

CandleProblem

[Duncker, 1945]

Who has seen this

problem before?

How to fix a lit candle on a wall in a way so the candle wax won't drip onto the table

below. To do so, one may only use a book of matches and a box of thumbtacks

Now, we’re going to break-up into groups.

CandleProblem

[Duncker, 1945]

CandleProblem

[Duncker, 1945]

FunctionalFixedness

[Duncker, 1945]

Functional fixedness is a cognitive bias that limits a person to using

an object only in the way it is traditionally used

A “mental block against using

an object in a new way that is

required to solve a problem”

FunctionalFixedness

[Adamson, 1952]

Group 1:

Preutilization Boxes presented as a

container with

materials inside them

Group 2:

No Preutilization Boxes were presented

empty

“Try stuff and ask forgiveness rather

than asking permission is the way

that people come up with new

ideas.”

DavidKelley Founder and Chairman of IDEO

BeDaring

“Being playful is of huge importance

in being innovative. If you go into a

culture, and there’s a bunch of stiffs

going around, they are not likely to

invent anything.”

DavidKelley Founder and Chairman of IDEO

Playfulness

NeedFinding Guiding the creative design process through contextual inquiry

Space/Thought

Stanford d.school

“The point is that we’re not actually

experts in any given area. We’re

experts in the process of how you

design stuff. We don’t care if you

give us a toothbrush, a tractor, a

space shuttle, or a chair.”

DavidKelley Founder and Chairman of IDEO

DesignProcess

“In a very innovative culture, you

can’t have a hierarchy of here’s the

boss and the next person down, and

the next person down, and the next

person down”

DavidKelley Founder and Chairman of IDEO

OrganizationalHierarchy

IDEOBrainstormingRules 1. Be visual

2. Defer judgment

3. Encourage wild ideas

4. Build on the ideas of others

5. Go for quantity

6. One conversation at a time

7. Stay focused on the topic

[Kelley, The Art of Innovation]

IDEOBrainstormingKillers 1. The boss keeps to speak first

2. Everybody gets a turn

3. Experts only please

4. Do it “off-site”

5. No silly stuff

6. Writing down everything

[Kelley, The Art of Innovation]