The Interaction Design Process

Overview

Interaction design is about creating interventions in

often complex situations using technology of many
kinds including PC software, the web, and physical
devices
WHAT IS DESIGN?

So what is design? A simple definition is: achieving

goals within constraints. This does not capture
everything about design, but helps to focus us on
certain things:
Goals – What is the purpose of the design we are intending to produce? Who
is it for? Why do they want it? For example, if we are designing a wireless
personal movie player, we may think about young affluent users wanting to
watch the latest movies whilst on the move and download free copies, and
perhaps wanting to share this with a few friends.
• Constraints – What materials must we use? What standards must we adopt?
How much can it cost? How much time do we have to develop it? Are there
health and safety issues? In the case of the personal movie player: does it
have to withstand rain? Must we use existing video standards to download
movies?
DO WE NEED TO BUILD IN
COPYRIGHT PROTECTION?
The Golden Rule of Design

The golden rule of design is a fundamental

principle that guides the design process and is
often stated as "design for others as you would
have them design for you."
The golden rule of design is a powerful tool for
creating effective and engaging designs, as it helps
designers to stay focused on the needs of the user and
to create products that are both functional and
aesthetically pleasing.
To Err is Human

"To err is human" is a common phrase that means making

mistakes is a natural and inevitable part of being human. This
phrase is often used to acknowledge and accept the fact that
everyone makes mistakes, and that it is important to be
forgiving and understanding of ourselves and others when
mistakes are made.
Additionally, the phrase "to err is human"
underscores the importance of designing with
empathy and understanding for the user.
The Central Message - The User

It is about attitude. Often it is said that the success of

the various methods used in HCI lies not in how good
they are, but in that they simply focus the mind of the
designer on the user. This is the core of interaction
design: put the user first, keep the user in the center
and remember the user at the end.
Designers must continually seek feedback and
iterate on their designs to ensure that they are
meeting the needs of the user.
The Process of Design

A system has been designed and built, and only when it

proves unusable do they think to ask how to do it right! In
other companies usability is seen as equivalent to testing
– checking whether people can use it and fixing
problems, rather than making sure they can from the
beginning. In the best companies, however, usability is
designed in from the start.
Requirements - What is wanted?

The first stage is establishing what exactly is needed.

As a precursor to this it is usually necessary to find out
what is currently happening. For example, how do
people currently watch movies? What sort of personal
appliances do they currently use?
The results of observation and interview need
to be ordered in some way to bring out key
issues and communicate with later stages of
design.
Design

Humans are complex and we cannot expect to get

designs right the first time. We, therefore, need to
evaluate a design to see how well it is working and
where there can be improvements.
Implementation and Deployment

Finally, when we are happy with our design we

need to create it and deploy it. This will involve
writing code, perhaps making hardware, writing
documentation and manuals – everything that
goes into a real system that can be given to others.
USER FOCUS
Know your users

So, how do you get to know your users?

• • who are they?
Of course, the first thing to find out is who your users are. Are they
young or old, experienced computer users or novices? As we saw
with the stock control system, it may not be obvious who the users
are, so you may need to ask this question again as you find out
more about the system and its context.
• • probably not like you!
When designing a system it is easy to design it as if
you were the main user: you assume your own
interests and abilities. So often you hear a designer say
“but it’s obvious what to do”. It may be obvious for her!
• • talk to them
It is hard to get yourself inside someone else’s head, so the best thing
is usually to ask them. This can take many forms: structured
interviews about their job or life, open-ended discussions, or bringing
the potential users fully into the design process. The last of these is
called participatory design. By involving users throughout the design
process it is possible to get a deep knowledge of their work context
and needs.
• • watch them
Although what people tell you is of the utmost importance, it is
not the whole story. When black-belt judo players are asked
how they throw an opponent, their explanations do not match
what they actually do. Think about walking – how do your legs
and arms move? It is harder than you would think!
• • use your imagination
Even if you would like to involve many users throughout your
design exercise it is not always possible. It may be too costly, it
may be hard to get time with them (e.g. hospital consultant), it
may be that there are just too many (e.g. the web). However,
even if you cannot use actual users you can at least try to
imagine what it is like for them.
SCENARIOS
Scenarios are stories for design: rich stories of
interaction. They are perhaps the simplest design
representation, but one of the most flexible and
powerful.
In addition, scenarios can be used to:
• communicate with others – other designers, clients, or users.
It is easy to misunderstand each other whilst discussing
abstract ideas. Concrete examples of use are far easier to
share.
• validate other models – A detailed scenario can be ‘played’
against various more formal representations such as task
models or dialogue and navigation models.
• express dynamics – Individual screenshots and pictures give you a sense of what
a system would look like, but not how it behaves.
• time is linear – Our lives are linear as we live in a time and so we find it easier to
understand simple linear narratives. We are natural storytellers and story listeners.
• but no alternatives – Real interactions have choices, some made by people, some
by systems. A simple scenario does not show these alternative paths. In particular,
it is easy to miss the unintended things a person may do. Scenarios are a resource
that can be used and reused throughout the design process: helping us see what is
wanted, suggesting how users will deal with the potential design, checking that
proposed implementations will work, and generating test cases for final evaluation.
NAVIGATION DESIGN

As we stressed, the object of design is not just a

computer system or device, but the socio-technical
intervention as a whole. However, as the design
progresses we come to a point where we do need
to consider these most tangible outputs of design.
You interact with at several levels:
• Widgets – The appropriate choice of widgets and wording
in menus and buttons will help you know how to use them
for a particular selection or action.
• Screens or windows – You need to find things on the
screen, and understand the logical grouping of buttons.
• Navigation within the application – You need to be able to
understand what will happen when a button is pressed, to
understand where you are in the interaction.
• Environment – The word processor has to read documents
from disk, perhaps some are on remote networks. You swap
between applications, perhaps cut and paste.
In this section we will look mainly at navigation design – that is the main screens or
modes within a system and how they interconnect. Just in case you haven’t already
got the idea, the place to start when considering the structure of an application is to
think about actual use:
⮚ Who is going to use the application?
⮚ How do they think about it?
⮚ What will they do with it?
This can then drive the second task – thinking about structure. Individual screens
or the layout of devices will have their own structure, but this is for the next section.
Here we will consider two main kinds of issues:
• Local structure
– Looking from one screen or page out
• Global structure
– Structure of site, movement between screens
Local Structure

Much of the interaction involves goal-seeking behavior.

Users have some idea of what they are after and a partial
model of the system. In an ideal world if users had perfect
knowledge of what they wanted and how the system worked
they could simply take the shortest path to what they
wanted, pressing all the right buttons and links. However, in
a world of partial knowledge users meander through the
system.
To get you started here are four things to look for when
looking at a single web page, screen, or state of a device.
⮚ 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
It is also important to know what you can do – what can
be pressed or clicked to go somewhere or do
something. Some web pages are particularly bad for
this as it is unclear which images are pure decoration
and which are links to take you somewhere.
Global Structure - Hierarchical Organization

We will now look at the overall structure of an

application. This is the way the various
screens, pages or device states link to one
another. One way to organize a system is in
some form of hierarchy.
Global Structure - Dialog

In a pure information system or static web site it may be

sufficient to have a fully hierarchical structure, perhaps with
next/previous links between items in the same group.
However, for any system that involves doing things,
constantly drilling down from one part of the hierarchy to
another is very frustrating. Usually there are ways of getting
more quickly from place to place.
Consider the following fragment from a marriage service:
A simple way is to use a network diagram showing the
principal states or screens linked together with arrows. This
can:

⮚ show what leads to what

⮚ show what happens when
⮚ include branches and loops
⮚ be more task oriented than a hierarchy
SCREEN DESIGN AND LAYOUT

A single-screen image often has to present

information clearly and also act as the focus for
interacting with the system. This is a complex area,
involving some psychological understanding as
well as aspects of graphical design.
The basic principles at the screen level reflect those in other
areas of interaction design:
• Ask – What is the user doing?
• Think – What information is required? What comparisons
may the user need to make? In what order are things likely to
be needed?
• Design – Form follows function: let the required interactions
drive the layout.
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.
1. Grids
2. Hierarchical Structures
3. Alignment
4. White space
5. Design Software
USER ACTION AND CONTROL

In interaction design, user action and control refer

to the ways in which users can interact with a
product or system and the degree to which they
have control over that interaction.
Here are some key principles related to user action and control:

Entering information
Some of the most complicated and difficult screen layouts
are found in forms based interfaces and dialog boxes. 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.
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.

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: a handle affords pulling or lifting; a button affords pushing.
APPROPRIATE APPEARANCE

Presenting information
The way of presenting information on the screen depends on the
kind of information: text, numbers, maps, tables; the technology
available to present it: character display, line drawing, graphics,
and virtual reality; and, most important of all, on the purpose for
which it is being used. Different purposes require different
representations.
Aesthetics and utility
Remember that a pretty interface is not necessarily a good
interface. Ideally, as with any well-designed item, an
interface should be aesthetically pleasing. Indeed, good
graphic design and attractive displays can increase users’
satisfaction and thus improve productivity.
Making a mess of it: color and 3D
One of the worst features in many interfaces is the
appalling use of color. This is partly because many
monitors only support a limited range of primary colors
and partly because, as with the overuse of different fonts
in word processors, the designer got carried away.
Localization/internationalization
If you travel to different countries, you frequently see a document
being word processed, where the text of the document and the file
names are in the local language, but all the menus and
instructions are still in English. The process of making software
suitable for different languages and cultures is called localization
or internationalization.
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.
Prototyping is an example of what is known as a hill-
climbing approach. Imagine you are standing
somewhere in the open countryside. You walk uphill
and keep going uphill as steeply as possible.
Eventually you will find yourself at a hilltop.