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]