IAS2223
Human Computer Interaction
Topic 2
Interaction Design Basic
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 artefacts
not just the system, but also …
documentation, manuals, tutorials
what we say and do as well as what we make
what is design?
achieving goals within constraints
goals - purpose
who is it for, why do they want it
constraints
materials, platforms
trade-offs
golden rule of design
understand your materials
for Human–Computer Interaction
understand your materials
understand computers
limitations, capacities, tools, platforms
understand people
psychological, social aspects
human error
and their interaction …
The process of design
scenarios
what is task analysis
wanted guidelines
principles
interviews analysis precise
ethnography specification
design
what is there
vs. dialogue implement
what is wanted notations and deploy
evaluation
prototype
heuristics architectures
documentation
help
Steps …
requirements
what is there and what is wanted …
analysis
ordering and understanding
design
what to do and how to decide
iteration and prototyping
getting it right … and finding what is really needed!
implementation and deployment
making it and getting it out there
… but how can I do it all ! !
limited time design trade-off
usability?
finding problems and fixing them?
deciding what to fix?
a perfect system is badly designed
too good too much effort in design
user focus
know your user
personae
cultural probes
know your user
who are they?
probably not like you!
talk to them
watch them
use your imagination
persona
description of an ‘example’ user
not necessarily a real person
use as surrogate user
what would user think
details matter
makes it ‘real’
example persona
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).
scenarios
stories for design
use and reuse
scenarios …
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
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 indicator and small whirling icon.
… … …
… explore the depths
explore interaction
what happens when
explore cognition
what are the users thinking
explore architecture
what is happening inside
use scenarios to ..
communicate with others
designers, clients, users
validate other models
‘play’ it against other models
express dynamics
screenshots – appearance
scenario – behaviour
the systems
navigation design info and help management messages
add user remove user
local structure – single screen
global structure – whole site
main remove
confirm
screen user
start
add user
Interact at several levels:
widget choice
menus, buttons etc.
screen design
application navigation design
environment
other apps, O/S
think about structure
within a screen
later ...
local
looking from this screen out
global
structure of site, movement between screens
wider still
relationship with other applications
Local structure
from one screen looking out
goal seeking
goal
start
goal seeking
goal
start
progress with local knowledge only ...
goal seeking
goal
start
… but can get to the goal
goal seeking
goal
start
… try to avoid these bits!
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
where you are – breadcrumbs
shows path through web site hierarchy
top level category sub-category
web site this page
live links
to higher
levels
Global structure
between screens
within the application
hierarchical diagrams
the system
info and help management messages
add user remove user
hierarchical diagrams ctd.
parts of application
screens or groups of screens
typically functional separation
the systems
info and help management messages
add user remove user
network diagrams
main remove
confirm
screen user
add user
show different paths through system
network diagrams ctd.
what leads to what
what happens when
including branches
more task oriented then hierarchy
main remove
confirm
screen user
add user
screen design and
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
layout
basic principles
grouping, structure, order
alignment
use of white space
ABCDEFHIJKLM
NOPQRSTUVWXYZ
basic principles
ask
what is the user doing?
think
what information, comparisons, order
design
form follows function
available tools for layout
grouping of items
order of items
decoration - fonts, boxes etc.
alignment of items
white space between items
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
…… … … …
decoration
use boxes to group logical items
use fonts for emphasis, headings
but not too many!!
ABCDEFHIJKLM
NOPQRSTUVWXYZ
alignment - text
you read from left to right (English and European)
align left hand side
Willy Wonka and the Chocolate Factory
boring but
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
alignment - names
Usually scanning for surnames
make it easy!
Alan Dix
Janet Finlay
Gregory Abowd
Dix , Alan
Finlay, Janet
Russell Beale Abowd, Gregory
Beale, Russell
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
alignment - numbers
think purpose! 532.56
179.3
256.317
which is biggest?
15
73.948
1035
3.142
497.6256
alignment - numbers
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
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
multiple columns - 2
use leaders
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care!) ‘bad’ alignment
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
white space - the counter
WHAT YOU SEE
white space - the counter
WHAT YOU SEE
THE GAPS BETWEEN
space to separate
space to structure
space to highlight
physical controls
grouping of items
defrostsettings
defrost settings
type
typeof
offood
food
time
timetotocook
cook
physical controls
grouping of items
order of items
type
1) 1)type of of heating
heating
1
temperature
2) 2)temperature
3) time to cook
3) time to cook
4) start 2
4) start
3
4
physical controls
grouping of items
order of items
decoration
different colours
different colours for
for different
different functions
functions
lines around related
lines around related
buttons
buttons (temp up/down)
physical controls
grouping of items
order of items
decoration
alignment
centered text in buttons
centred text in buttons
? easy to scan ?
? easy to scan ?
physical controls
grouping of items
order of items
decoration
alignment
white space
gaps to aid grouping
gaps to aid grouping
user action and
control
entering information
knowing what to do
affordances
entering information
Name: Alan Dix
forms, dialogue boxes Address: Lancaster
presentation + data input
similar layout issues
alignment
Name: Alan Dix
Address: Lancaster
?
logical layout
use task analysis (ch15) Name: Alan Dix
Address: Lancaster
groupings
natural order for entering information
top-bottom, left-right (depending on culture)
set tab order for keyboard entry
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
affordances
mug handle
psychological term
for physical objects ‘affords’
shape and size suggest actions grasping
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!
appropriate
appearance
presenting information
aesthetics and utility
colour and 3D
localisation & internationalisation
presenting information
purpose matters
name size
sort order (which column, numeric alphabetic)
chap10
chap1 17
12
text vs. diagram chap10
chap5 12
16
scatter graph vs. histogram chap11
chap1 51
17
chap12
chap14 262
22
chap13
chap20 83
27
use paper presentation principles! chap14
chap8 22
32
…… …
but add interactivity
softens design choices
e.g. re-ordering columns
‘dancing histograms’ (chap 21)
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)
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
bad use of colour
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?
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
