Human Computer Interaction

IE403

Dr. Manish Khare

Lecture – 5-7
Topics for this week’s classes

 Discussion on Don Norman’s principles

Slide 2
Conceptual Models

• The Psychology of Everyday Things

• Good Design vs. Bad Design

• Human Error is Inevitable

• The Seven Principles of Design

• Designing for Different users

• Beyond Usability

• Technology’s effect on Design

Slide 3
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?

Slide 4
 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

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

Slide 5
Example of things difficult to use

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

Slide 6
Norman’s philosophy

“...things are designed to be used by people, and without a deep

understanding of people, the designs are apt to be faulty, difficult to use,
difficult to understand.”

Slide 7
Understanding

 What does it all mean?

 How is the product supposed to be used?
 What do all the different controls and settings mean?

Many products defy understanding simply because they

have too many functions and controls.

Slide 8
User/Human Centered Design

Human-centered design (HCD), is an approach that puts human needs,

capabilities, and behavior first, then designs to accommodate those needs,
capabilities, and ways of behaving.

 Empathize: Understanding YOUR USER and design

 Human needs, capabilities and behaviour

 Communication: Indicate what actions are possible, what is happening, and what
is about to happen.

Slide 9
What is a good User Centered design?

 Has affordances - makes each operation visible;

 Offers obvious mappings - makes the relationship between the actual action of
the device and the action of the user obvious;
 Provides feedback on the user's action;
 Provides a good mental model of the underlying behaviour of the device;
 Provides forcing functions - prevents a user from making bad errors;
 Supports automatic learning -- offers consistencies and practice that help the
user acquire interface skills.

Slide 10
Norman’s Principles of Design

 Make things visible

 Provide a good conceptual model
 Affordance
 Mapping
 Constraints
 Feedback

Slide 11
Fundamental Principles of Interaction

Slide 12
Discoverability

Is it possible to even figure out what actions are possible and

where and how to perform them?

 Discoverability results by applying 6 fundamental psychological concepts

Slide 13
Affordances
(coined by psychologist James J. Gibson and applied to HCI by Don Norman)

 Affordances determine what actions are possible

with an object by an agent(user) 🡪🡪 Relationship
 Exist even if they are not visible.
 For designers, their visibility is critical
 visible affordances provide strong clues to the Affordance property
operations of things Visible, Discoverable

 Perceived affordances
 Can I figure out what actions are possible ?
 If NO,
 Presence of some SIGNALS is required.
Glass: AntiAffordance property
Invisible, Not Discoverable

Slide 14
Affordances in Web Interfaces

 What actions does the

webpage provide to
the user explicitly?
Or
 What does the
interface afford to the
user?

Slide 15
Affordances in Apps

 What Explicit affordance does the

interface provide?

 The raised appearance of the button

affords pushing down. The text
explicitly signals the result of the
action.

Slide 16
Other types of Affordances

Hidden

Pattern

Metaphorical
(Contextual)

Slide 17
Signifiers

 Communicate where the action

should take place

 Signifiers refers to any mark of

sounds, any perceivable indicator
that communicates appropriate
behaviour to a person

 Signifiers are signals.

 signs, labels, and drawings placed in the world
Fig 1. If a door needs a signifier, then
it’s a bad design

Slide 18
Mapping

 The relationship between the

elements of two sets of things
 Controls and Displays
Fig 1

 Groupings and proximity are map

controls to function
 Controls should be
close to the item
being controlled.

Fig 2

Slide 19
What Knob Goes Where?

Fig 1
Exploiting Natural Mapping

Best mapping: Controls are mounted directly on the Fig 2

item to be controlled.
Second-best mapping: Controls are as close as possible
to the object to be controlled.
Third-best mapping: Controls are arranged in the same
spatial con- figuration as the objects to be controlled

Slide 20
 Feedback

 Feedback — communicating
the results of an action
 must be immediate
 must be informative
 Poor feedback can be worse than no
feedback at all
Fig 1

Poor/No Feedback: Pressing elevator buttons

repeatedly. Reason: No feedback of lift
movement?

Slide 21
 Norman’s Principles in Software

Visibility
Visibility of the tasks the interface
supports : Can I see it?
Communication of system state / mode
Affordance
🡪🡪 Pressed

Here 🡪🡪 Click (web)

Fig 1
Mapping
Where am I and where can I go?
Clicking on a particular interface element
produces expected effect (under F)ile
should be O)pen)

Fig 2

Slide 22
Norman’s Principles in Software

Constraints
Why can’t I do that?
Constraining search criteria, graying
out
menu items that don’t apply in a Fig 1

particular context
Feedback
What is it doing now?
Providing clear and immediate
feedback for each user action
Fig 2

Slide 23
Assignment

Take one real world object(s) and start finding affordances,

signifiers, mapping and constraints

Slide 24
 Psychology of Everyday Things

 Lesson 1
 Most failures of human-machine system are due to poor designs that don’t
recognize peoples’ capabilities and fallibility's

 This leads to apparent machine misuse and “human error”

 Lesson 2
 Good design always accounts for human capabilities.

Slide 25
Psychopathology of everyday things

 Typical frustrations
 The engineer who founded DEC confessed at the annual
meeting that he can’t figure out how to heat a cup of coffee
in the company’s microwave oven

 How many of you can program or use all aspects of your

 digital watch?
 VCR?
 sewing machine?
 washer and dryer?
12:00
 stereo system (especially car ones)
 unfamiliar water faucets

Slide 26
 The Psychopathology of computers

 Britain has (had) a Motorway Communications System operating 40% of it’s

highways

 The system receives control information from Police

 changes lane signs, direction signs, speed limits, etc
 occurs on the motorway itself in real time

 On December 10th 1976, police, using the system, failed to change the speed limit
signs when fog descended
 34 vehicles crashed 40 km
 3 people were killed Slow Down!
 11 people were injured and trapped in their vehicles Fog Ahead
for several hours
 motorway closed for 6.5 hours

Slide 27
 Some quotes

 Police (at inquest)

 “The system did not accept the instruction”

 Dept of Transport (after examining computer activity logs)

 “There is no evidence of technical failure”

 Designers of system
 after emphasizing that they have no responsibility for the system:
 “We supplied it over 5 years ago and we have never been called to look at that problem”

 The Coroner’s Court

Not
 after examining the evidence, claimed it was "operator error"
 the police operator: me!
“failed to follow written instructions for entering the relevant data”

Where have we heard this before?

Slide 28
Inane dialog boxes

Slide 29
Inane dialog boxes

ClearCase, a source-code control system

from Rational Software

Slide 30
Inane dialog boxes

Slide 31
Inane dialog boxes

Slide 32
Inane dialog boxes

Slide 33
 Psychology of Everyday Things

 Many so-called human errors and “machine misuse” are actually errors in
design

 Designers help things work by providing a good conceptual model

 Designers decide on a range of users as the design audience

 But design is difficult for a variety of reasons that go beyond design

Slide 34
 Psychopathology

Usable vs. Usefulness

Slide 35
Slide 36
Slide 37
Slide 38
Slide 39
 Usable vs. Useful

 Thomas Landauer, The Trouble with Computers: Usefulenss,

Usability, and Productivity, 1995
 Usability: ability to actually use the system
 Ease of learning, recall, productivity, minimal error rates,
high user satisfaction
 Useful: the system actually does what you need it to do
 Not entirely disjoint concepts
 E.g., system not useful because it is so difficult to interact
with it

Slide 40
Psychology of everyday things
Design Concepts

 affordances
 causality
 visible constraints
 mapping
 transfer effects
 population stereotypes
 conceptual models
 individual differences
 why design is hard

Slide 41
 Making things work: Visual Structure

 Visual Affordances
 the perceived and actual fundamental properties of the object
that determine how it could possible be used

 appearance indicates how the object should be used

 chair for sitting
 table for placing things on
 knobs for turning
 slots for inserting things into
 buttons for pushing
 computers for ???

 complex things may need explaining, but simple things should not
 when simple things need pictures, labels, instructions, then design has failed

Slide 42
 Mapping
Cursor re-enforces
selection of current
item

Only active
pallette items
visible

Depressed
button
indicates
current
mapped item

Slide 43
Making things work: Understandable action

 Causality
 the thing that happens right after an action is assumed by people to be
caused by that action

 interpretation of “feedback”

 false causality
 incorrect effect

 starting up an unfamiliar application just as computer crashes

 causes “superstitious” behaviors

 invisible effect
 command with no apparent result often re-entered repeatedly

 e.g., hitting esc, or alt-ctrl-del, on unresponsive system

Slide 44
Making things work: Understandable action

Effects visible only after Exec button is pressed

•OK does nothing!
•awkward to find appropriate color level

Slide 45
 Making things work: Understandable action

 Transfer effects
 people transfer their learning/expectations of similar objects
to the current objects
 positive transfer: previous learning's also apply to new situation
 negative transfer: previous learning's conflict with the new situation

Slide 46
 Cultural associations

A Mac user finds a Windows system only somewhat familiar

Slide 47
 Conceptual model

 People have “mental models” of how things work

 conceptual models built from:

 affordances
 causality
 constraints
 mapping
 positive transfer
 population stereotypes/cultural standards
 instructions
 interactions
 familiarity with similar devices (positive transfer)

 models may be wrong, particularly if above attributes are misleading

 models allows people to mentally simulate operation of device

Slide 48
Jacques Carelman: Catalog of unfindable objects
Slide 49
 Example

Good: Scissors

affordances:
 holes for something to be inserted

constraints:
 big hole for several fingers, small hole for thumb

mapping:
 between holes and fingers suggested and constrained by appearance

positive transfer and cultural idioms:

 learnt when young
 constant mechanism

conceptual model:
 implications clear of how the operating parts work

Slide 50
 Example

12:00
Bad: Digital watch

affordances:
 four push buttons to push, but not clear what they will do

constraints and mapping unknown

 no visible relation between buttons, possible actions and end result

transfer of training
 little relation to analog watches

cultural idiom
 somewhat standardized core controls and functions
but still highly variable

conceptual model:
 must be taught

Slide 51
 Readings

 Norman, D. A. (1988) The Psychopathology of Everyday Things.

(excerpt reprinted in BGBG, pp 5-21)

 Norman, D.A. (1992). Emotion & design: Attractive things work

better. ACM Interactions, 9(4), 36-42.

 Gould, J. (1988). How to design usable systems. (Excerpt

reprinted in BGBG, p. 93 - 121)

Slide 52
 Two guidelines for design

1. Provide a good conceptual model

 allows user to predict the effects of their actions
 problem:
 designer’s conceptual model communicated to user through system image:
 appearance, written instructions, system behaviour through interaction,
 transfer, idioms and stereotypes

 if system image does not make model clear and

consistent, user will develop wrong conceptual model

Design User's model

Model

User
Designer

System

System
image

Slide 53
 Two guidelines for design

2. Make things visible

 relations between user’s intentions, required actions, and results are
 sensible
 non arbitrary
 meaningful

 visible affordances, mappings, and constraints

 use visible cultural idioms

 reminds person of what can be done and how to do it

Slide 54
 Who do you design for?

 People are different

 It is rarely possible to accommodate all people perfectly

 design often a compromise
 eg ceiling height: 8'
 but tallest man: 8' 11"!

 Rule of thumb:
 design should cater to 95% of audience (i.e., for 5th or 95th percentile)
 but means 5% of population may be (seriously!) compromised
 Designing for the average a mistake
 may exclude half the audience

 Examples:
 cars and height: headroom, seat size
 computers and visibility:
 font size, line thickness, color for color blind people?

Slide 55
 Who do you design for?
Computer users:
novices walk up and use systems most kiosk +
interface affords restricted set of tasks internet
introductory tutorials to more complex uses systems

casual standard idioms

recognition (visual affordances) over recall most shrink-
reference guides wrapped
interface affords basic task structure systems

intermediate advanced idioms

complex controls
reminders and tips
interface affords advanced tasks
custom
software
expert shortcuts for power use
interface affords full task + task customization

Slide 56
 Why design is hard

Over the last century

 the number of things to control has increased dramatically

 car radio: AM, FM1, FM2, 5 pre-sets, station selection, balance, fader, bass, treble,
distance, mono/stereo, dolby, tape eject, fast forward and reverse, etc (while driving at
night!)

 display is increasingly artificial

 red lights in car indicate problems vs flames for fire

 feedback more complex, subtle, and less natural

 is your digital watch alarm on and set correctly?

 errors increasing serious and/or costly

 airplane crashes, losing days of work...

Slide 57
 Why design is hard

People often consider cost and appearance over human factors design

 bad design not always visible

 people tend to blame themselves when errors occur

 “I was never very good with machines”
 “I knew I should have read the manual!”
 “Look at what I did! Do I feel stupid!”

 eg the new wave of cheap telephones:

 accidentally hangs up when button hit with chin
 bad audio feedback
 cheap pushbuttons—mis-dials common
 trendy designs that are uncomfortable to hold
 hangs up when dropped
 functionality that can’t be accessed (redial, mute, hold)

Slide 58
https://www.slideshare.net/limdonal
d/web-design-through-the-lens-of-
psychology-23548623

Slide 59
 Conceptual Models

 Need to first think about how the system will appear to users (i.e. how they
will understand it)

 A high level description of

 the proposed system with a set of integrated ideas and concepts about
 what it should do
 behave
 look like
 that will be understandable by the users in the manner intended

Slide 60
 Understanding a Conceptual Model

 How will the user think about the system?

Possibly based on:
 Data or objects
 Types of operations (activities)
done
 Metaphors (real world Fig 1. Word processor Vs a typewriter

analogies/similarities)
 What kind of interface metaphor, if any, will be
appropriate?
 What kinds of interaction modes and styles to
use?

Fig 2. iBooks flipping pages similar to physical books

Slide 61
 Mental models

 Users “see” the system through mental models

 Users “rely” on mental models during usage
 Reason about a sys
 Interact with
 Infer how it works
 Figure out how to correct when things do wrong

Slide 62
Why are mental models important?

2016, Chrysler automobiles recalled over 100K vehicles

 Gear shows P, R, N, D/S

 Shift through the gear options
 But returns to center position
 What is the problem ?
https://www.endurancewarranty.com/learning-center/news/fiat-chrysler-
recall-user-error/

Slide 63
 People were getting out of their cars thinking the gear
was in Park mode
But it wasn’t, so the car drove off without them!!!

Classic Designing something that people don’t understand or making some

Design thing which is totally NEW & Expecting USERS to figure out
Flaw User’s mental model is not the same as what was designed

https://www.carcomplaints.com/news/2017/lawsuit-chrysler-
gear-shift-confusing.shtml

Slide 64
 Dimensions of Usability

 Learnability: Easy to learn

 Efficiency: Once learned, is it fast to use?
 Errors: Are errors few and recoverable?
 Visibility: Is the state of the system visible?
 Effectiveness: Can it do the job well and
correctly?
 Satisfaction: Is the user happy with the interface?

Building all these dimensions into a product is called Usability

Engineering

Slide 65
 Learnability & Memorability

Making interfaces easier for

• new users to learn

• casual users to remember.

Slide 66