interaction design basics

• design:
chapter 5 – what it is, interventions, goals, constraints
• the design process
– what happens when

interaction design
• users
– who they are, what they are like …

basics
• scenarios
– rich stories of design
• navigation
– finding your way around a system
• iteration and prototypes
– never get it right first time!

interactions and interventions

design interactions not just interfaces

what is design?
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 artefacts

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

what is design? golden rule of design

achieving goals within constraints

• goals - purpose
understand your materials
– who is it for, why do they want it
• constraints
– materials, platforms
• trade-offs

1
for Human–Computer Interaction To err is human

• accident reports ..
understand your materials
– aircrash, industrial accident, hospital mistake
– enquiry … blames … ‘human error’
• understand computers • but …
– limitations, capacities, tools, platforms – concrete lintel breaks because too much weight
– blame ‘lintel error’ ?
• understand people … no – design error
– psychological, social aspects we know how concrete behaves under stress
– human error • human ‘error’ is normal
– we know how users behave under stress
• and their interaction … – so design for it!
• treat the user at least as well as physical materials!

Central message … The process of design

scenarios
what is task analysis
wanted guidelines
principles
precise

the user
interviews analysis
ethnography specification
design
what is there
vs. dialogue implement
notations and deploy
what is wanted
evaluation
prototype
heuristics architectures
documentation
help

Steps … … but how can I do it all ! !

• requirements • limited time
design trade-off

– what is there and what is wanted …
• analysis • usability?
– ordering and understanding – finding problems and fixing them? 
• design – deciding what to fix?

– what to do and how to decide
• iteration and prototyping • a perfect system is badly designed
– getting it right … and finding what is really needed! – too good
too much effort in design
• implementation and deployment
– making it and getting it out there

2
 user focus

know your user

personae
cultural probes

know your user persona

• description of an ‘example’ user

• who are they?
– not necessarily a real person
• probably not like you!
• use as surrogate user
• talk to them – what would Betty think
• watch them • details matter
• use your imagination – makes her ‘real’

example persona cultural probes

Betty is 37 years old, She has been Warehouse Manager for five • direct observation
years and worked for Simpkins Brothers Engineering for twelve – sometimes hard
years. She didn’t go to university, but has studied in her • in the home
evenings for a business diploma. She has two children aged 15
• psychiatric patients, …
and 7 and does not like to work late. She did part of an
introductory in-house computer course some years ago, but it • probe packs
was interrupted when she was promoted and could no longer
– items to prompt responses
afford to take the time. Her vision is perfect, but her right-hand
movement is slightly restricted following an industrial accident 3 • e.g. glass to listen at wall, camera, postcard
years ago. She is enthusiastic about her work and is happy to – given to people to open in their own environment
delegate responsibility and take suggestions from her staff. they record what is meaningful to them
However, she does feel threatened by the introduction of yet
another new computer system (the third in her time at SBE). • used to …
– inform interviews, prompt ideas, enculture designers

3
 scenarios

• stories for design

scenarios – communicate with others
– validate other models
– understand dynamics
stories for design
• linearity
use and reuse
– time is linear - our lives are linear
– but don’t show alternatives

scenarios … scenario – movie player

• what will users want to do? 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
• step-by-step walkthrough and so connects to one of the movie sharing networks. He uses
his work machine as it has a higher bandwidth connection, but
– what can they see (sketches, screen shots) feels a bit guilty. He knows he will be getting an illegal copy of
– what do they do (keyboard, mouse etc.) 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
– what are they thinking? out his new personal movie player. He presses the ‘menu’
button and on the small LCD screen he scrolls using the arrow
• use and reuse throughout design 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
indicator and small whirling icon. … … …

also play act … … explore the depths

• mock up device • explore interaction

• pretend you are doing it – what happens when
• internet-connected swiss army knife …
• explore cognition
but where is that thumb?
– what are the users thinking

• explore architecture
– what is happening inside

use toothpick as stylus

4
use scenarios to .. linearity

• communicate with others Scenarios – one linear path through system

– designers, clients, users
• validate other models
– ‘play’ it against other models
• express dynamics
Pros:
– life and time are linear
– easy to understand (stories and narrative are natural)
– concrete (errors less likely)
Cons:
– no choice, no branches, no special conditions
– miss the unintended

– screenshots – appearance • So:

– use several scenarios
– scenario – behaviour – use several methods

the systems

info and help management messages

start

navigation design
add user remove user

local structure – single screen

global structure – whole site
main remove
confirm
screen user

add user

levels the web …

• widget choice • widget choice • elements and tags

– menus, buttons etc. – <a href=“...”>

• screen design • screen design • page design

• application navigation design • navigation design • site structure
• environment • environment • the web, browser,
– other apps, O/S external links

5
physical devices think about structure

• widget choice • controls • within a screen

– buttons, knobs, dials – later ...
• screen design • physical layout • local
– looking from this screen out
• navigation design • modes of device
• global
• environment • the real world – structure of site, movement between
screens
• wider still
– relationship with other applications

goal seeking

local
goal
start
from one screen looking out

goal seeking goal seeking

goal goal
start start

progress with local knowledge only ... … but can get to the goal

6
 goal seeking four golden rules

• knowing where you are

• knowing what you can do
goal
• knowing where you are going
start
– or what will happen
• knowing where you’ve been
– or what you’ve done
… try to avoid these bits!

where you are – breadcrumbs beware the big button trap

shows path through web site hierarchy things other things

top level category sub-category

web site this page

the thing from

more things
outer space

live links • where do they go?

to higher – lots of room for extra text!
levels

modes

• lock to prevent accidental use … global

– remove lock - ‘c’ + ‘yes’ to confirm
– frequent practiced action
• if lock forgotten between screens
– in pocket ‘yes’ gets pressed
– goes to phone book
within the application
– in phone book …
‘c’ – delete entry
‘yes’ – confirm
… oops !

7
hierarchical diagrams hierarchical diagrams ctd.

the system • parts of application

– screens or groups of screens

• typically functional separation

info and help management messages the systems

info and help management messages

add user remove user add user remove user

navigating hierarchies think about dialogue

• deep is difficult! what does it mean in UI design?

• misuse of Miller’s 7 ± 2 Minister: do you name take this woman …

– short term memory, not menu size Man: I do
Minister: do you name take this man …
Woman: I do
• optimal?
Minister: I now pronounce you man and wife
– many items on each screen
– but structured within screen

see /e3/online/menu-breadth/

think about dialogue network diagrams

what does it mean in UI design?

main remove
confirm
Minister: do you name take this woman … screen user

• marriage service
• general flow, generic – blanks for names add user
• pattern of interaction between people
• computer dialogue
• pattern of interaction between users and system
• but details differ each time • show different paths through system

8
network diagrams ctd.

• what leads to what

wider still
• what happens when
• including branches
between applications
• more task oriented then hierarchy and beyond ...
main remove
confirm
screen user

add user

wider still …

• style issues:
– platform standards, consistency
• functional issues
– cut and paste
• navigation issues
– embedded applications
– links to other apps … the web

Dix , Alan
Finlay, Janet

Abowd, Gregory
Beale, Russell
basic principles

• ask
screen design and layout – what is the user doing?

• think
– what information, comparisons, order
basic principles
grouping, structure, order • design
– form follows function
alignment
use of white space
ABCDEF
HIJKLM
NOPQRST UV WXYZ

9
available tools grouping and structure

• grouping of items logically together  physically together

• order of items Billing details: Delivery details:

• decoration - fonts, boxes etc. Name Name
Address: … Address: …
• alignment of items Credit card no Delivery time

• white space between items Order details:

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

order of groups and items decoration

• think! - what is natural order • use boxes to group logical items

• use fonts for emphasis, headings
• should match screen order! • but not too many!!
– use boxes, space etc.
– set up tabbing right!

• instructions
– beware the cake recipie syndrome!
… mix milk and flour, add the fruit
after beating them ABCDEF
HIJKLM
NOPQRSTUVWXYZ

alignment - text alignment - names

• you read from left to right (English and • Usually scanning for surnames
European)  make it easy!
 align left hand side
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
boring but
readable!
Alan Dix


Janet Finlay
Gregory Abowd
Dix , Alan
Finlay, Janet 

Xena - Warrior Princess Russell Beale Abowd, Gregory
Beale, Russell
Willy Wonka and the Chocolate Factory Alan Dix
Winston Churchill - A Biography Janet Finlay
Wizard of Oz Gregory Abowd
fine for special effects Xena - Warrior Princess Russell Beale
but hard to scan

10
alignment - numbers alignment - numbers

532.56 627.865
think purpose! visually:
179.3 1.005763
long number = big number
256.317 382.583
which is biggest? 15 align decimal points 2502.56
73.948 or right align integers 432.935
1035 2.0175
3.142 652.87
497.6256 56.34

multiple columns multiple columns - 2

• scanning across gaps hard: • use leaders

(often hard to avoid with large data base fields)

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

multiple columns - 3 multiple columns - 4

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

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

11
white space - the counter white space - the counter

WHAT YOU SEE WHAT YOU SEE

THE GAPS BETWEEN

space to separate space to structure

space to highlight physical controls

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

12
physical controls physical controls

• grouping of items • grouping of items

• order of items • order of items
1)type
1) typeofofheating
heating • decoration
1
2)temperature
2) temperature
–different
differentcolours
coloursfor
3) time to cook for different functions
3) time to cook different functions
4) start 2 – lines around related
4) start lines around related
3 buttons(temp up/down)
buttons

physical controls physical controls

• grouping of items • grouping of items

• order of items • order of items
• decoration • decoration
• alignment • alignment
– centered text in buttons • white space
centred text in buttons
? easy to scan ?
? easy to scan ? – gaps to aid grouping
gaps to aid grouping

user action and control

entering information
knowing what to do
affordances

13
entering information knowing what to do
Name: Alan Dix
Address: Lancaster
• forms, dialogue boxes • what is active what is passive

– presentation + data input
– where do you click
– similar layout issues Name: Alan Dix
– alignment - N.B. different label lengths Address: Lancaster – where do you type
• consistent style helps
• logical layout
– use task analysis (ch15)
– groupings
?
Name: Alan Dix
Address: Lancaster
– e.g. web underlined links
• labels and icons
– natural order for entering information
– standards for common actions
• top-bottom, left-right (depending on culture)
• set tab order for keyboard entry – language – bold = current state or action

N.B. see extra slides for widget choice

affordances
mug handle
• psychological term
‘affords’
• for physical objects
appropriate appearance
grasping
– shape and size suggest actions
• pick up, twist, throw
– also cultural – buttons ‘afford’ pushing
• for screen objects
– button–like object ‘affords’ mouse click presenting information
– physical-like objects suggest use aesthetics and utility
• culture of computer use
– icons ‘afford’ clicking
colour and 3D
– or even double clicking … not like real buttons! localisation & internationalisation

presenting information aesthetics and utility

• purpose matters name size • aesthetically pleasing designs

– sort order (which column, numeric alphabetic) chap10
chap1 17
12 – increase user satisfaction and improve productivity
– text vs. diagram chap10
chap5 12
16
• beauty and utility may conflict
chap11
chap1 51
17
– scatter graph vs. histogram chap12
chap14 262
22 – mixed up visual styles
easy to distinguish
chap13
chap20 83
27
– clean design – little differentiation
confusing
• use paper presentation principles! chap14
chap8 22
32
…… … – backgrounds behind text
… good to look at, but hard to read
• but add interactivity
– softens design choices
• but can work together
• e.g. re-ordering columns – e.g. the design of the counter
• ‘dancing histograms’ (chap 21) – in consumer products – key differentiator (e.g. iMac)

14
colour and 3D bad use of colour

• both often used very badly! • over use - without very good reason (e.g. kids’ site)
• colour • colour blindness
– older monitors limited palette
– colour over used because ‘it is there’ • poor use of contrast
– beware colour blind! • do adjust your set!
– use sparingly to reinforce other information
– adjust your monitor to greys only
• 3D effects – can you still read your screen?
– good for physical information and some graphs
– but if over used …
e.g. text in perspective!! 3D pie charts

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



prototyping iteration and prototyping

getting better …
… and starting well

15
prototyping pitfalls of prototyping

• you never get it right first time

• moving little by little … but to where
• if at first you don’t succeed …
• Malverns or the Matterhorn?

OK?
design prototype evaluate done!

re-design
1. need a good start point
2. need to understand what is wrong

16