1

Human-Computer Interaction

Design Principles
IN TODAY’S LECTURE
 Conceptual Models

 Visibility

 Affordance

 Constraints

 Mapping

 Consistency

 Feedback
MENTAL MODELS AND CONCEPTUAL
MODELS

Object
Object
Mental Perceive Conceptual
Model Model
Design

Interact

User Designer
(Uses object) (Designs object)
 USER MODEL, CONCEPTUAL MODEL
AND SYSTEM IMAGE
System Image
(Implementation Model)

System
System
Mental Perceive Conceptual
Model Model
Design

User Model Designer Model

Interact (Represented Model)

User Designer
(Uses system) (Designs system)
USER MODEL, CONCEPTUAL MODEL
AND SYSTEM IMAGE
 Design Model
 Designer’s conceptual model

 User’s Model
 Mental Model

 System Image
 Results from physical structure that has been
built
 Documentation
 Instructions

 Labels, etc.
CONCEPTUAL MODEL
 “A description of the proposed system in
terms of a set of integrated ideas and
concepts about what it should do, behave
and look like, that will be understandable by
the users in the manner intended.”

 “The way designers choose to represent the

working of the program to the user.”
CONCEPTUAL MODELS AND
DESIGNERS
 Designer does not talk directly with user
 Communication via SYSTEM IMAGE

 If SYSTEM IMAGE does not make DESIGN

MODEL clear and consistent, then user will
have wrong USER MODEL User
NOT clear and consistent Model

System Image

Faulty
System
System

User
FALLACY OF DESIGNERS
 Designer’s expect USER MODEL to be the
same as the DESIGN MODEL
CONCEPTUAL MODEL EXAMPLE
 Reverse gear in car

1 3
My mental model

2 4 R
1 3 R Gear needs to
Be pushed down
then switched to
reverse position

2 4 Car’s Conceptual model

WHAT DESIGNERS SHOULD AIM FOR
 Match CONCEPTUAL MODEL with MENTAL
MODELS of users
VISIBILITY
 Correct parts must be visible

 More visible functions are, more likely users will

be able to know what to do next

 “Out of sight” functions make them difficult to

use and find

 Make relevant parts visible

 This critical principle violated again and again in

everyday things
 Crucial parts carefully hidden away
VISIBILITY – BAD EXAMPLE
 Swinging doors in post
office
 2 sets of row of 6 glass
swinging doors

Swinging Door
•No plates
•No bars
1. Door opens •No lines
2. Door remains closed •No handles
•No supporting pillars
3. Door remains closed
VISIBILITY – GOOD EXAMPLE
 Controls on a
car

 Controls for
different
operations
 Indicators
 Headlights
 Horn
 Hazard lights
VISIBILITY EXAMPLE
 Modern Telephone

This is a control panel for an

elevator.
• How does it work?
• Push a button for the floor
you want?

• Nothing happens. Push any

other button? Still nothing.
What do you need to do?

It is not visible as to what to

do!
VISIBILITY EXAMPLE
you need to insert your room card in the slot by the
buttons to get the elevator to work!

How would you make this action more

visible?

•make the card reader more obvious

• provide an auditory message, that says what to do
(which language?)
• provide a big label next to the card reader that
flashes when someone enters

•make relevant parts visible

• make what has to be done obvious
VISIBILITY EXAMPLE
 Many do not have large enough
display

 Forget sequence of steps, what

was entered before, and what to
do next

 Better to have television on-

screen programming
 Other Examples
 Song title for CDs
 Names of Television Programs
 Cooking information for foods on
food containers
VISIBILITY EXAMPLE
•Disappearing option on menu bar
e.g., File > Properties
Before
VISIBILITY EXAMPLE
After
AFFORDANCE
 The presence and actual properties of a thing
 These properties determine how the things could
be used

 Attribute of an object that allows people to

know how to use it

 To Afford - to give a clue

 If affordances of a physical object are

perceptually obvious, it is easy to know how
to interact with it.
AFFORDANCE - EXAMPLES

pushing Sitting

pulling
AFFORDANCE - EXAMPLES

Bouncing Inserting

Solidity, Support Turning

AFFORDANCE IN SOFTWARE (UI)
Types of Affordance

Real Perceived
(physical objects) (virtual objects)

• Not perceptually obvious

perceptually obvious • Arbitrary in nature
e.g, button does
(a) _______ or
(b) _______
• Learned conventions

Should not design for real affordance at interface

AFFORDANCE IN UI
 Interface elements design

 Icons

 Scroll bars

 Button
AFFORDANCE IN UI
 Hyperlinks – underlined (web)

 Button – 3D (software, web)

CONSTRAINTS
 “Restricting the kind of user interaction that
can take place at a given moment in time”

 Prevents user from taking the wrong actions

TYPES OF CONSTRAINTS
 Physical

 Logical

 Cultural
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
LOGICAL CONSTRAINTS
 Exploits people’s everyday common sense
reasoning about the way the world works

 An example is they logical relationship

between physical layout of a device and the
way it works as the next slide illustrates
LOGICAL OR AMBIGUOUS DESIGN?
 Where do you plug the
mouse?

 Where do you plug the

keyboard?

 top or bottom connector?

 Do the color coded icons

help
DESIGNING THEM MORE LOGICALLY
(i) A provides direct
adjacent mapping
between icon and
connector

(ii) B provides colour

coding to associate the
connectors with the
labels
CULTURAL CONSTRAINTS
 Learned arbitrary conventions
like red triangles for warning

 Can be universal or culturally specific

WHICH ARE UNIVERSAL WHICH ARE
CULTURALLY- SPECIFIC?
CONSTRAINTS IN UI
 Deactivating menu options by shading them
MAPPING
 Relationship between controls and their
effects in the world

 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
 Map configuration onto directionality of actions
ACTIVITY ON MAPPINGS
 Which controls go with which rings (burners)?

A B C D
WHY IS THIS A BETTER DESIGN?
MAPPING EXAMPLE
CONSISTENCY
 Design interfaces to have similar operations
and use similar elements for similar tasks

 For example:
 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+Sp, ctrl+shift+L

 Increases learning burden on user, making

them more prone to errors
INTERNAL AND EXTERNAL
CONSISTENCY
 Internal consistency refers to designing
operations to behave the same within an
application
 Difficult to achieve with complex interfaces

 External consistency refers to designing

operations, interfaces, etc., to be the same
across applications and devices
 Very rarely the case, based on different designer’s preference
KEYPAD NUMBERS LAYOUT
 A case of external inconsistency

(a) phones, remote controls (b) calculators, computer keypads

1 2 3 7 8 9
4 5 6 4 5 6
7 8 9 1 2 3
0 0
FEEDBACK
 Sending information back to the user about
what has been done

 Includes sound, highlighting, animation and

combinations of these

 e.g.when screen button clicked on provides

sound or red highlight feedback:
“ccclichhk”
DESIGN GUIDELINES
 Useful feedback in response to user input

 Easy-to-understand and intuitive ways of

interacting with the system

 Clear and easy-to-follow instructions

 Appropriate online help and tutorials

 Context-sensitive guidance for users