HUMAN COMPUTER INTERACTION

HCI is focused on understanding such that it deals with the academic study of the
way people interact with technology. However, a large part of HCI is about doing
things and making things – design. One main aim of interaction design is to
reduce the negative aspects like frustration, annoyance of the user experience
while enhancing the positive ones such as enjoyment, engagement.

A. Introduction to Design
HCI design is an integral part of a larger software design (and its architectural
development) and is defined as the process of establishing the basic framework
for user interaction (UI), which includes the following iterative steps and activities.
Designing the UI is fundamentally an exercise in compromise—not compromise
between designers and other project stakeholders (usability should never be
sacrificed as a result of office politics)—but compromise between the drawbacks
and benefits of design decisions.

What is design? A simple definition is: achieving goals within constraints

Goals – This focuses on what you want to accomplish.

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

Constraints – This focuses on the possible limitations and problems that could
arise throughout the design process.
▪ 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?

Trade-off – Choosing which goals or constraints can be relaxed so that others can
be met.

B. Good and Poor Design

A central concern of interaction design is to develop interactive products that are
usable. By this is generally meant easy to learn, effective to use, and providing an
enjoyable user experience. A good place to start thinking about how to design
usable interactive products is to compare examples of well- and poorly-designed
ones
HUMAN COMPUTER INTERACTION

There are ‘4 E’s’ of good UI design:

▪ Easy to use
▪ Easy to understand
▪ Error-free
▪ Effective for end-goal (buying your product)

The Golden Rule of Design

The designs to be produced may be different, but often the raw materials are the
same. This leads to the golden rule of design: understand your materials. For
Human–Computer Interaction, the obvious materials are the human and the
computer. That is, we must:
▪ understand computers
o limitations, capacities, tools, platforms
▪ understand people
o psychological, social aspects, human error.
.
Factors that Make Up A Good Design
A lot of factors make up a good design, such as:

Right usage of controls elements

Choosing the right control for a
specific window/screen that will
perform a specific function takes an
integral part of making up a good
design. This includes choosing
whether textbox or label, drop down
list or radio button, table or list box,
tab pages, and other controls.
Knowing the right control for the kind
and amount of data it will hold makes
a huge difference.

Properly layout controls and

elements
Having a properly layout
window/screen is a good practice to
promote effective HCI. It is important
to consider the reading behavior of
the user – typically left to right, top to
bottom. This approach can help the
user to lessen the fatigue while
navigating the system.

Strive for Consistency

Designing “consistent interfaces” means using the same design patterns and the
same sequences of actions for similar situations. This includes, but isn’t limited to,
the right use of color, typography and terminology in prompt screens, commands,
and menus throughout your user journey. A consistent interface will allow your
users to complete their tasks and goals much more easily.
HUMAN COMPUTER INTERACTION

Enable Frequent Users to Use

Shortcuts
Speaking of using UI rules as shortcuts,
your users will benefit from shortcuts as
well, especially if they need to complete
the same tasks often. Expert users
might find the following features
helpful:
▪ Abbreviations
▪ Function keys
▪ Hidden commands

Context menu by Khalid Hasan Zibon

Offer Informative Feedback

You need to keep your users informed of what is
happening at every stage of their process. This
feedback needs to be meaningful, relevant, clear, and fit
the context.

File upload by Antonija

Vresk

Design Dialog to Yield Closure

Sequences of actions need to have a beginning,
middle and end. Once a task is completed, give
some peace of mind to your user by providing
them informative feedback and well-defined
options for the next step if that’s the case.

Offer Simple Error Handling

A good interface should be designed to
avoid errors as much as possible. But
when errors do happen, your system
needs to make it easy for the user to
understand the issue and know how to
solve it. Simple ways to handle errors
include displaying clear error notifications
along with descriptive hints to solve the
HUMAN COMPUTER INTERACTION

problem

Litmus form validation by Adnan Khan

Permit Easy Reversal of Actions

It’s an instant relief to find that “undo”
option after a mistake is made. Your users
will feel less anxious and more likely to
explore options if they know there’s an easy
way to reverse any accidents.

Undo countdown by Tyler

Beauchamp

Good grammar
Grammar and sentence construction of system messages and other information
displayed on the system is a plus. A small typo, a grammatical error, or a misworded
sentence can have a detrimental impact on an experience and prevent the
onboarding of a new user.

Some Key Issues and How to Avoid Them

You can design a larger window to lessen the scroll bar length or completely get rid
of the scroll bar

Know how to use and maximize tab pages

HUMAN COMPUTER INTERACTION

Vs

Use tooltips.
HUMAN COMPUTER INTERACTION

Interpretation of the color differ from time to time.

The background color of the button is determined by the Windows color
preferences.
▪ Green/Red-Affirmative/Negative distinction may be inconsistent with a
particular task. In western society, users may interpret the green label as
indicating the "good" or proper response.
▪ Enforcing your particular color associations on your users may create some
incompatibilities with cultural interpretations of color.
▪ A significant percentage of the population has some degree of color vision
deficiency; the most prevalent of which, is the diminished ability to distinguish
between red and green.

This should be a simple Yes/No

HUMAN COMPUTER INTERACTION

Some Contrasting Design Decisions

Design Benefit Cost
Shallow Fewer clicks to find More clutter
information info
architecture
Deep information Clean, reduced clutter More clicks to find info
architecture
Small font More information per More difficult to read
screen for some users
Large font Easier to read Less information per
screen
Drop-down box Selection amongst Hidden choices
many choices using
limited space
Radio buttons See all selections at Additional space
all times required, clutter
Text links Always understood Must be read, do not
stand out as actionable
items as much from
other text
Abbreviations Save space Must learn or recognize
Full text Easily understood Requires additional
space
Keyboard High speed of data Must be learned
shortcuts entry
Point and click Intuitive Additional time
required for interaction
due to increase motor
skills required

C. What Is Interaction Design?

Interaction Design (IxD) is the design of interactive products and services in which
HUMAN COMPUTER INTERACTION

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.

Five Dimensions of IxD

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.

Designers’ work in IxD involves five dimensions: words (1D), visual

representations (2D), physical objects/space (3D), time (4D), and behavior (5D).

The dimensions represent the aspects an interaction designer considers when

designing interactions:
1. Words (1D) encompass text, such as button labels, which help give users the
right amount of information.

2. Visual representations (2D) are graphical elements such as images,

typography and icons that aid in user interaction.
HUMAN COMPUTER INTERACTION

3. Physical objects/space (3D) refers to the medium through which users

interact with the product or service—for instance, a laptop via a mouse, or a
mobile phone via fingers.

4. Time (4D) relates to media that changes with time, such as animations,
videos and sounds.
HUMAN COMPUTER INTERACTION

5. Behavior (5D) is concerned with how the previous four dimensions define the
interactions a product affords—for instance, how users can perform actions on
a website, or how users can operate a car. Behavior also refers to how the
product reacts to the users’ inputs and provides feedback.

Interaction Design is a Part of User Experience Design

The term “interaction design” is sometimes used interchangeably with “user
experience design”. That’s understandable, considering interaction design is an
essential part of UX design.
▪ UX design entails shaping the experience of using a product, and a big part of
that experience involves the
needed interaction between the
user and the product.
▪ UX designers’ working world is
concerned with the entire user
journey, including aspects of
branding, design, usability and
function.
▪ The central role of “interaction
designers” targets the moment
of use and how to improve the
interactive experience.

▪ If users find themselves

hindered by impractical
features, such as text-heavy
notifications or overlong
HUMAN COMPUTER INTERACTION

animations, are put off by the aesthetics, or the responsiveness of the design
fails to match their needs in the context, the design will fail, regardless of the
brand behind it.
▪ The IxD of a product reflects its absolute value.

D. The User Experience

The user experience (UX) is central to interaction design.
▪ It is about how people feel about a product and their pleasure and satisfaction
when using it, looking at it, holding it, and opening or closing it.
▪ It includes their overall impression of how good it is to use, right down to the
sensual effect small details have on them, such as how smoothly a switch
rotates or the sound of a click and the touch of a button when pressing it.

There are many aspects of the user experience that can be considered and ways
of taking them into account when designing interactive products.
▪ Of central importance are the usability, the functionality, the aesthetics, the
content, the look and feel, and the sensual and emotional appeal.

More generally, McCarthy and Wright's (2004) Technology as Experience

framework accounts for the user experience largely in terms of how it is felt by
the user. They proposed four core threads that make up our holistic experiences:
sensual, emotional, compositional, and spatiotemporal:

▪ The sensual thread. This is concerned with our sensory engagement with a
situation. It can be equated with the level of absorption people have with
various technological devices and applications, most notable being computer
games, smartphones, and chat rooms, where users can be highly absorbed in
their interactions at a sensory level. These can involve thrill, fear, pain, and
comfort.

▪ The emotional thread. Common examples of emotions that spring to mind

are sorrow, anger, joy, and happiness. In addition, the framework points out
how emotions are intertwined with the situation in which they arise – e.g. a
person becomes angry with a computer because it does not work properly.
Emotions also involve making judgments of value. For example, when
purchasing a new cell phone, people may be drawn to the ones that are most
cool-looking but be in an emotional turmoil because they are the most
expensive.

▪ The compositional thread. This is concerned with the narrative part of an

experience, as it unfolds, and the way a person makes sense of it. For
example, when shopping online, the options laid out to people can lead them
in a coherent way to making a desired purchase or they can lead to frustrating
experiences resulting in no purchase being made. When in this situation,
people ask themselves questions such as: What is this about? Where am I?
What has happened? What is going to happen next? What would happen if ,,, ?
The compositional thread is the internal thinking we do during our
experiences.
HUMAN COMPUTER INTERACTION

▪ The spatio-temporal thread. This refers to the space and time in which our
experiences take place and their effect upon those experiences. There are
many ways of thinking about space and time and their relationship with one
another: for example, we talk of time speeding up, standing still, and slowing
down, while we talk of space in terms of public and personal places, and
needing one's own space.

E. The Process of Interaction Design

Design is a practical and creative activity with the aim of developing a product
that helps its users achieve their goals.

Four Activities of Interaction Design

Establishing Requirements. In order to design something to support people,
we must know who our target users are and what kind of support an interactive
product could usefully provide. These needs form the basis of the product's
requirements and underpin subsequent design and development. This activity is
fundamental to a user-centered approach, and is very important in interaction
design. Understanding these needs is gleaned through data gathering and
analysis.

Designing Alternatives. This is the core activity of designing: actually,

suggesting ideas for meeting the requirements. This activity can be viewed as two
sub activities: conceptual design and concrete design. Conceptual design
involves producing the conceptual model for the product, and a conceptual model
describes an abstraction outlining what people can do with a product and what
concepts are needed to understand how to interact with it. Concrete design
considers the detail of the product including the colors, sounds, and images to
use, menu design, and icon design. Alternatives are considered at every point.

Prototyping. Interaction design involves designing interactive products. The

most sensible way for users to evaluate such designs is to interact with them, and
this can be achieved through prototyping. This does not necessarily mean a piece
of software is required.

Evaluating. Evaluation is the process of determining the usability and

acceptability of the product or design that is measured in terms of a variety of
usability and user experience criteria. Interaction design requires a high level of
user involvement throughout development, and this enhances the chances of an
acceptable product being delivered. Evaluation does not replace the activities
concerned with quality assurance and testing to make sure that the final product
is fit for purpose, but it complements and enhances them.

A Simple Lifecycle Model for Interaction Design

Understanding what activities are involved in interaction design is the first step to
being able to do it, but it is also important to consider how the activities are
related to one another so that the full development process can be seen.

The model is based on our observations of interaction design and on information.

It has its roots in the software engineering and HCI lifecycle models mentioned
HUMAN COMPUTER INTERACTION

above and it represents what we believe is practiced in the field.

simple interaction design lifecycle model

Most projects start by establishing requirements. The project may have arisen
because of some evaluation that has been done, but the lifecycle of the new (or
modified) product can be thought of as starting at this point.

The only factor limiting the number of times through the cycle is the resources
available, but whatever the number is, development ends with an evaluation
activity that ensures the final product meets the prescribed user experience.

The Importance of Involving Users

There is a great need to involve users in interaction design, but why is it
important? Before the impact that user involvement can have on project success
was recognized, it was common for developers to talk to managers or to proxy
users, when eliciting requirements, or even to use their own judgment without
reference to anyone else.

The best way to ensure that development continues to take users’ activities into
account is to involve real users throughout development. In this way, developers
can gain a better understanding of users’ goals, leading to a more appropriate,
more usable product. However, two other aspects that have nothing to do with
functionality are equally as important if the product is to be usable and used:
expectation management and ownership.

▪ Expectation management is the process of making sure that the users’

expectations of the new product are realistic. The purpose of expectation
management is to ensure that there are no surprises for users when the
product arrives. If users feel they have been cheated by promises that have
not been fulfilled, then this will cause resistance and even rejection. It is better
to exceed users’ expectations than to fall below them. This does not mean
adding more features, but that the product supports the users’ goals more
HUMAN COMPUTER INTERACTION

effectively than they expect. Involving users throughout development helps

with expectation management because they can see from an early stage what
the product's capabilities are.
▪ Through ownership factor, users who are involved and feel that they have
contributed to a product's development are more likely to feel a sense of
ownership towards it and support its use.