Interaction Design
Basics– Part II
Introduction
Major Focus: User and Material
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
A number of visual tools available to help us suggest to
the user appropriate ways to read and interact with a
screen or device.
Screen, Design and Layout: 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
382.583
2502.56
align decimal points
432.935
or right align integers 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
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
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 name size
order (which column, numeric alphabetic)
text vs. diagram chap10
chap1 17
12
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’
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
oldermonitors 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.
Interaction Design
The goal of interaction design is to create products that
enable the user to achieve their objective(s) in the best
way possible.
Interaction designers are responsible for creating every
element on a screen that a user might interact with,
whether through clicking, swiping, tapping, or some sort
of action.
The five dimensions of interaction design serve as a
helpful model to understand what it involves.
5D Interaction Design Model
1D: Words
2D: Visual representations
3D: Physical objects or space
4D: Time
5D: Behaviour
Examples of Mobile Apps and Web Apps
[Link]
[Link]
[Link]
[Link]
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.