CSM 357

Human-Computer Interaction
lecture 4: Interaction Design

R O S E - M A RY O W U S U A A M E N S A H G Y E N I N G
 Overview
In this chapter we will think about interaction design.
Note that we are not just thinking about the design of interactive systems, but
about the interaction itself.
Scenario
An office has just got a new electric stapler. It is connected to the mains electricity
and is hard to move around, so when you want to staple papers together you go to the
stapler. In the past when someone wanted to staple things they would take the stapler
to their desk and keep it until someone else wanted it. You might write a letter, print
it, staple it, write the next letter, staple it, and so on. Now you have to take the letters
to be stapled across the office, so instead you write–print, write–print until you have
a pile of things to staple and then take them across. The stapler influences the whole
pattern of interaction
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 2
 Interaction Design

So, interaction design is not just about the artifact that is produced, whether a physical
device or a computer program, but about understanding and choosing how that is going
to affect the way people work.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 3

 The golden rule of design
For Human–Computer Interaction, the obvious materials are the human and the
computer.
That is we must:
understand computers
– limitations, capacities, tools, platforms

understand people
– psychological, social aspects, human error.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 4

Common Design Processes
 A design process is a systematic series of steps that
 designers follow to arrive at a solution to a problem
 • The aim is to create a digital product that effectively
 meets user needs and preferences.
 Common design processes in HCI
Design Thinking Process
UI Design Process
User-Centered Design Process
Usability Engineering Lifecycle

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 5

 The process of design
Often HCI professionals complain that they are called in too late.
A system has been designed and built, and only when it proves unusable do
they think to ask how to do it right!

In some companies, people “assume” usability is 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.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 6

Interaction Design Process

Figure 1: Interaction Design process

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 7

 : Requirement Analysis and
Interaction Design Process

Specification (Stage 1)
Generally, each iteration of the interaction design approach involves four distinct
phases.
First, designers working in teams try to understand the context in which users may
use a system.
Then, they identify and specify the users’ requirements
In most cases, the user requirements cannot all be fixed at the beginning of the
project.
You have to be prepared to identify new requirements and to refine or reject
the existing ones throughout the design process.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 8

Interaction Design Process : Requirement Analysis and Specification
In interaction design, the user and organizational requirements should:
◦ define the range of relevant users;
◦ set user centered design goals;
◦ define priorities of the different requirements;
◦ provide measurable usability criteria;
◦ be confirmed by the users or their representatives;
◦ include statutory or legislative requirements;
◦ be adequately documented;
◦ be a working document, which will be updated throughout the design
process (a design rationale).
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 9
 : Commonly used methods and tools
Requirement Analysis and Specification

The following methods present different ways of collecting information on the

users and the context of use which can be useful in defining initial user
requirements.
Interviews: Interviewing is still the most widely used method of learning about
the users and what they want. There are 3 types of interviews: unstructured
interviews, semi structured interviews and structured interviews.

Observation: Observation is a method where an investigator views users as they

work and takes notes on the activities that take place. Observation may be either
direct, where the investigator is actually present during the task, or indirect, where
the task is viewed by some other means such as video.
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 10
Requirement Analysis and Specification: Commonly used methods and
tools
Contextual Inquiry: Contextual Inquiry is based on ethnography and the
sociological research tradition where the researcher/observer visits the
users’ own environment. The observer not only observes the user but also
asks questions about events that are not obvious as such.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 11

 : Commonly used methods and tools
Requirement Analysis and Specification

Brainstorming: The idea of brainstorming is to let people come together and

inspire to generate new ideas by opening the mind to any idea that is suggested,
allowing freedom for creativity. Brainstorming can be used for rapid generation of
ideas or identification of problems in a specific domain.

Evaluation of the usage of corresponding products: Sometimes a good source

of information for user requirements is the evaluation of previous products. By
studying how people deal with these products you can identify problems with
current solutions, needs for new features and ideas for further development. The
evaluation can be carried out, e.g., as usability testing in laboratory

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 12

 User Focus
 Over time, many people are affected directly or indirectly by a system and these
people are called stakeholders. So, how do you get to know your users? Who
are they?
 the first thing to find out is who your users are.
 Are they young or old, experienced computer users or novices? Sometimes it
may not be obvious who the users are
 This question becomes harder to answer if you are designing generic software,
such as a word processor, as there are many different users with different purposes
and characteristics.
 A similar problem arises with many websites where the potential visitors are far
from homogenous.
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 13
 User Focus: Talk to Users
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.

By involving users throughout the design process, it is possible to get a deep

knowledge of their work context and needs.

The obvious effect of this is that it produces better designs.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 14

 User Focus: Watch the Users
Although what people tell you is of the utmost importance, it is not the whole
story.
Because of this, it is important to watch what people do as well as hear what they
say.
This may involve sitting and taking notes of how they spend a day, watching
particular activities, using a video camera or tape recorder.

It can be done in an informal manner or using developed methods such as

ethnography or contextual inquiry

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 15

 User 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.
this is very dangerous! It would be easy to think, ‘if I were a warehouse
manager I would do this’. The issue is not what you would do in the user’s
shoes but what they would do.
This requires almost a kind of acting
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 16
 User Focus: Use your imagination
(Personas)
Imagine being a warehouse manager. What does the word ‘undo’ in the menu
mean to him?
One method that has been quite successful in helping design teams
produce user-focused designs is the persona.
A persona is a rich picture of an imaginary person who represents your core
user group.
A design team will have several of these personae covering different types of
intended users and different roles.
The personae will themselves be based on studies of actual users, observation,
etc.
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 17
 Stage 2 of Interaction Design Process : 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.
 Task models can be used at this stage
 Task models are a means to capture how people carry out the various tasks that are
part of their work and life.
 Scenarios can also be used at the analysis stage
 scenarios, rich stories of interaction, which can be used in conjunction with a
method like task analysis or on their own to record and make vivid actual interaction.
 These techniques can be used both to represent the situation as it is and also the
desired situation.
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 18
Design
Participatory Design
 • Involving actual users in design process, participatory design sessions
can be invaluable for generating ideas that are closely aligned with user
needs and expectations.
 • Users contribute their experiences and ideas, which are then integrated
into design process.
 • This ensures that end product aligns closely with actual needs and
preferences of users.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 20

Sketching and Storyboarding
 Drawing sketches and storyboards helps in visualizing ideas and
concepts.
 Useful in early stages of design to explore different scenarios, user
experiences, and interactions.
 Use to explore all the possible ways you could render your idea in
interface form.
 Note, a wireframe is one step beyond basic sketch.
 In a wireframe you start thinking about placement of UI elements,
element hierarchy and size.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 21

Wireframes and Mockups
 • Wireframes are basic layouts that outline the size and placement of page
elements, features, and navigation for an interface.
 • They are crucial for visualizing the structure and functionality of a
system before detailed design.
 • More detailed than wireframes, mockups provide a visual
representation of the design with colors, graphics, and typography but are
usually not interactive.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 22

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 23
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 24
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 25
 Design Issues

Do you understand
the scenario on this
slide?

What do you think

can be done to
prevent accidental
deletes?

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 26

 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. This is a complex area, involving
some of the psychological understanding of users
The basic principles at the screen level design comprise the following:
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.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 27

 Navigation Design
The place to start when considering the structure of an application is to think about actual use:

1. who is going to use the application?

2. how do they think about it?
3. what will they do with it?

This can then drive the second task – thinking about structure.
Here we will consider two main kinds of issue:

i. local structure: looking from one screen or page

ii. global structure: structure of site, movement between screens.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 28

 : Local Structure
Navigation Design
Much of 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 want, pressing all the
right buttons and links.
However, in a world of partial knowledge users meander through the system.

At each point in the interaction, users should be able to make assessment of

whether they are getting closer to their (often partially formed) goal.
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 29
 : Local Structure (Avoid this!)
Navigation Design

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 30

 Navigation Design: Local Structure
To do this goal seeking, each state of the system or
each screen needs to give the user enough knowledge
of what to do to get closer to their goal.

The screen, web page or device displays should make

clear where you are in terms of the interaction or state
of the system.

Some websites show ‘bread crumbs’ at the top of the

screen, the path of titles showing where the page is in
the site

Breadcrumbs example

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 31

 Video group presentation

Breadcrumbs In Software (Desktop, mobile and web) Design: Examples, design

guidelines and Best Practices

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 32

 Navigation Design : Links
Some web pages are particularly bad in that it is unclear which images are pure
decoration and which are links to take you somewhere.

On the web, the standard underlined links make it clear which text is clickable and
which is not.
However, in order to improve the appearance of the page, many sites change the color
of links and may remove the underline too.
Be consistent
This is especially confusing if underline is then used as simple emphasis on words that
are not links!
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 33
 : Global structure – hierarchical
Navigation Design

organization
The overall structure of an application represents the way various screens, pages
or device states link to one another.

One way to organize a system is in some form of hierarchy.

This is typically organized along functional boundaries (that is, different kinds
of things), but may be organized by roles or user type

The hierarchy links screens, pages or states in logical groupings.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 34

 : Global structure – hierarchical
Navigation Design

organization
the system

info and help management messages

add user remove user

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 35

 Screen Design and Layout
If things logically belong together, then we should normally physically group them
together. This may involve multiple levels of structure.

For example, when collecting information from customers during a purchase order,
we can use multiple levels of structure as shown below.
Order Details:
Administrative information
◦ Billing details
◦ Delivery details
Order information
◦ Order line 1
◦ Order line 2
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 36
Order of groups and items

If we look at multiple levels structure on the previous slide again, we can see that
the screen seems to naturally suggest reading or filling in the billing details first,
followed by the delivery details, followed by the individual order items. Is this
the right order?
In general we need to think: what is the natural order for the user?

This should normally match the order form provided on a screen.

For data entry forms or dialog boxes we should also set up the order in which
the tab key moves between fields.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 37

 Decoration
looking at Figure 3, 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.
Figure 3: Grouping related items in
an order screen

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 38

 Decoration
design boxes and separating lines
can be used to make the grouping
clear.
Other decorative features like font
style, and text or background colors
can be used to emphasize groupings.
For example, the form shown below
uses multiple levels structure and
design boxes to group items under
renter, location and automobile

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 39

 Alignment
Alignment of lists is also very
important. For users who read text
from left to right, lists of text items
should normally be aligned to the
left.

Numbers, however, should normally

be aligned to the right (for integers)
or at the decimal point.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 40

 Dealing with multiple columns
Multiple column lists require more care.

Text columns have to be wide enough

for the largest item, which means you
can get large gaps between columns.

Figure 5: Dealing with multiple columns

Figure 5 shows an example of this (i), ( names on one column and numbers on another column)
and you can see how hard this makes it
for your eye to scan across the rows.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 41

 Dealing with multiple columns
There are several visual ways to deal with
the problems associated with figure 5 on
previous slide.
Examples of possible solutions:

(ii) ‘leaders’ – lines of dots linking the (iii) using soft tone colors behind
columns; and rows or columns.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 42

 White Spaces
In typography the space between the letters is The coloured areas represent
called the counter. continuous areas of text or graphics.
If one ignores the ‘content’ of a screen and instead In figure 6(i), we can see that,
concentrates on the counter (the space between space is used to separate blocks.
the elements), one can get an overall feel of the
layout.
If elements that are supposed to be related look
separate when you focus on the counter, then
something is wrong.
Space can be used in several ways. Some of Figure 6(i): space used to separate
these are shown in Figure 6 blocks
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 43
 White Spaces
Space can also be used to create (iii), we can see space used to
more complex structures. highlight. This is a technique used
frequently in magazines to highlight
In (ii) there are clearly four main
a quote or graphic
areas: ABC, D, E and F. Within
one of these are three further areas,
A, B and C, which themselves are
grouped as A on its own, followed
by B and C together.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 44

Recall the processes in interaction design

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 45

 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.

Later in the design process, one might use mockups of physical devices or
tools to create prototype versions of software.
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 46
Prototypes
 Description: Prototypes range from low-fidelity interactive models to
high-fidelity simulations of the final product. These tools allow designers
to create interactive versions of their ideas, testing functionality and user
flow.
 • Tools: Figma, Axure RP, Adobe XD,
 • Benefits: Provides a realistic representation of how the final UI will
work, enabling early testing of usability and interaction design.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 47

 Prototyping

Any of these prototypes, whether paper- Discussion: What are the

based or running software, can then be advantages and disadvantages of
evaluated to see whether they are acceptable prototyping
and where there is room for improvement.
The result of evaluating the system will
usually be a list of faults or problems and this
is followed by a redesign exercise, which is
then prototyped, evaluated . .
So iteration and prototyping are the
universally accepted ‘best practice’ approach
for interaction design

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 48

 Design Focus

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 49

 Colour and 3D

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 50

 Reading assignment

Color Guidelines
https://web.cs.wpi.edu/~dcb/courses/CS3041/Color-guidelines.html

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 51

 Assignment --- To be submitted via the
V-class
Read the scenario at
https://www.hcibook.com/e3/scenario/nuclear/

And use it to answer these questions. Submit on the v-class. Check online for the submission deadline

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 52

 Group presentation
Read the scenario at
https://www.hcibook.com/e3/scenario/nuclear/
and create a group video presentation addressing these two questions.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 53

 Approaches to prototyping
There are three main approaches to prototyping:

1. Throwaway

2. Incremental

3. evolutionary

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 54

 Throw-away prototyping
Throw-away: The prototype is built and
tested.
The design knowledge gained from this
exercise is used to build the final product,
but the actual prototype is discarded.

The Figure on this slide depicts the

procedure in using throw-away prototypes
to arrive at a final requirements
specification in order for the rest of the
design process to proceed.
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 55
 Incremental prototyping
Incremental: The final product is built as
separate components, one at a time.
There is one overall design for the final
system, but it is partitioned into
independent and smaller components.

The final product is then released as a series

of products, each subsequent release
including one more component.
This is depicted in the Figure on the slide
SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 56
 Evolutionary prototyping
Here the prototype is not discarded and serves as
the basis for the next iteration of design.

In this case, the actual system is seen as evolving

from a very limited initial version to its final release,
as depicted in the Figure.
Evolutionary prototyping also fits in well with the
modifications which must be made to the system
that arise during the operation and maintenance
activity in the life cycle.

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000). 57

 THANK YOU

SLIDES BASED ON DIX, ALAN, ET AL. "HUMAN-COMPUTER INTERACTION." (2000).

58