cs2501 design principles and paper prototyping · cs2501 –design principles and paper prototyping...

CS2501 – DESIGN PRINCIPLES

AND PAPER PROTOTYPING

* From Norman’s Design of Everyday Things and

our textbook.

DON NORMAN’S DESIGN PRINCIPLES

1. Visibility

2. Feedback

3. Affordance

4. Mapping

5. Constraint

6. Consistency

1. VISIBILITY

Users should always be able to:

See the state of the device

See the possible set of actions

1. VISIBILITY

Problems arise if we can’t see how to use

something.

Auto faucets have invisible “active zone”

2. FEEDBACK

What is the system doing now?

What action has been performed?

How did the system interpret my action?

2. FEEDBACK

2. FEEDBACK

2. FEEDBACK

Examples of feedback:

Scrolling text fields make it obvious that the value is

changing.

Flashing red let’s you know you’ve been hit by an

enemy.

Sound effects when action taken (assures player the

button was pressed correctly).

Progress bars (user knows the game is making

progress towards its goal)

Others?

3. AFFORDANCE

Coined by American psychologist J.J. Gibson in

mid-1900’s

“The affordances of the environment are what it

offers the animal, what it provides or furnishes,

either for good or ill.”

Don Norman replaced this concept of objective

affordances with that of “perceived affordances”

3. AFFORDANCE

3. AFFORDANCE

3. AFFORDANCE

3. AFFORDANCE

3. AFFORDANCE

4. MAPPING

Relationship of controls to their effects.

4. MAPPING

4. MAPPING

What should pulling back on joystick do? Look up or look down?

5. CONSTRAINT

Constrain the kinds of interactions that can take place. Helps reduce user’s memory load.

*For games, only show the user exactly what they need. No more!

Don’t allow user to do actions that aren’t relevant. Example?

5. CONSTRAINT

Easy to setup the console because

each cord only fits one slot.

6. CONSISTENCY

Four types of consistency (two new ones)

Aesthetic

Functional

Internal

External

6. CONSISTENCY

Aesthetic Consistency:

Style and appearance is repeated.

Communicates membership and sets tone.

6. CONSISTENCY

Functional Consistency:

Consistent use of colors

(colors always represent the

same thing)

Consistent use of symbols to

represent actions

6. CONSISTENCY

Internal Consistency:

Consistency within your application

External Consistency:

Consistency with other applications

Hmmmmm…is this why every FPS uses the same

control scheme (generally)?

6. CONSISTENCY

BONUS: PEOPLE HATE READING!

BONUS: PEOPLE HATE READING!

PAPER PROTOTYPING

PAPER PROTOTYPING!

Quite literally, using paper to produce a potential

interface design.

PAPER PROTOTYPING

Has several benefits:

Very Fast!

Very Cheap!

Easy to change and adapt

Estimated to be 100 times cheaper if NO code is written.

Can be used to collect important usability information!

*Jakob Nielson

DEMONSTRATION VIDEO

https://www.youtube.com/watch?v=GrV2SZuRPv

0

PAPER PROTOTYPING TIPS AND TRICKS

1) Keep materials in one place! Small interface

widgets tend to get lost or damaged easily.

2) Work quickly and make reusable components.

3) If something is difficult to simulate (progress

indicators, right mouse menus, hyperlinks), have

the user ask if it is available and then verbally

describe the interaction.

PAPER PROTOTYPING TIPS AND TRICKS

4) Backgrounds (Poster Board, etc.) can be useful

to contain the prototype and provide context for

the user.

5) Don’t be afraid to mix and match hardware

and software! Maybe a physical block of wood

with paper on it!

6) When appropriate, add context by including

familiar operating system elements.

PAPER PROTOTYPING MATERIALS

Widgets!

PAPER PROTOTYPING MATERIALS

Connectors

PAPER PROTOTYPING MATERIALS

Drawing

PAPER PROTOTYPING MATERIALS

…and more!

Don’t be afraid to get creative with the materials

you use!

Just remember that the point of PP is to be FAST

and CHEAP!

MORE TIPS!

Removable tape or restickable glue is useful for

changing components quickly.

You can use transparent plastic for input fields,

and erasable marker for allowing users to provide

input.

When in doubt, use wide tip pens and markers.

Stacks of cards can be used to simulate tabbed

dialog boxes.

ANOTHER EXAMPLE