CMSC434

Prototyping

Tuesday, March 26, 2013

Instructor: Jon Froehlich

TA: Matthew Mauriello

Intro to Human-Computer Interaction

Hall of Fame Hall of Shame

Design Activity

Redesign the Windows taskbar to

support an arbitrarily large number of

files open of the same type (with the

same program)

You solution can remix or derive from

existing solutions.

Affordances

Star Trek IV: The Voyage Home, 1986, directed by Leonard Nimoy, http://youtu.be/hShY6xZWVGE

Norman door!

Affordance refers to the

perceived & actual properties of a

thing that determine just how that

thing could possibly be used

Don Norman

Cognitive Scientist / Author

vertical handle cues pull behavior

Perceived Affordances

Affordances suggest how to

use the object

Can be dependent on the

Experience

Knowledge

Culture of the actor

Can make an action

easy/difficult

Affordances may be perceived

without actually existing

[From Bjoern Hartmann, Prof. at UC-Berkeley]

Affordances affect our perception of use

Can affordances change our behavior?

From my Moving Beyond Line Graphs BECC2010 talk, see http://bit.ly/jonuw, then

navigate to “talks”

In-N-Out Burger!

Battle of the Cans

Battle of the Cans

Duffy, Environment and Behavior, 2010

Duffy, Environment and Behavior, 2010

Affordances in UI design

What are the affordance of these graphical objects?

[From Bjoern Hartmann, Prof. at UC-Berkeley]

How about these?

[From Bjoern Hartmann, Prof. at UC-Berkeley]

I’m a button!

I’m a button!

I’m a button!

I’m a button

I’m a button

I’m a button Graphic design emphasizes affordances Helps user recognize objects as buttons

What does a click on the left pane do?

What does a click on the left pane do?

What are the scrollbar affordances?

[From Bjoern Hartmann, Prof. at UC-Berkeley]

[From Bjoern Hartmann, Prof. at UC-Berkeley]

Are touchscreens more natural?

A Magazine is an iPad That Does Not Work, http://youtu.be/aXV-yaFmQNk

[http://www.youtube.com/watch?v=ndkIP7ec3O8]

Virginia’s New iPad, http://youtu.be/ndkIP7ec3O8

Are touchscreens more natural?

[Moggridge, Designing Interactions, 2006]

Bill Atkinson Apple Engineer (1978-1990)

Prototyping Apple Lisa

[Moggridge, Designing Interactions, 2006]

Bill Atkinson Discussing the Apple Lisa UI Design Process, Moggridge, Designing Interactions, 2006

ChoosingFidelity

[http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/]

The Palm Pilot Started by Jeff Hawkins, 1996

Prototyping

The Palm Pilot

Jeff Hawkins Discussing the Palm Pilot Prototyping Process, Moggridge, Designing Interactions, 2006

VisualFidelity

[http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/]

Look and feel are the most

noticeable dimension of a prototype’s

fidelity and, if not properly selected,

can sidetrack prototype reviews. Go

hi-fi too soon and users will focus on

visual design, which is not

appropriate in early stages.

PaperPrototypes

[Nielsen Norman Group, http://www.nngroup.com/reports/prototyping/]

PrototypingNintendo

Open Access Prototype

FunctionalFidelity

[http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/]

Does the prototype reveal how the

solution will work (static) or does it

appear to be fully functional and

respond to user input (interactive)?

ContentFidelity

[http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/]

Displaying content? Early on, just

squiggly lines, then maybe dummy

text (though this can distract), then

actual content.

Proactive Parent, CMSC434 Sp2012

ChoosingFidelity

[http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/]

Sustainly, CMSC434 Sp2012

StaySafe, CMSC434 Sp2012