Interaction Design

Basics
ITEC 101 -HUMAN COMPUTER INTERACTION
Second Semester, A.Y. 2022 2023
Rachel O. Rodriguez
Introduction

● Some of HCI is focused on understanding: the

academic study of the way people interact with
technology. However, a large part of HCI is about
doing things and making things – design.
What is design?

● So what is design? A simple definition is:

“achieving goals within constraints”

What is design?

● This does not capture everything about design, but

helps to focus us on certain things:
1. 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
the experience with a few friends.
What is design?
2. 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?

Of course, we cannot always achieve all our goals within the constraints. So
perhaps one of the most important things about design is:
3. Trade-off Choosing which goals or constraints can be relaxed so that
others can be met. For example, we might find that an eye-mounted
video display, a bit like those used in virtual reality, would give the most
stable image whilst walking along. However, this would not allow you to
show friends, and might be dangerous if you were watching a gripping
part of the movie as you crossed the road.
The golden rule of design

● The designs we produce may be different, but often

the raw materials are the same. This leads us to the
golden rule of design:

“understand your materials”

The central message – the user

● 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.
The process of design
● A simplified view of four main phases plus an iteration
loop, focused on the design of interaction.

Interaction design process

The process of design

1. 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?
2. Analysis – 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.
The process of design

3. Design – This is all about design, but there is a

central stage when you move from what you want, to
how to do it.
4. Iteration and prototyping – Humans are complex
and we cannot expect to get designs right first time.
We therefore need to evaluate a design to see how
well it is working and where there can be
improvements.
The process of design
3. Design – This is all about design, but there is a central
stage when you move from what you want, to how to do
it.
4. Iteration and prototyping – Humans are complex and
we cannot expect to get designs right first time. We
therefore need to evaluate a design to see how well it is
working and where there can be improvements.
5. 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

● The start of any interaction design exercise must be

the intended user or users. This is often stated as:
“know your users”

● Over time many people are affected directly or

indirectly by a system and these people are called
stakeholders
User Focus

● So, how do you get to know your users?

1. 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?
2. 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.
User Focus

3. 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.
4. Watch them.
● Although what people tell you is of the utmost importance, it is not the
whole story.
Design Focus

● Use your imagination.

● Even if you would like to involve many users throughout your design
exercise this will not always be 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
involve actual users you can at least try to imagine their experiences.
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.
● Some scenarios are quite short: ‘the user intends to
press the “save” button, but accidentally presses the
“quit” button so loses his work’. Others are focused
more on describing the situation or context.
Scenarios
● In addition scenarios can be used to:
1. 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.
2. Validate other models A detailed scenario can be
‘played’ against various more formal
representations such as task models or dialog and
navigation models.
3. Express dynamics Individual screen shots and
pictures give you a sense of what a system would
look like, but not how it behaves.
Scenarios

● In addition scenarios can be used to:

4. Time is linear Our lives are linear as we live in
time and so we find it easier to understand simple
linear narratives. We are natural storytellers and
story listeners.
5. 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.
Navigation Design
● Imagine yourself using a word processor. You will be
doing this in some particular social and physical
setting, for a purpose. But now we are focusing on the
computer system itself.
● You interact at several levels:
1. 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.
2. Screens or windows
● You need to find things on the screen, understand the logical
grouping of buttons.
Navigation Design

3. 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.
4. Environment
● The word processor has to read documents from disk, perhaps some
are on remote networks. You swap between applications, perhaps cut
and paste.
Navigation Design
● 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 issue:

● local structure
● looking from one screen or page out
● global structure
● structure of site, movement between screens.
Screen Design and Layout
● A single screen image often has to present information
clearly and also act as the locus for interacting with the
system

● The basic principles at the screen level reflect those in

other areas of interaction design:
1. Ask What is the user doing?
2. Think What information is required? What
comparisons may the user need to make? In what
order are things likely to be needed?
3. 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. Grouping and structure
Tools for layout
2. Order of groups and items

3. Decoration
See how the buttons differ in using the
foreground and background colors (green and
gold) so that groups are associated with one
another. See also how the buttons are laid out
to separate them into groups of similar function.
Tools for layout

4. Alignment

5. White space
User action and control

1. 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. Actually,
many of the same layout issues for data presentation also apply to
fields for data entry. Alignment is still important.
2. 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!
User action and control

3. 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

1. Presenting information
● The way of presenting information on screen depends on the kind of
information: text, numbers, maps, tables; on the technology available
to present it: character display, line drawing, graphics, virtual reality;
and, most important of all, on the purpose for which it is being used.
2. 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.
Appropriate appearance

3. Making a mess of it: color and 3D

● One of the worst features in many interfaces is their 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.
4. Localization / internationalization
● If you are working in a different country, you might 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.
Iteration and Prototyping
● Iteration and prototyping are the universally accepted
‘best practice’ approach for interaction design. However,
there are some major pitfalls of prototyping, rarely
acknowledged in the literature.
● 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 hill top. This is exactly how iterative prototyping works:
● you start somewhere,
● evaluate it to see how to make it better,
● change it to make it better and then
● keep on doing this until it can’t get any better.