Lecture
Interaction Design
Basics– Part II
Today’s Outline
Basic principles
Grouping, structure, order
Alignment
Use of white space
Introduction
In previous sessions we have seen to
make system interactive but not about how
we put them together.
A single screen image often has to present
information clearly and also act as the locus
for interacting with the system.
This is a complex area, involving some of the
psychological understanding of interactivity as
well as aspects of graphical design.
Basic principles of design
ask
what is the user doing?
think
what information, comparisons, order
design
form follows function
Tools for layout
We have a number of visual tools
available to help us suggest to the user
appropriate ways to read and interact with
a screen or device.
Available tools
grouping of items
order of items
decoration - fonts, boxes etc.
alignment of items
white space between items
Grouping and structure
If things logically belong together, then we
should normally physically group them
together. This may involve multiple levels
of structure.
For example, in the Figure in next slide we can see a
potential design for an ordering screen. Notice how
the details for billing and delivery are grouped
together spatially; also note how they are separated
from the list of items actually ordered by a line as well
as spatially.
Grouping and structure
This reflects the following logical 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
…… … … …
Figure: Grouping of related items
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
Decoration
We can see how the design uses boxes
and a separating line to make the grouping
clear. Other decorative features like font
style, and text or background colors can
be used to emphasize groupings.
Example – A microwave control panel
Decoration of different buttons in single layout
Decoration
use boxes to group logical items
use fonts for emphasis, headings
but not too many!!
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
Alignment - text
you read from left to right (English and European)
align left hand side
boring but
Willy Wonka and the Chocolate Factory readable!
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
fine for special effects but hard Wizard of Oz
to scan Xena - Warrior Princess
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
which is biggest? 256.317
15
73.948
1035
3.142
497.6256
Alignment - numbers
visually:
627.865
long number = big number
1.005763
align decimal points 382.583
or right align integers 2502.56
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
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.
White space - the counter
WHAT YOU SEE
THE GAPS BETWEEN
White Space
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.
If one ignores the ‘content’ of a screen and
instead concentrates on the counter – the
space between the elements – one can get an
overall feel for the layout.
White Space
If elements that are supposed to be
related look separate when you focus on
the counter, then something is wrong.
Screwing up your eyes so that the screen
becomes slightly blurred is another good
technique for taking your attention away from
the content and looking instead at the broad
structure.
Space to separate
space to structure
Space to highlight
White Space Animation
We covered so far: Physical controls
grouping of items
defrost settings
defrost
type settings
of food
typetoofcook
time food
time to cook
Physical controls
grouping of items
order of items
1) type of heating
1
2) temperature
3) time to cook
2
4) start
3
4
Physical controls
grouping of items
order of items
decoration
different colours for different
functions
lines around related
buttons (temp up/down)
Physical controls
grouping of items
order of items
decoration
alignment
centered text in buttons
easy to scan ?
physical controls
grouping of items
order of items
decoration
alignment
white space
(gaps to aid grouping)
User action and control
enteringinformation
knowing what to do
affordances
Entering Information
Some of the most complicated and difficult
screen layouts are found in forms-based
interfaces and dialog boxes is to design for
entering information.
In each case the screen consists not only
of information presented to the user, but
also of places for the user to enter
information or select options.
Entering information
Name: Alan Dix
forms, dialogue boxes Address: Lancaster
presentation + data input
similar layout issues
alignment - N.B. different label lengths
Name: Alan Dix
Address: Lancaster
?
logical layout
use task analysis Name: Alan Dix
groupings Address: Lancaster
natural order for entering information
top-bottom, left-right (depending on culture)
set tab order for keyboard entry
Knowing what to do
Some elements of a screen are passive,
simply giving you information; others are
active, expecting you to fill them in, or do
something to them.
It is often not even clear which elements
are active, let alone what the effect is likely
to be when you interact with them!
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
These are especially difficult problems in
multimedia applications where one may
deliberately adopt a non-standard and
avant-garde style.
How are users supposed to know where to
click?
The psychological idea of affordance says
that things may suggest by their shape
and other attributes what you can do to
them.
Affordances
psychological term mug handle
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
sort order (which column, numeric alphabetic) name size
text vs. diagram chap10
chap1 17
12
scatter graph vs. histogram chap10
chap5 12
16
chap11
chap1 51
17
chap12
chap14 262
22
use paper presentation principles! chap13
chap20 83
27
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!
adjustyour monitor to greys only
can you still read your screen?
Grey
Cross 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
A prototype is an early sample, model, or
release of a product built to test a concept or
process or to act as a thing to be replicated
or learned from. It is a term used in a variety
of contexts, including semantics, design,
electronics, and software programming. A
prototype is designed to test and trial a new
design to enhance precision by system
analysts and users. Prototyping serves to
provide specifications for a real, working
system rather than a theoretical one. In some
workflow models, creating a prototype (a
process sometimes called materialization)
is the step between the formalization and
the evaluation of an idea.
Iteration and Prototyping
Because human situations are complex
and designers are not infallible it is likely
that our first design will not be perfect! For
this reason, almost all interaction design
includes some form of iteration of ideas.
This often starts early on with paper designs
and storyboards being demonstrated to
colleagues and potential users.
Iteration and Prototyping
Later in the design process one might use
mockups of physical devices or tools such
as Shockwave or Visual Basic to create
prototype versions of software.
Iteration and prototyping
getting better …
and starting well...
Prototyping
you never get it right first time
if at first you don’t succeed …
OK?
design prototype evaluate done!
re-design
Formative Vs Summative
Any of these prototypes, whether paper-based
or running software, can then be evaluated to
see whether they are acceptable and where
there is room for improvement.
This sort of evaluation, intended to improve designs,
is called formative evaluation.
This is in contrast to summative evaluation, which is
performed at the end to verify whether the product is
good enough.
Pitfalls of prototyping
moving little by little … but to where
Malverns or the Matterhorn?
1. need a good start point
2. need to understand what is wrong
Design
A really good designer might guess a good
initial design based on experience and
judgment. However, the complexity of
interaction design problems means that
this insight is hard.
Another approach, very common in
graphical design, is to have several initial
design ideas and drop them one by one as
they are developed further.
Summary
We have seen that design in HCI is not
just about creating devices or software,
but instead is about the whole interaction
between people, software and their
environment.
Because of this it is good to see the
product of design not just as the obvious
artifacts but as the whole intervention that
changes the existing situation to a new
one.
