CMP 461 – FOUNDATIONS OF HUMAN-
COMPUTER INTERACTION (2 Units)
Module 3; Week 4
Topic: Interaction Design Basics
Prepared by: Dr. T. A. Olowookere
Disclaimer: Note that the Contents of this document derive from Textbooks and online
resources, suited for learning purposes and are not originally drafted by the Author.
Objective: To be able to design interactive systems that align with the practice and
principles of good interaction design.
What is Design?
“Design involves achieving goals within constraints and the trade-off between the two”.
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? A plan of the expected outcome. 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.
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:
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.
A design, therefore “is a plan or specification for achieving the goals of construction
of an object or system or for the implementation of an activity or process within a
constraint”, or “the result of that plan or specification in the form of a prototype,
product or process”.
Page 1 of 11
What Is App Design?
App design combines the user interface (UI) and user experience (UX). While UI lends
itself to the overall style of the app (including the colours, fonts, and general look and
feel), UX focuses on the actual functionality and usability.
A large number of users abandon an app after using it for the first time. Since users
are picky about which apps they use and so quick to abandon those they don’t enjoy,
it’s essential to invest time and effort in creating a great user experience. The better
the design, the better the chance that a user will engage with it and thus keep using it.
Interaction Design
For UX designers, “Interaction Design” is the axis on which our work revolves
(i.e., the design of human interaction with digital products); however, the term
also applies to understanding how people interact with non-digital products.
Definitions of Interaction Design
Interaction Design (IxD) is the practice of designing interactive digital products and
services in which a designer’s focus goes beyond the item in development to include
the way users will interact with it. Thus, close scrutiny of users’ needs, limitations
and contexts, etc. empowers designers to customize output to suit precise demands.
“Interaction Design is the creation of a dialogue between a person and a product,
system, or service. This dialogue is both physical and emotional in nature and is
manifested in the interplay between form, function, and technology as experienced
over time.” - John Kolko, Author of Thoughts on Interaction Design (2011)
John Thackara viewed it as “the why as well as the how of our daily interactions using
computers”, while Dan Saffer emphasized its artistic aspects: “the art of facilitating
interactions between humans through products and services”.
“Digital design is a conversation. This conversation happens between a machine
and a person who uses it. When people interact with a product, they love having
smooth interactions, but it only happens when interaction designers make things
right”. - Xd Adobe
Page 2 of 11
The Five Dimensions of IxD
Designers’ work in IxD involves five dimensions: words (1D), visual representations
(2D), physical objects/space (3D), time (4D), and behaviour (5D).
IxD’s five dimensions were first defined by a professor at London’s Royal College of
Art, Gillian Crampton Smith, and a senior interaction designer, Kevin Silver. The
dimensions represent the aspects an interaction designer considers when designing
interactions:
1D: Words.
Words encompass text, which helps convey the right amount of information to
users.
Words, especially those used in interactions, like button labels, should be
meaningful and simple to understand.
They should communicate information to users without overwhelming them
with too many details.
2D: Visual representations.
Visual representations (2D) are graphical elements that aid in user interaction.
Visual representations include typography, icons, and other graphics with
which users interact.
Visual representations usually supplement the words used to communicate
information to users.
3D: Physical objects or space.
Physical objects are a medium through which users interact with the product
or service.
For instance, a user interacts with computers and a mouse while sitting on a
desk in an office space, a laptop via a mouse, or a mobile phone via fingers.
4D: Time.
Time (4D) relates to media that changes with time, such as animations, videos
and sounds.
Time helps users understand visual changes in a UI;
It also helps users track their progress.
5D: Behaviour.
Behaviour (5D) is concerned with how the previous four dimensions define the
interactions a product afford
for instance, how users can perform actions on a website, or how users can
operate a car.
Behaviour includes both action and reaction.
Behaviour is what describes the mechanism of an interaction with a product.
Page 3 of 11
Behaviour also refers to how the product reacts to the users’ inputs and
provides feedback.
An Illustration:
Words (1D)
Visual representations (2D)
Page 4 of 11
Physical objects/space (3D)
Time (4D)
Behaviour (5D)
Page 5 of 11
Interaction designers utilize all five dimensions to consider the interactions between
a user and a product or service in a holistic way. Specifically, we use them to help
envision the real-world demands of a usership in relation to a design not yet
introduced. For example, designers of an app that must process data at high speed in
order to find results inside a mass-transit system (a subway/metro) will face
accommodating the constraints of underground commuters – cramped spaces, fast
journeys, dead zones, etc.
Page 6 of 11
Interaction design principles
While it’s impossible to list all of the principles of interaction design, it’s still possible
to describe a few general areas that are widely used in this field:
Goal-driven design
Goal-driven design is a design style that holds problem-solving as the highest priority.
This approach focuses on satisfying the specific needs and desires of a person who
will use the product, which is the goal of interaction design.
Good usability
Usability answers the question “can people use this product?” Good usability is a
fundamental requirement for interaction design. Learnability (how easily can a new
user learn to use the interface?), efficiency (how quickly can users perform tasks?),
error rate (how many errors do users make while interacting with UI?) as well as error-
recovery (how quickly can they recover from errors?) are four things that have a direct
impact on usability.
It’s possible to measure usability using task-completion time and overall satisfaction
(do users enjoy using the product).
When it comes to actual design decisions, interaction designers often familiarize
themselves with the user’s mental model – the perception or representation that a
person has in his mind of the product she is interacting with. The knowledge they gain
from the mental models helps them create UX design systems that feel intuitive.
Ergonomics
Interaction designers apply physiological principles to the design of products. The
goal of this process is to reduce human error, increase productivity, and enhance the
safety of interaction. Interaction designers often use a predictive model of human
movement, also known as Fitts’s law, when they design interactions. This law says
that the time required to rapidly move to a target area is a function of the ratio between
the distance to the target and the width of the target. Fitts’s law is used to model the
act of pointing. It can be applied both when the UI element is touched with a hand or
finger, or virtually, using a pointing device.
Positive emotional responses
Designers must create a design that influences positive emotional responses in users.
Interaction designers are aware of elements that influence user emotional responses.
Colour palettes, fonts, animations—all of them can trigger emotional responses.
Page 7 of 11
Design for people
When it comes to product design, it’s hard to design for an abstract user. Designers
should always evaluate their decision in the context of a particular user group.
Personas are a great tool for designers.
A persona encapsulates critical data about a user group in a way that designers can
understand and relate to. The emotional aspects influence designers to create better
product behaviour.
Design patterns
How do designers address interaction problems? They use patterns. A pattern is a
solution for a particular context. In many situations, designers can address new
problems through the modification of existing patterns. The goal of interaction design
is to create a solution that fits well in the context of use.
Usually, interaction designers start with well-known interface guidelines such as
Human Interface Guidelines by Apple and Material Design by Google. The guidelines
not only provide the patterns that are familiar for the users but also show how to use
them in specific contexts.
Design iterations
Designers can have multiple solutions for one particular interaction problem. The only
correct way to reduce the number of design options is to see how it works for real
users (validate it through testing). Not all assumptions about interaction design pass
the testing. Quite often, designers have to return to the drawing board to design an
alternative solution. That’s why interaction design is rarely linear, but an iterative
process.
Page 8 of 11
The Eight Golden Rules of Interface Design
1. Strive for consistency.
Consistent sequences of actions should be required in similar situations; identical
terminology should be used in prompts, menus, and help screens; and consistent
colour, layout, capitalization, fonts, and so on, should be employed throughout.
Exceptions, such as required confirmation of the delete command or no echoing of
passwords, should be comprehensible and limited in number
2. Seek universal usability.
Recognize the needs of diverse users and design for plasticity, facilitating
transformation of content. Novice to expert differences, age ranges, disabilities,
international variations, and technological diversity each enrich the spectrum of
requirements that guides design. Adding features for novices, such as explanations,
and features for experts, such as shortcuts and faster pacing, enriches the interface
design and improves perceived quality.
3. Offer informative feedback.
For every user action, there should be an interface feedback. For frequent and minor
actions, the response can be modest, whereas for infrequent and major actions, the
response should be more substantial. Visual presentation of the objects of interest
provides a convenient environment for showing changes explicitly.
4. Design dialogs to yield closure.
Sequences of actions should be organized into groups with a beginning, middle, and
end. Informative feedback at the completion of a group of actions gives users the
satisfaction of accomplishment, a sense of relief, a signal to drop contingency plans
from their minds, and an indicator to prepare for the next group of actions. For
example, e-commerce websites move users from selecting products to the checkout,
ending with a clear confirmation page that completes the transaction.
5. Prevent errors.
As much as possible, design the interface so that users cannot make serious errors; for
example, gray out menu items that are not appropriate and do not allow alphabetic
characters in numeric entry fields. If users make an error, the interface should offer
simple, constructive, and specific instructions for recovery. For example, users should
not have to retype an entire name-address form if they enter an invalid zip code but
Page 9 of 11
rather should be guided to repair only the faulty part. Erroneous actions should leave
the interface state unchanged, or the interface should give instructions about restoring
the state.
6. Permit easy reversal of actions.
As much as possible, actions should be reversible. This feature relieves anxiety, since
users know that errors can be undone, and encourages exploration of unfamiliar
options. The units of reversibility may be a single action, a data-entry task, or a
complete group of actions, such as entry of a name-address block.
7. Keep users in control.
Experienced users strongly desire the sense that they are in charge of the interface and
that the interface responds to their actions. They don’t want surprises or changes in
familiar behaviour, and they are annoyed by tedious data-entry sequences, difficulty
in obtaining necessary information, and inability to produce their desired result.
8. Reduce short-term memory load.
Humans’ limited capacity for information processing in short-term memory (the rule
of thumb is that people can remember “seven plus or minus two chunks” of
information) requires that designers avoid interfaces in which users must remember
information from one display and then use that information on another display. It
means that cellphones should not require reentry of phone numbers, website locations
should remain visible, and lengthy forms should be compacted to fit a single display.
These underlying principles must be interpreted, refined, and extended for each
environment. They have their limitations, but they provide a good starting point for
mobile, desktop, and web designers. The principles presented in the ensuing sections
focus on increasing users’ productivity by providing simplified data-entry
procedures, comprehensible displays, and rapid informative feedback to increase
feelings of competence, mastery, and control over the system.
For Further Readings:
1. Alan Dix, Janet Finlay, Gregory D. Abowd, Russell Beale, 2004. “Human–
Computer Interaction”. Pearson Education Limited, England. (Chapters 5 and 7).
Page 10 of 11
2. Helen Sharp, Yvonne Rogers, Jennifer Preece, 2019. “Interaction Design:
Beyond Human-Computer Interaction”. John Wiley & Sons, Inc., Indiana. (Chapter
1.3).
Page 11 of 11
