Design of Everyday Things

- Donald Norman
Lecture 2
Usman Ahmad.
 Overview
 Why are some everyday things difficult to
understand and use?
 What are Don Norman’s principles and how
do they apply to the design of everyday
things?
 How can we apply Norman’s principles to
the design of computer interfaces?
 Psychopathology of Everyday
Things
 We are surrounded by many everyday things that
have poor usability
 Programming a VCR
 Telephone features we can’t remember how to use
 How to change the remote access code?
 Photocopiers and fax machines
 Face down or face up?
 Many of these things can be difficult to interpret
and frustrating to use if they provide no clues or
false clues as to how they operate
 Why is usability important?
 poor usability results in
 anger and frustration
 decreased productivity in the workplace
 higher error rates
 physical and emotional injury
 equipment damage
 loss of customer loyalty
 costs money
 What is usability?

Usability is a measure of the

effectiveness, efficiency and
satisfaction with which specified users
can achieve specified goals in a
particular environment.

• ISO 9241
 Examples of Poor Design
 Trapped between
doors!
 Handles afford
pulling
 Using a flat plate
would constrain the
user to push
 Examples of Poor Design
 Wireless Powerpoint slide controller
 Short press to go forward
 Long press to go backward
 Refrigerator temperature control
 Two compartments and two controls
 One cooling unit
Temperature Control
Norman’s 7 Principles of Design
 Make things visible
 Provide a good conceptual model
 Affordance
 Mapping
 Consistency
 Constraints
 Feedback
 Visibility
 The correct parts must be visible and they must
convey the correct message
 Natural signals are naturally interpreted
 Visibility problems occur when clues are lacking
or exist in excess
 Just by looking the user should know
 State of the system
 Possible actions
 Don’t violate these principles to make something
“look good”!
How fast are we going?
The well-trodden path
 Please Push Slowly!
 Wonder why doors are
made out of glass?

Evidently someone was

smacked…
The case of the mistaken urinal
 Shower Control
 Water either goes into the bath out of the
faucet or comes out of the shower
 Sticker with instructions on the faucet.
 How do you make the water come out of
the shower instead of the faucet?
 You have to reach under the faucet and
pull the knob down!
 Good Conceptual Model
 A good conceptual model allows us to
predict the effects of our actions
 Without a good model we operate blindly
 Simply follow rules without understanding a
reason
 No understanding of cause or effect
 No recourse when something breaks
 Affordances
 The affordances of an object determine, naturally,
how it can be used
 Button affords pushing
 Handle affords grasping
 Chair affords sitting
 Knob affords turning
 Just by looking at the object, a user should know how
to use it
 Example: The doors with handles to push, mop sink
 Affordances
 Affordance is the range of possible (physical) actions by a
user on an artefact
 Perceived Affordances: The actions a user perceives to be
possible.
 Real Affordances: Actions which are actually possible.
 The real affordances of an object determine, naturally, how
it can be used.
Affordance of this Handle?

Difficult to get a grip when slippery

How do you open this drawer?
How will you use it…
 GUI Affordances
 Screen-based interfaces, the computer hardware
already has built-in physical affordances:
 Screen affords touching.
 Mouse affords pointing.
 Mouse buttons afford clicking.
 Keyboard affords typing
 Cursor Changing?
 Changing the shape of the cursor to indicate a
clickable link is not an affordance (you can still click
anywhere), but visual feedback.
 Physically locking the mouse button on non-clickable
areas is a real affordance.
 GUI Affordances
 Needs familiar idiom and metaphor to work
Affordances
Affordances
 Mapping
 Mappings are the relationships between
controls and their effects on a system
 Controls and displays should exploit natural
mapping
 Natural mapping takes advantage of
physical similarities and cultural standards
 Physical: Steering wheel
 move a control up to move an object up
 use a louder sound to mean a greater amount
 Cultural: red means stop, green means go
 Mapping
• Why is this a poor mapping of control
buttons?
 Mapping
• Why is this a better mapping?

• The control buttons are mapped better onto the

sequence of actions of fast rewind, rewind, play and
fast forward
– Is this a logical mapping (in most people’s minds)?
– Is there a mapping that makes more sense?
Mouse or Keyboard?
What Knob Goes Where?
Exploiting Natural Mapping
 Yellow Street Lights
 Possible to confuse with stoplight
How do you play the CD?
How do you turn on the shower?
 Must reach down
where the water comes
out and pull down!
Instructions!
 Mapping
 Arbitrary mapping of controls to hot plates.
There are 24 possible arrangements,
requiring the use of labels and memory.

Paired cooker controls. Now there

are only four possible
arrangements, two on each side, but
confusion can still occur.

A full, natural mapping of cooker controls. There is

no ambiguity, no need for learning or remembering,
and no need for labels.
 CONSISTENCY
 Design interfaces to have similar operations
and use similar elements for similar tasks.
 For example:
Use of short cut keys
always use ctrl key plus first initial of
the command for an operation
– ctrl+C, ctrl+S, ctrl+O
 Main benefit is consistent interfaces are
easier to learn and use
When consistency breaks down?
 What happens if there is more than one
command starting with the same letter?
- e.g. save, spelling, select, style
 Have to find other initials or combinations of
keys, thereby breaking the consistency rule
- e.g. ctrl+S, ctrl+shift+L
 Increases learning burden on user, making
them more prone to errors
 CONSISTENCY
• Internal consistency refers to designing operations
to behave the same within an application

• External consistency refers to designing

operations, interfaces, etc., to be the same across
applications (e.g. MS Office applications) and
devices (calculators, remote controls, phone
keypads, ATM keypads)
 Constraints
 Constraints limit the ways in which something
can be used
 Constraints can be
 Physical
 Semantic
 Cultural
 Logical
On which side does the door open?
 Constraints
 Physical constraints such as pegs and holes limit
possible operations.
 Semantic constraints rely upon our knowledge of the
situation and of the world. (Grayed out menus)
 Logical constraints exploit logical relationships. For
example a natural mapping between the spatial layout
of components and their controls. (Standards)
 Cultural constraints rely upon accepted cultural
conventions. (Colors)
 Physical Constraints
• Refer to the way physical objects restrict the
movement of things
– E.g. only one way you can insert a key into a lock
• How many ways can you insert a CD or DVD disk
into a computer?
• How physically constraining is this action?
• How does it differ from the insertion of a floppy
disk into a computer?
 Semantic Constraints
• Semantic means “meanings”.
• What the meaning delivered from a design.
• Grayed out some menus shows that we
can’t use them in particular context.
 Logical Constraints
• Exploits people’s everyday common sense
reasoning about the way the world works

• An example is the logical relationship between

physical layout of a device and the way it works
– See next slide for an illustration
Logical or ambiguous design?
• Where do you plug the
mouse?

• Where do you plug the

keyboard?

• top or bottom connector?

• Do the colour coded icons

help?
From: www.baddesigns.com
 More Logically Constrained
Provides direct adjacent
mapping between icon
and connector

Provides color coding to

associate the connectors
with the labels

From: www.baddesigns.com
 Cultural constraints
• Learned arbitrary conventions
like red triangles for warning

• Can be universal or culturally specific

– For Software, we’ve accepted certain conventions,
e.g. we know what to do with an icon

• Be concerned of cross-cultural conventions and

other ambiguities!
– Does an “X” mean “selected” or “not selected”
– Is a check-mark better?
Which are universal and which are
culturally-specific?
 Feedback
 Feedback is sending back to the user
information about what action has actually
been done
 Visibility of the effects of the operation tell
you if something worked correctly
 Systems should be designed to provide
adequate feedback to the users to ensure
they know what to do next in their tasks
 Feedback Examples
 Telephone button press tones
 Telephone clicks
 Rice cooker goes “Bing!”
 Clicker on your turn signal
 Animated icon while waiting for a
web page to load
 VCR Feedback
 Did I really set it correctly to record at 8PM on
Tuesday?
 More or Less Coffee?
 Does the light on the bottom indicate 4-max cups,
or min-3 cups?

On=min to 3
Feedback Examples
Feedback Examples
 Norman’s Principles in Software
 Visibility
 Visibility of the tasks the interface supports
 Communication of system state / mode
 Affordance
 If it looks like a button it can be pressed, if it is a
underlined it can be clicked (web)
 Mapping
 Clicking on a particular interface element
produces expected effect (underlined File should
be Open)
Norman’s Principles in Software
 Consistency
 Design interfaces to have similar operations and use
similar elements for similar tasks.
 Constraints
 Constraining search criteria, grayed out menu items
that don’t apply in a particular context
 Feedback
 Providing clear and immediate feedback for each user
action
Larson’s dog effect
 Same with Software
Thank you for registering! We appreciate your business.
To activate your software, you will be sent an email key.
After you have received the key then you will be able to
click here and you can then proceed with the activation
process.

Blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
click here blah blah blah blah blah blah blah blah blah blah
blah
 Structure of Human Memory
 Short term memory is the memory of the present,
used as working or temporary memory.
 Information is retained in STM automatically and is
retrieved without effort
 However, the amount of information in STM is
severely limited: 7 +- 2 items [Miller, 1956]
 STM is extremely fragile – the slightest distraction and
its contents are gone.
 For example, STM can hold a seven digit phone
number from the time you look it up until the time
you use it, as long as no distractions occur.
 Structure of Human Memory
 Long Term Memory is the memory of the
past.
 It takes time to put stuff into LTM and time
and effort to get stuff out.
 Capacity is estimated at about 100 million
items.
 Knowledge in the Head and in
the World
Not all of the knowledge required for exact
behavior has to be in the head. It can be
distributed:
Partly in the head
Partly in the world
and partly in the constraints of the world
 Placing knowledge in the world
 Having knowledge in the world reduces the load on
human memory.
 It is better if the designers of an interface place
knowledge in the world.
 Example: the input format can be provided in the interface
 Please enter the date (yyyy/mm/dd):____________

 However, sometimes, users have to place knowledge

in the world themselves to fix a broken interface.
 To Err is Human
 People make errors routinely
 you must design for error.
 Assume that any error, that can be made,
will be made!
 Design explore able systems, where
operations are easy to reverse.
 Categories of Error
 Fundamental categories of Error:
 Slips result from automatic behavior, when
subconscious actions toward a correct goal
go wrong.
 Mistakes result from conscious
deliberations, which formed an
inappropriate goal.
If we click Edit, UI elements reveal
themselves for choosing a date and time
at which to publish the post.

It was at this point where I pressed the

Publish button and my post went live
immediately. Do you see what I did
wrong?
 Interface Hall of Shame
• Smallest Setting is 1% The
Internet Explorer 4.0 cache
size can only be set in
increments of 1% of the size
of the hard disk, as shown in
Figure.

• A Customer's Response
“The smallest setting is 1%.
I have a 4 Giga drive, and
don’t need 40 MB of cache
thank You.” ---Ross
Cormier
 Interface
Horizontal Scrolling : Humans can scan written
material faster from top to bottom rather than left to
right. Vertically scrolling lists support single-item.

List Box
Two item List Box (VB5.0)
 drop down list or radio buttons is better.

Two thousands item List Box

 Interface
The following message, posted in a Visual Basic programmers
forum on 11th December 1996, is Typical:

“I want to fill a list box with 2000 items ... This takes
incredibly long ... over 20 minutes. Any ideas?”

Multi-Row Property Sheets

Single-row property sheets (tab controls) are among the best
user interface elements ever devised.
Multi-row tab controls are perhaps one of the worst interface
elements ever!
 User Centered Design
System Centered Design
What can be built easily on this platform?
What can I create from the tools available?
What do I as a developer find interesting to work on?
What do I as a developer think users need?

User Centered Design

The design is based upon a user’s:
abilities and needs
context
work
tasks
Things to do when designing for humans
 If you don’t interact with real people during analysis and
design, how can you design products that they can use?
Involving customers is simple, cost-effective and
productive.
 How can you design good web sites if you don’t test them
with customers? Testing is simple, effective and cheap.
 Be doubtful of technologies that will change the world,
revolutionize the way we think, and transform the way we
do business.
 Remember – people are intuitive. Web sites, software and
mobile telephones are not.
 DESIGN PRINCIPLES
REVISITED
 Visibility
 Placing the controls in a highly visible location
 Affordances
 properties of an object that indicate how it can be used
 Mapping
 Mapping is the relationship between controls and their action or effect in the world
 Consistency
 Internal consistency refers to designing operations to behave the same within an
application
 External consistency refers to designing operations, interfaces, etc., to be the same
across applications and devices
 Constraints
 Restricting the possible actions that can be performed helps prevent user from
selecting incorrect options. Physical, Semantic, Logical and Cultural.
 Feedback
 provision of information about the result of an action
 Summary
 Usability problems are common
 If there are usability problems in everyday “simple” things, the
challenge is 100-fold for complex software
 Usability problems can be overcome through attention to design and
addressing studies from HCI
 Norman's Principle:
 Make things visible
 Provide a good conceptual model
 Affordance (possible actions)
 Mapping
 Consistency
 Constraints
 Feedback
 System Centered Design
 User Centered Design
 References
 The Design of Everyday Things
 By Donald Norman
 Bad Design Studies
 http://www.baddesigns.com
 Usability Studies
 http://www.useit.com/

Sources for examples:

Sachen Macdonald, Univ. of Victoria
Dey Alexander, Monash University