DESIGN PRINCIPLES

Chapters 3
 Interaction Design Concepts
i. Design principles
ii. Principle from experience :
1. Affordance
2. Signifier
3. Constraints
4. Mapping
5. Transfer Effects
6. Visibility
7. Feedback
8. Consistency
9. Metaphor
3
FOUR PSYCHOLOGICAL PRINCIPLES
1. Users See What They Expect to See

2. Users Have Difficulty Focusing on More than

One Activity at a Time

3. It Is Easier to Perceive a Structured Layout

4. It Is Easier to Recognize Something than to

Recall It

4
 PRINCIPLE 1
User’s confusions with the UI:

exploiting
see what they want to see prior knowledge
people don’t read consistency
Lora Aroyo, Web & Media Group 5
 Human-Computer Interaction Course 2014: Lecture 3

PRINCIPLE 2
Users Have Difficulty Focusing on More Than
One Activity at a Time
– The Cocktail Party Effect
• Principle of Perceptual Organization
– Group alike things together

• Principle of Importance
– Prominent display
for important items

6
 PRINCIPLE 3
It Is Easier to Perceive a Structured Layout

• Law of proximity
• Law of similarity
• Law of closure
• Law of continuity
• Law of symmetry

7
 Human-Computer Interaction Course 2014: Lecture 3

PRINCIPLE 4

It Is Easier to Recognize Something Than to

Recall It

• Principle of recognition
• Knowledge in the head & Knowledge in the
world

Lora Aroyo, Web & Media Group 8

 PRINCIPLES FROM EXPERIENCE:
1. AFFORDANCE
The Principle of Affordance:
– It Should Be Obvious How a Control IsUsed

9
 Human-Computer Interaction Course 2014: Lecture 3

1. AFFORDANCES

• The perceived and actual fundamental properties of the

object that determine how it could possibly be used
(Gibson 1977)
• Some affordances are obvious, some learned
• Have suggestions or clues about to how to use these
properties
• Can be dependent on the
– Experience
– Knowledge
– Culture of the actor
• Can make an action easy or difficult

10
AFFORDANCES OF A TEAPOT?

11
AFFORDANCES IN SCREEN-BASED UI

In graphical, screen-based interfaces:

a) Designer Has Control Over Perceived Affordances
a) Display Screen
b) Pointing Device
c) Selection Buttons
d) Keyboard
b) Afford Touching
c) Pointing
d) Looking
e) Clicking On Every Pixel Of The Display

11
2. SIGNIFIERS
3. CONSTRAINTS

15
 4. MAPPING
• Relationships between controls and their results
• For devices, appliances
– natural mappings use constraints and correspondences in the
physical world
• Controls on a stove
• Controls on a car
– Radio volume
» Knob goes left to right to control volume
» Should also go in and out for front to rear speakers
• For computer UI design
– mapping between controls and their actions on the computer
• Controls on a digital watch
• Controls on a word processor program

16
 5. TRANSFER EFFECTS
People transfer their expectations from familiar
objects to similar new ones
– positive transfer: previous experience applies to new
situation
– negative transfer: previous experience conflicts with
new situation
6. VISIBILITY

19
 7. FEEDBACK
The Principle of Feedback:
– It Should Be Obvious When a Control Has Been Used

Lora Aroyo, Web & Media Group 20

Feedback and Explanations

21
FROM BAD TO
BETTER

22
FEEDBACK

23
 8. CONSISTENCY
Uniformity in appearance, placement, and behavior

24
STRUCTURE & CONSISTENCY

25
 Human-Computer Interaction Course 2014: Lecture 3

8. CULTURAL ASSOCIATIONS
• Groups of people learn idioms
– red = danger, green = go

• But these differ in different places

– Light switches
• America: down is off
• Britain: down is on
– Faucets
• America: counter-clockwise is on
• Britain: counter-clockwise is off

26
9. METAPHORS

27
METAPHORS

28
WHAT’S WRONG?

Mapping – we’d
expect to go
off, low, high

Feedback – when
lamp is on, hard to tell
from switch position
whether it’s
in low or high mode

29
WHAT’S WRONG?

30
 WHAT’S WRONG?

CONSISTENCY: Different procedure for setting different

intervals of time.

FEEDBACK: When timer is at a time under 15 minutes, hard

to tell if it’s actually on or not (silent failure).

31
 DESIGN KNOWLEDGE
• Design Principles
– First Principles of InteractiveDesign
– http://www.asktog.com/basics/firstPrinciples.html

• Design Rules
– 8 Golden Rules
– http://www.usask.ca/education/coursework/skaalid/theory/
interface.htm
 Human-Computer Interaction Course 2014: Lecture 3

STANDARDS
• ISO 9241: Ergonomic requirements for office work with
visual display terminals (VDTs)
– defines usability as effectiveness, efficiency and satisfaction with
which users accomplish tasks
• ISO 14915: Software ergonomics for multimedia user
interfaces
– guidelines for design of multimedia interfaces
• ISO 13407: Human-centered design processes for
interactive systems
– management guidance through the development life-cycle
• ISO/CD 20282: Ease of operation of everyday products
– four-part standard to ensure products can be used as consumers
expect them to

33
 PRESENTATION 2
• Provide FOUR (4) specific examples of each of the
following concepts discussed in the class. Example :
affordance, signifier, mapping, feedback, etc.
• These concepts could include software applications.
You can use the same item to illustrate one or more of
the four concepts mentioned above. Provide
snapshot(s) or sketch(es) of the item(s) used.
• Present your findings in the class.