Chapter 5

Interaction Design
Basics

1
Interaction Design Basics

• Design
– What It Is, Interventions, Goals, Constraints
• The Design Process
– What Happens When
• Users
– Who They Are, What They Are Like …
• Scenarios
– Rich Stories Of Design
• Navigation
– Finding Your Way Around A System
• Iteration And Prototypes
– Never Get It Right First Time!

2
Interactions and Interventions

Design interactions not just interfaces

❖ not just the immediate interaction
❖ e.g. stapler in office – technology changes interaction style
• manual: write, print, staple, write, print, staple, …
• electric: write, print, write, print, …, staple

Designing interventions not just artifacts

❖ not just the system, but also …
• documentation, manuals, tutorials
• what we say and do as well as what we make

3
Design

4
 What Is Design?
achieving goals within constraints
• Goals – What is the purpose of the design we are intending
to produce? Who is it for? Why do they want it?
For example, if we are designing a wireless personal movie
player, we may think about young affluent users wanting
to watch the latest movies whilst on the move and
download free copies, and perhaps wanting to share the
experience with a few friends.

• Constraints – What materials must we use? What standards

must we adopt? How much can it cost? How much time do
we have to develop it? Are there health and safety issues?
In the case of the personal movie player: does it have to
withstand rain? Must we use existing video standards to
download movies? Do we need to build in copyright
protection?
5
 What Is Design? (cont.)
• Trade-off – Choosing which goals or constraints can be
relaxed so that others can be met. For example, we might
find that an eye-mounted video display, a bit like those
used in virtual reality, would give the most stable image
whilst walking along. However, this would not allow you to
show friends, and might be dangerous if you were watching
a gripping part of the movie as you crossed the road.

6
 Golden Rule Of Design
understand your materials

• Part of the understanding we need is about the

circumstances and context of the particular design problem.
• The designs we produce may be different, but often the raw
materials are the same.

• Look at a chair with a steel frame and one with a wooden

frame. They are very different: often the steel frames are
tubular or thin L or H section steel. In contrast wooden
chairs have thicker solid legs. If you made a wooden chair
using the design for a metal one it would break; if you made
the metal one in the design for the wooden one it would be
too heavy to move. 7
For Human–computer Interaction

• Understand computers
– limitations, capacities, tools, platforms
• Understand people
– psychological, social aspects
– human error
• And their interaction …

8
To err is human
• accident reports ..
– aircrash, industrial accident, hospital mistake
– enquiry … blames … ‘human error’
• but …
– concrete lintel breaks because too much weight
– blame ‘lintel error’ ?
… no – design error
we know how concrete behaves under stress
• human ‘error’ is normal
– we know how users behave under stress
– so design for it!
• treat the user at least as well as physical materials!

9
Central message …
The user
• Often it is said that the success of the various methods
used in HCI lies not in how good they are, but in that
they simply focus the mind of the designer on the user.
• This is the core of interaction design: put the user first,
keep the user in the center and remember the user at
the end.

10
The Design Process

11
 The process of design

scenarios
what is task analysis
wanted guidelines
principles
interviews analysis precise
ethnography specification
design
what is there
dialogue implement
vs.
notations and deploy
what is wanted
evaluation
prototype
heuristics architectures
documentation
N.B.: Heuristics are mental shortcuts that allow people to
help
solve problems and make judgements quickly and
efficiently. 12
 The process of design (cont.)
• Requirements
What is there and what is wanted. There are a
number of techniques used for this in HCI:
interviewing people, videotaping them, looking at the
documents and objects that they work with,
observing them directly.
• Analysis
– Ordering and understanding: The results of
observation and interview need to be ordered in
some way to bring out key issues and communicate
with later stages of design.

13
 The process of design (cont.)
• Design

– What to do and how to decide

• Iteration and prototyping
– Getting it right … and finding what is really needed! :
Humans are complex and we cannot expect to get
designs right first time. We therefore need to evaluate a
design to see how well it is working and where there
can be improvements.

14
 The process of design (cont.)
• Implementation and deployment

– Making it and getting it out there : when we are

happy with our design, we need to create it and
deploy it. This will involve writing code, perhaps
making hardware, writing documentation and
manuals – everything that goes into a real system
that can be given to others.

15
… but how can I do it all ! !
• limited time ⇒ design trade-off

• usability?
– finding problems and fixing them?
– deciding what to fix?
– which usability problems is it worth fixing?
• a perfect system is badly designed
– too good ⇒ too much effort in design
– Rather to find radically different solutions that have
a major effect but are cheap to implement.

16
The Users

17
 User Focus
• Know your user
• Personae
• Cultural probes

18
Know Your User

• Who are they?

• Probably not like you!
• Talk to them
• Watch them
• Use your imagination

19
Persona : Example

Betty is 37 years old. She has been Warehouse Manager for five
years and worked for Simpkins Brothers Engineering for twelve
years. She didn’t go to university, but has studied in her
evenings for a business diploma. She has two children aged 15
and 7 and does not like to work late. She did part of an
introductory in-house computer course some years ago, but it
was interrupted when she was promoted and could no longer
afford to take the time. Her vision is perfect, but her right-hand
movement is slightly restricted following an industrial accident 3
years ago. She is enthusiastic about her work and is happy to
delegate responsibility and take suggestions from her staff.
However, she does feel threatened by the introduction of yet
another new computer system (the third in her time at SBE).

20
Persona (cont.)

• Description of an ‘example’ user

– Not necessarily a real person

• Use as surrogate user

– What would betty think

• Details matter
– Makes her ‘real’

21
 Cultural Probes
Used as one way to gather rich views of an
area without intrusion
•Direct observation
– Sometimes hard
• In the home
• Psychiatric patients, …

•Probe packs
– Items to prompt responses
• E.g. Glass to listen at wall, camera, postcard
– Given to people to open in their own environment
they record what is meaningful to them

•Used to …
– Inform interviews, prompt ideas, enculture designers 22
 Scenarios
• Stories for design
• Use and reuse

23
Scenarios
• Stories for design
❑ Communicate with others – other designers, clients
or users. It is easy to misunderstand each other whilst
discussing abstract ideas. Concrete examples of use are
far easier to share.

❑ Validate other models – A detailed scenario can be

‘played’ against various more formal representations
such as task models (discussed in Chapter 15) or dialog
and navigation models (Chapter 16 and below).

❑ Express dynamics – Individual screen shots and

pictures give you a sense of what a system would look
like, but not how it behaves.
24
 Scenarios (cont.)
• Linearity - This linearity has both positive and negative
points:
❑ Time is linear Our lives are linear as we live in time and so
we find it easier to understand simple linear narratives. We
are natural storytellers and story listeners.
❑ But no alternatives Real interactions have choices, some
made by people, some by systems. A simple scenario does
not show these alternative paths. In particular, it is easy to
miss the unintended things a person may do.

25
Scenarios (cont.)

• What will users want to do?

• Step-by-step walkthrough
– What can they see (sketches, screen shots) ?
– What do they do (keyboard, mouse etc.) ?
– What are they thinking?

• Use and reuse throughout design

26
 Scenario – Movie Player
Brian would like to see the new film “Moments of Significance” and wants
to invite Alison, but he knows she doesn’t like “arty” films. He decides to
take a look at it to see if she would like it and so connects to one of the
movie sharing networks. He uses his work machine as it has a higher
bandwidth connection, but feels a bit guilty. He knows he will be getting
an illegal copy of the film, but decides it is OK as he is intending to go to
the cinema to watch it. After it downloads to his machine he takes out his
new personal movie player. He presses the ‘menu’ button and on the
small LCD screen he scrolls using the arrow keys to ‘bluetooth connect’
and presses the select button. On his computer the movie download
program now has an icon showing that it has recognised a compatible
device and he drags the icon of the film over the icon for the player. On
the player the LCD screen says “downloading now”, a percent done
27
indicator and small whirling icon. … … …
Scenario - Explore the depths

• Explore interaction
– What happens when

• Explore cognition
– What are the users thinking

• Explore architecture
– What is happening inside

28
Navigation

29
 the
systems

info and managem

messages
start help ent

remove

Navigation Design
add user
user

Local structure – single screen

Global structure – whole site
main remove
confirm
screen user

add
user
30
Levels

• Widget choice
– Menus, buttons etc.

• Screen design

• Application navigation design

• Environment
– Other apps, O/S

31
Levels of Interaction

32
 Think About Structure
• Just in case you haven’t already got the idea, the
place to start when considering the structure of an
application is to think about actual use:

❖ who is going to use the application?

❖ how do they think about it?
❖ what will they do with it?

33
 Think About Structure (cont.)

• Within a screen
– Later ...

• Local
– Looking from one screen or page out

• Global
– Structure of site, movement between screens

• Wider still
– Relationship with other applications 34
 Local
- Looking from one screen or page out
- Much of interaction involves goal-seeking behavior.
- Users have some idea of what they are after and a partial
model of the system.
- In an ideal world if users had perfect knowledge of what they
wanted and how the system worked they could simply take the
shortest path to what they want, pressing all the right buttons
and links.
- However, in a world of partial knowledge users meander
through the system.
- The important thing is not so much that they take the most
efficient route, but that at each point in the interaction they
can make some assessment of whether they are getting closer
to their (often partially formed) goal.
35
Goal Seeking

goal
start

36
Goal Seeking (cont.)

goal
start

progress with local knowledge only ...

37
Goal Seeking (cont.)

goal
start

… but can get to the goal

38
Goal Seeking (cont.)

goal
start

… try to avoid these bits!

39
Four Golden Rules

• Knowing where you are

• Knowing what you can do

• Knowing where you are going

– Or what will happen

• Knowing where you’ve been

– Or what you’ve done

40
 Where You Are – Breadcrumbs

shows path through web site hierarchy

top level category sub-category

web site this page

live links
to higher
levels
41
 What you can do – Links
• What can be pressed or clicked to go somewhere or do
something.
• Some web pages are particularly bad in that it is unclear
which images are pure decoration and which are links to take
you somewhere.
• On the web the standard underlined links make it clear which
text is clickable and which is not.
• However, in order to improve the appearance of the page
many sites change the color of links and may remove the
underline too.
• This is especially confusing if underline is then used as
simple emphasis on words that are not links!
• The trade-off between appearance and ease of use may mean
that this is the right thing to do, but you should take care
before confusing the user needlessly.

42
Where You Are Going -
Beware The Big Button Trap

things other things

the thing
more things from
outer space

• where do they go?

– lots of room for extra text! 43
Where You Are Going - Modes

• Special care has to be taken if the same

command or button press means something
different in different contexts.

• These different contexts that change the

interpretation of commands are called modes.

44
Where You Are Going – Modes (cont.)
• Lock to prevent accidental use …

– Remove lock - ‘c’ + ‘yes’ to confirm

– Frequent practiced action
• If lock forgotten
– In pocket ‘yes’ gets pressed
– Goes to phone book
– In phone book …
‘c’ – delete entry
‘yes’ – confirm
… oops !
45
Global - hierarchical organization
• The overall structure of an application.

• This is the way the various screens, pages or device states link
to one another.
• One way to organize a system is in some form of hierarchy.
• This is typically organized along functional boundaries (that is,
different kinds of things), but may be organized by roles, user
type, or some more esoteric breakdown such as modules in an
educational system.

• This sort of hierarchy can be used purely to help during design,

but can also be used to structure the actual system.
• For example, this may reflect the menu structure of a PC
46
application or the site structure on the web.
Hierarchical Diagrams
• Gives a high-level breakdown of some sort of messaging
system.

The system

Info and help Management Messages

Add user Remove user

47
Navigating Hierarchies

• Deep is difficult!

• Misuse of miller’s 7 ± 2
– Short term memory, not menu size

• Optimal?
– Many items on each screen
– But structured within screen

48
see /e3/online/menu-breadth/
Network Diagrams

main remove
confirm
screen user

add user

• Show different paths through system

Network Diagrams (cont.)
A simple way is to use a network diagram showing the principal
states or screens linked together with arrows. This can:
•Show what leads to what
•Show what happens when
•Include branches and loops
•Be more task oriented than a hierarchy.

main remove
confirm
screen user

add user
Wider Still
• Between applications
• And beyond ...

51
Wider Still (cont.)
• Style issues
– Platform standards, consistency

• Functional issues
– Cut and paste

• Navigation issues
– Embedded applications

– Links to other apps … the web

52
Screen Design And
Layout

53
 Dix , Alan
✔
Finlay, Janet
Abowd, Gregory
Beale, Russell

Screen Design And Layout

• Tools for layout
• User action and control
• Appropriate appearance

ABCDEFGHIJKLM
NOPQRSTUVWXYZ 54
 Basic Principles
• Ask

– What is the user doing?

• Think
– What information is required?
– What comparisons may the user need to make?
– In what order are things likely to be needed?
• Design
– Form follows function: let the required interactions
drive the layout.

55
Available Tools

• Grouping of items

• Order of items
• Decoration - fonts, boxes etc.

• Alignment of items
• White space between items

56
Grouping And Structure

logically together ⇒ physically together

Billing details: Delivery details:

Name Name
Address: … Address: …
Credit card no Delivery time

Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …

57
Order Of Groups And Items

• Think! - What is natural order

• Should match screen order!

– Use boxes, space etc.
– Set up tabbing right!

• Instructions
– Beware the cake recipie syndrome!
… Mix milk and flour, add the fruit after beating them

58
Decoration

• Use boxes to group logical items

• Use fonts for emphasis, headings
• But not too many!!

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
59
Alignment - Text

• You read from left to right (english and

european)

⇒ align left hand side

boring but
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography readable!
Wizard of Oz
Xena - Warrior Princess

Willy Wonka and the Chocolate Factory

Winston Churchill - A Biography
Wizard of Oz
fine for special effects Xena - Warrior Princess
but hard to scan
60
Alignment - Names

• Usually scanning for surnames

⇒ make it easy!

✔
Alan Dix
Janet Finlay Dix , Alan
Gregory Abowd Finlay, Janet

✔
Russell Beale Abowd, Gregory
Beale, Russell
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
61
Alignment - Numbers

532.56
think purpose!
179.3
256.317
which is biggest? 15
73.948
1035
3.142
497.6256
62
Alignment – Numbers (cont.)

visually:
627.865
long number = big number 1.005763
382.583
align decimal points 2502.56
or right align integers 432.935
2.0175
652.87
56.34
63
Multiple Columns

• Scanning across gaps hard:

(often hard to avoid with large data base fields)

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

64
Multiple Columns - 2

• use leaders

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

65
Multiple Columns - 3

• or greying (vertical too)

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

66
Multiple Columns - 4

• or even (with care!) ‘bad’ alignment

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

67
 White Space - The Counter
• In typography the space between the letters is called the
counter.
• In painting this is also important and artists may focus as
much on the space between the foreground elements such as
figures and buildings as on the elements themselves.
• Often the shape of the counter is the most important part of
the composition of a painting and in calligraphy and
typography the balance of a word is determined by giving an
even weight to the counters.

WHAT YOU SEE

68
White Space - The Counter
(cont.)

WHAT YOU SEE

THE GAPS BETWEEN

69
Space To Separate

70
Space To Structure

71
Space To Highlight

72
Physical Controls

• grouping of items
–defrost
defrostsettings
settings
– type of food
type of food
– time to cook
time to cook

73
Physical Controls (cont.)

• grouping of items
• order of items
1)
1) typeofofheating
type heating
2) temperature 1
2) temperature
3) time to cook
3)
4) time
startto cook
2
4) start
3
4 74
Physical Controls (cont.)

• grouping of items
• order of items
• decoration
– different colours
different colours for
for different functions
different functions
– lines around related
lines around related
buttons
buttons (temp up/down)
75
Physical Controls (cont.)

• grouping of items
• order of items
• decoration
• alignment
– centered text in buttons
centred text
? easy to in buttons
scan ?
? easy to scan ?
76
Physical Controls (cont.)

• grouping of items
• order of items
• decoration
• alignment
• white space
– gaps to aid grouping
gaps to aid grouping
77
User Action And Control

• Entering information
• Knowing what to do
• Affordances

78
Entering Information
Name: Alan Dix
Address: Lancaster
• Forms, dialogue boxes

✔
– Presentation + data input
– Similar layout issues Name: Alan Dix
– Alignment - N.B. Different label lengths Address: Lancaster

• Logical layout
– Use task analysis (ch15)
– Groupings
?
Name: Alan Dix
Address: Lancaster

– Natural order for entering information

• Top-bottom, left-right (depending on culture)
• Set tab order for keyboard entry

79
N.B. see extra slides for widget choice
Knowing What To Do
• What is active what is passive
– Where do you click
– Where do you type
• Consistent style helps
– E.g. Web underlined links
• Labels and icons
– Standards for common actions
– Language – bold = current state or action

80
Affordances
mug handle
• Psychological term
‘affords’
• For physical objects grasping
– Shape and size suggest actions
• Pick up, twist, throw
– Also cultural – buttons ‘afford’ pushing
• For screen objects
– Button–like object ‘affords’ mouse click
– Physical-like objects suggest use
• Culture of computer use
– Icons ‘afford’ clicking
– Or even double clicking … not like real buttons!

81
 Appropriate Appearance

• Presenting Information
• Aesthetics And Utility
• Colour And 3D
• Localisation & Internationalisation

82
 Presenting Information
• Purpose matters
– Sort order (which column, numeric alphabetic)
– Text vs. Diagram
– Scatter graph vs. Histogram

• Use paper presentation principles!

• But add interactivity

– Softens design choices
• E.g. Re-ordering columns
• ‘Dancing histograms’ (chap 21)

83
Aesthetics And Utility

• aesthetically pleasing designs

– increase user satisfaction and improve productivity
• beauty and utility may conflict
– mixed up visual styles ⇒ easy to distinguish
– clean design – little differentiation ⇒ confusing
– backgrounds behind text
… good to look at, but hard to read
• but can work together
– e.g. the design of the counter
– in consumer products – key differentiator (e.g. iMac)

84
Aesthetics And Utility (cont.)

• Aesthetically pleasing designs

– Increase user satisfaction and improve productivity
• Beauty and utility may conflict
– Mixed up visual styles ⇒ easy to distinguish
– Clean design – little differentiation ⇒ confusing
– Backgrounds behind text
… good to look at, but hard to read
• But can work together
– E.g. The design of the counter
– In consumer products – key differentiator e.g. sleek
curves of a car.

85
Colour And 3D
• Both often used very badly!
• Colour
– Older monitors limited palette
– Colour over used because ‘it is there’
– Beware colour blind!
– Use sparingly to reinforce other information
• 3D effects
– Good for physical information and some graphs
– But if over used …
e.g. Text in perspective!! 3d pie charts

86
Bad Use Of Color

• over use - without very good reason (e.g. kids’ site)

• colour blindness
• poor use of contrast
• do adjust your set!
– adjust your monitor to greys only
– can you still read your screen?

87
Across Countries And Cultures
• Localisation & internationalisation
– Changing interfaces for particular cultures/languages
• Globalisation
– Try to choose symbols etc. That work everywhere

• Simply change language?

– Use ‘resource’ database instead of literal text
… but changes sizes, left-right order etc.
• Deeper issues
– Cultural assumptions and values
– Meanings of symbols
E.g. tick and cross … +ve and -ve in some cultures
… but … mean the same thing (mark this) in others

✔ 88
Iteration And Prototyping

Getting better …
… and starting well

89
Prototyping

• You never get it right first time

• If at first you don’t succeed …

OK?
evalu
design prototype done!
ate

re-design

90
Pitfalls of Prototyping

• Moving little by little … but to where

1. Need a good start point

2. Need to understand what is wrong
91
Thank You

92