Human Computer Interaction Laboratory

@jonfroehlich Assistant Professor Computer Science

CMSC434 Introduction to Human-Computer Interaction

Week 01 | Lecture 02 | Sept 05, 2013

Design and Design Process I

Hall of Fame Hall of Shame

Google Auto-Translate Submitted by: Jon Froehlich

© Scott Adams from Bill Moggridge’s Designing Interactions, p. 646

Today

1. Some policy and procedures

2. About you

3. What is Design?

4. Design process

5. Ideation

CMSC434 Syllabus

When was lecture on Tuesday, September 3rd?

100%

91%

77%

58%

35%

26% 26% 23% 19% 19%

12% 9% 9% 5% 5% 5% 2%

0%

50%

100%

ProgrammingLanguage What programming languages do you have experience with and feel comfortable using?

100%

91%

77%

58%

35%

26% 26% 23% 19% 19%

12% 9% 9% 5% 5% 5% 2%

0%

50%

100%

ProgrammingLanguage What programming languages do you have experience with and feel comfortable using?

47%

19%

9%

5% 5% 5% 2% 2% 2% 2% 2% 2% 2%

0% 0% 0% 0%

10%

20%

30%

40%

50%

60%

Favorite Programming Language What is your favorite programming language?

23%

19%

16%

14%

9% 9%

7%

2%

0%

10%

20%

30%

I just want a job Other Work as aprogrammer

somewhere (e.g.,government, local

industry, etc.)

Work for amammoth techcompany (e.g.,

Microsoft, Google,Facebook)

Work for a smallsized techcompany

Work for amedium sizedtech company

Start my owncompany

Work for anexisting start-up

Post Graduation Plans What do you want to do with your degree after you graduate?

Response Synthesis

• Want better advising staff

• Better lectures

• Courses on subjects like web programming,

mobile programming, more modern tech like

Node.js

• More sections of popular classes

• A class to help prepare for getting a job

(coding interviews, etc.)

Important to recognize, UMD CS

is just the beginning. Technology

changes fast. You’ve got to get

used to self-learning.

The Mouse Image Source: Wikimedia

Touchscreens Image Source: Popsci

design? what is

Design is the creation of a plan or convention

for the construction of an object or a system.

http://en.wikipedia.org/wiki/Design

If you are expecting me to give you a clear

definition of design as I use the term, I am

afraid that I am going to disappoint you.

Smarter people have tried and failed. This is a

slippery slope on which I do not want to get

trapped.

Bill Buxton Principal Researcher at Microsoft Research

One of the more influential figures in IxD Quote from: Buxton, Sketching User Experiences, 2007

If you ask a designer for a definition of

design, you are often answered with a smirk,

a joke, or a change of subject, as design is

notoriously difficult to define.

Bill Moggridge Co-Founder of IDEO

Designed first laptop, the GRiD Compass Quote from Designing Interactions p. 647

Design is making things better for people.

Richard Seymour Designer

http://www.seymourpowell.com/

Design is the conscious and intuitive effort to

impose meaningful order.

Victor Papanek Designer/Educator

As quoted in Cooper, et al., About Face: The Essentials of Interaction Design, 3rd Edition

Design is an act of choosing among or

informing choices of future ways of being.

Professor Eli Blevis Human-Computer Interaction Design

School of Informatics and Computing

Indiana University Quote from: Sustainable interaction design: invention & disposal, renewal & reuse, CHI2007

Blevis, E. Sustainable interaction design: invention & disposal, renewal & reuse, CHI2007, http://doi.acm.org/10.1145/1240624.1240705

Froehlich, J., Sensing and Feedback of Everyday Activities to Promote Environmental Behaviors, PhD Dissertation, University of Washington

Design is… achieving goals within constraints.

Professor Alan Dix Human-Computer Interaction Centre

University of Birmingham, UK Quote from: Dix, Finlay, Abowd, and Beale’s Human-Computer Interaction textbook, 3rd edition, 2004. p. 193

GOALS • What is the purpose of the design

we are intending to produce?

• Who is it for?

• Why do they want it?

Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 193.

CONSTRAINTS • What materials must we use?

• What standards must we adopt?

• How much can it cost?

• How much time do we have to

develop it?

• Are there health and safety issues?

Source: http://www.redesignrevolution.com/15-inspirational-quotes-from-startup-founders/

Golden Rule of Design

Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 193.

Understand your materials.

Understand Your Materials

Based on Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 193-194.

Understand computers Understand people Limitations, capacities, tools,

platforms, modalities…

Psychological, sociological,

physical, cultural…

USER

designs? who

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

Don Norman Flickr: happy.apple

We are all designers.

— Don Norman Emotional Design: Why we love (or hate) everyday things

2004

We are all designers.

— Don Norman Emotional Design: Why we love (or hate) everyday things

p. 224, 2004

We are all designers. We manipulate the environment, the

better to serve our needs. We select what items to own,

which to have around us. We build, buy, arrange, and

restructure: all this is a form of design. Through these

personal acts of design, we transform the otherwise

anonymous, commonplace things and spaces of everyday life

into our own things and places.

— Don Norman Emotional Design: Why we love (or hate) everyday things

p. 224, 2004

We are all designers. We manipulate the environment, the

better to serve our needs. We select what items to own,

which to have around us. We build, buy, arrange, and

restructure: all this is a form of design. Through these

personal acts of design, we transform the otherwise

anonymous, commonplace things and spaces of everyday life

into our own things and places. Through our designs, we

transform houses into homes, spaces into places, things into

belongings. While we may not have any control over the

design of the many objects we purchase, we do control which

we select and how, where, and when they are to be used.

— Don Norman Emotional Design: Why we love (or hate) everyday things

p. 224, 2004

Bill Buxton Ain’t Having it! Image Source: Microsoft News Center

Everyone is distinctly not a designer, and a

large part of this book is dedicated to

explaining the importance of including a

design specialist in the process of developing

both things and processes, what their role is,

and what skills they bring.

Bill Buxton Principal Researcher at Microsoft Research

One of the more influential figures in IxD Quote from: Buxton, Sketching User Experiences, 2007, p 97

design the process of

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.

David Kelley Co-Founder of IDEO and Stanford Design Professor

Quote from: ABC Nightline The Deep Dive with Ideo

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.

David Kelley Co-Founder of IDEO and Stanford Design Professor

Quote from: ABC Nightline The Deep Dive with Ideo

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.

Getting the design right and the right design.

Bill Buxton Principal Researcher at Microsoft Research

One of the more influential figures in IxD Quote from: Buxton, Sketching User Experiences, 2007

“Progress”

Final Design Initial Idea

Greenberg et al., Sketching User Experiences: The Workbook, p. 8

Reduction

Follow best idea,

refine, and continue

prototyping

Elaboration

Idea generation

& prototyping

Awesomeness

Idea1

PrototypeIDEA1 1

PrototypeIDEA1 N

Adapted from Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 221.

Awesomeness

Idea1

PrototypeIDEA1 1

PrototypeIDEA1 N

Adapted from Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 221.

Awesomeness

Idea1

PrototypeIDEA1 1

PrototypeIDEA1 N

Adapted from Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 221.

Awesomeness

Idea1

PrototypeIDEA1 1

PrototypeIDEA1 N

Idea2

PrototypeIDEA2 1

PrototypeIDEA2 2

PrototypeIDEA2 3

PrototypeIDEA2 N

Adapted from Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 221.

Awesomeness

Idea1

PrototypeIDEA1 1

PrototypeIDEA1 N

Idea2

PrototypeIDEA2 1

PrototypeIDEA2 2

PrototypeIDEA2 3

PrototypeIDEA2 N

Adapted from Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 221.

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

Slide adapted from Scott Klemmer

SimulatedAnnealing

Simulated Annealing can escape local minima with chaotic jumps.

Slide adapted from Scott Klemmer

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

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 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/

Manifestation progression

Design Funnel

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

Manifestation progression

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

Awesomeness

Idea1

PrototypeIDEA1 1

PrototypeIDEA1 N

Idea2

PrototypeIDEA2 1

PrototypeIDEA2 2

PrototypeIDEA2 3

PrototypeIDEA2 N

Adapted from Dix et al., Human-Computer Interaction, 3rd edition, 2004, p 221.

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

The worst thing that can happen with a new

product is that it is a failure. The second worst

thing that can happen is that it is a huge success.

Bill Buxton Principal Researcher at Microsoft Research

One of the more influential figures in IxD Quote from: Buxton, Sketching User Experiences, 2007, p 207

Buxton, Sketching User Experiences, 20067, p 56-57

Source: http://www.ianatomija.info/

Some book sources