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
256.317
which is biggest?
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
groupings
natural order for entering information
?
Name: Alan Dix
Address: Lancaster

 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
 standardsfor 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 12
17
 scatter graph vs. histogram chap10
chap5 16
12
chap11
chap1 17
51
chap12
chap14 262
22
 use paper presentation principles! chap13
chap20 27
83
chap14
chap8 32
22
…… …
 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.