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