CHAPTER 1: WHAT IS Lecturer

Name: Suhaila binti Khalip

INTERACTION DESIGN Email:

[email protected]
1
TOPICS
1. Introduction
2. Good and poor design
3. What is interaction design?
4. The user experience
5. Accessibility and inclusiveness
6. Usability and User Experience Goals

2
TOPIC OUTCOMES
1. Explain the difference between good and poor interaction
design.
2. Describe what interaction design is and how it relates to human­
computer interaction and other fields.
3. Explain what usability is.
4. Describe what is involved in the process of interaction design.
5. Outline the different forms of guidance used in interaction
design.
6. Evaluate an interactive product and explain what is good and
poor about it in terms of the goals and principles of interaction
design.
3
TOPIC 1: INTRODUCTION
Many products that require
users to interact with them to
carry out their tasks have not
necessarily been designed with
the users in mind.
Typically they have been
engineered as systems to
perform set functions.
While they may work effectively
from an engineering
perspective.
It is often at the expense of how
the system will be used by real 4
HCI
• Human-Computer Interaction (HCI) is a field of study focusing on
the design of computer technology and, in particular, the
interaction between humans (the users) and computers.
• It encompasses multiple disciplines, such as computer science,
cognitive science, and human-factors engineering.
• While initially concerned with computers, HCI has since expanded
to cover almost all forms of information technology design.

5
WHAT IS HCI?
• Human: Individual user, a group of users working together, a
sequence of users in an organization
• Computer: Desktop computer, large-scale computer system,
smart phone, embedded system (e.g., photocopier, microwave
oven), software (e.g., search engine, word processor)
• User interface: Parts of the computer that the user contacts with,
e.g., screen, mouse, keyboard
• Interaction: Usually involve a dialog with feedback & control
throughout performing a task (e.g., user invokes “print” command
and then interface replies with a dialog box)

6
THE DISTINGUISHING CONCEPTS OF INTERACTION
(MODEL) AND INTERFACE

7
HISTORY OF HCI
• HCI emerged in the 1980s. It was the crucial instrument in
popularizing the idea that the interaction between a computer and
the user should resemble a human-to-human, open-ended
dialogue.
• It initially focused on using knowledge in cognitive and computer
sciences to improve the usability of computers (i.e., concentrating
on how easy computers are to learn and use).
• However, since then—and thanks to the advent of technologies
such as the Internet and the smartphone—it has steadily
encompassed more fields (including information visualization,
social computing, etc.).
• The relevance of HCI in the 21st century is particularly apparent in
the breakthrough of new modes of interactivity, namely voice user 8
HCI SCOPE
• Use & Context: Find application areas for computers
• Human: Study psychological & physiological aspects e.g., study
how a user learns to use a new product, study human typing speed
• Computer: Hardware & software offered e.g., input & output
devices, speed, interaction types, computer graphics
• Development: Design, implementation & evaluation

9
HCI PRINCIPLES
1. Know your user
2. Understand the task
3. Reduce memory load
4. Strive for consistency
5. Remind Users and Refresh Their Memory
6. Prevent Errors/Reversal of Action
7. Naturalness

10
DISCIPLINES CONTRIBUTE
TO HCI

11
PEOPLE IN HCI BUSINESS
Interactive
Informatio User
/ Usability Web
n Experience
Interaction Engineers: Designers:
Architects: Designers:
Designers:
• People • People • People • People • People
involved who who who who do
in the focus on develop come up all the
design of evaluatin and with above
all the g create ideas of but who
interactiv products the visual how to may also
e aspects using design of plan and carry out
of a usability Websites, structure field
product methods such as interactiv studies to
and layouts & e inform
principles animatio products the
ns design of 12
TOPIC 2: 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
provide 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.
• Through identifying the specific weaknesses and strengths of
different interactive systems, we can begin to understand what it
means for something to be usable or not.

13
GOOD DESIGN
• Good design is an important issue in current discussions of
websites and digital products in general.
• Many of product that flooded in the market are highly effective but
a significant number fail to meet the expectations of consumers or
satisfy the needs of business.
• Good design displaying qualities of beauty as well as functional
clarity and efficiency.

14
GOOD DESIGN
• Designers explore what is useful, usable and desirable in products.
• Many people believe that the only task of design is to provide
styling to the visual appearance of products.
• The ability of a product to fully engage a human being in support
of a particular activity—whether the activity is a search for
information, the conduct of a transaction or the casual enjoyment
of exploring how other people express themselves in the new
medium.

15
GOOD DESIGN
• Question to be ask, What is its intended use? What is it useful for
in my life?
• In short, we look for content and purpose, and we make a fateful
commitment to trust those who have conceived and designed the
product. What I trust is that designers have tamed the complexity
of the content, shaping it with intellectual efficiency and clarity.
• Second task of the designer: to understand my needs and
limitations, and to provide the “affordances” that enable me to
move forward with a feeling of accomplishment and satisfaction.
• The designer adds something important that technical experts
may neglect—the ability to bring grace and elegance into forms
and devices that are humanly engaging.
16
GOOD DESIGN
• Qualities of usefulness, usability and desirability play a central role
in good design for websites and all digital products.
• The final step of good design is this is a strategic design decision,
because it is fundamental in developing any product.
• The real challenge in seeking good design is to distinguish in
every individual case how the elements of the useful, usable and
desirable are poorly or successfully explored for effective
communication.
• Good interaction design results in items that mirror users’
expectations and enable ease of use towards action goals—
designed works that are intuitive to grasp and that only fail at
frustrating users.
17
EXAMPLES OF GOOD AND
POOR DESIGN
• See video :

Examples video 1

Example video 2
18
EXAMPLES OF GOOD AND
POOR DESIGN
• See the examples of good design :
 ..\References\Examples of Good Design.pdf

• See the examples of poor design :

• ..\References\Examples of poor design.pdf

19
ACTIVITY
• Which one is preferable? Why?

20
ACTIVITY
• Do you know how to use them?

21
TOPIC 3: WHAT IS
INTERACTION DESIGN (ID)
• Creating the means by which users communicate with different
forms of computing technology in order to perform some activity
or design of interactive products and services, particularly
concerns the way people interact with products and services.
(based on interaction design foundation)
• Can be applied to digital products such as smartphone apps
• ID is also used to optimize physical spaces.
• ID can be examined through five dimensions: words (1D), visual
representations (2D), physical objects/space (3D), time (4D), and
behaviour (5D).

22
FIVE DIMENSIONS
• Words (1D) encompass text, such as button labels, that help convey the right
amount of information to users.
• Visual representations (2D) are graphical elements such as images,
typography, and icons that aid in user interaction.
• Physical objects/space (3D) involves the medium through which users interact
with the product or service—for instance, a laptop via a mouse, or a mobile
phone via fingers.
• Time (4D) relates to media that changes with time, such as animations,
videos, and sounds.
• Behaviour (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. Behaviour is also about how the
product reacts to the users’ inputs and provides feedback.
23
 What can a user do with their
mouse, finger, or stylus to directly
interact with the interface?

What about the appearance

(colour, shape, size, etc.) gives
the user a clue about how it may
function?

Do error messages provide a way

for the user to correct the
problem or explain why the error
occurred?
What feedback does a user get
once an action is performed?
Are the interface elements a reasonable size to
interact with?

Are familiar or standard formats used?

24
QUESTION TO ASK
• How do you optimize the user’s interactions with a system,
environment, or product. One way is to make choices based on an
understanding of the users.
• This would include:
 Taking into account what people are good and bad at
 Considering what might help people with the way they currently do things
 Thinking through what might provide quality user experiences
 Listening to what people want and getting them involved in the design
 Using ‘tried and tested’ user-based techniques during the design process

25
IS ID BEYOND HCI?
• The main difference between ID and HCI is one of scope.
• ID has a much wider net in terms of theory, research, and practice
of designing user experiences.
• HCI has a much narrower focus being concerned with the design,
evaluation and implementation of interactive computing systems.

26
ACTIVITY3

Question:
Identify the 5
dimensions

27
TOPIC 4: THE USER
EXPERIENCE (UX)
• User experience (UX) design is the process of creating products
that provide meaningful and personally relevant experiences.
• This involves the careful design of both a product’s usability and
the pleasure consumers will derive from using it. It is also
concerned with the entire process of acquiring and integrating the
product, including aspects of branding, design, usability, and
function.
• Products that provide great user experience (e.g., the iPhone) are
thus designed not only with the product’s consumption or use in
mind but also the entire process of acquiring, owning, and even
troubleshooting it.

28
THE USER EXPERIENCE (UX)
• A UX designer will consider the Why, What, and How of product
use.
• The Why involves the users’ motivations for adopting a product,
whether they relate to a task they wish to perform with it, or to
values and views associated with the ownership and use of the
product.
• The What addresses the things people can do with a product—its
functionality.
• Finally, the How relates to the design of functionality in an
accessible and aesthetically pleasant way.
• UX design starts from the Why, then determines the What and
finally the How, in order to create products that users can form 29
 THE USER EXPERIENCE (UX)
• An important concept
in interaction design
• About how people feel
about a product and
their pleasure and
satisfaction when using
it, looking at it, holding
it, opening it, closing it,
etc.
• Examples: how
smoothly a switch
rotates, the sound of a
click, the touch of a
button when pressing it

30
TOPIC 5: THE PROCESS OF
INTERACTION DESIGN (ID)
• You tried to use a device like your phone or remote control with
heavy gloves or thick socks on your hands, which gave you an idea
of how users with certain physical characteristics and in certain
contexts might struggle, what their needs might be, and what
changes you might have to make to meet those needs.
• You then came up with alternative design ideas.
• You drew up the alternative designs.
• You tried ‘interacting’ with the drawings while wearing your gloves
or socks, to see which might work better if it were to be developed
into a product.

31
THE PROCESS OF DESIGN

32
FOUR BASIC ACTIVITIES IN
ID
• First pass: thinking about the problem
Identifying needs and
space
establishing requirements

Developing • Second pass: more extensive information

alternative designs that gathering about users’ needs and problems
meet those requirements
Building interactive versions
of the designs so that they • Third pass: continue explicating the
requirements through models
can be communicated and
assessed
• Fourth pass: Fleshing out models using
Evaluating what is being
built throughout the process variety of user-centered methods. Such as:
prototyping, storyboarding, physical objects,
informally asking users what they think.
33
INTERACTION DESIGN
MODEL

34
PRACTICAL ISSUES
1. Who are the users?
2. What are ‘needs’?
3. Where do alternatives come from?
4. How do you choose among alternatives?

35
WHO ARE THE USERS?
• Not as obvious you think
 Those who interact directly with the product
 Those who manage direct users
 Those who receive output from the product
 Those who make the purchasing decision
 Those who use competitor’s product

• Three categories of users:

 Primary – frequent hands on
 Secondary – occasional or via someone else
 Tertiary – affected by its introduction, or will influence its purchase

36
WHAT ARE ‘NEEDS’?
• Users rarely know what is possible
• Users can’t tell you what they ‘need’ to help them achieve their
goals
• Instead, look at existing tasks
 Their context
 What information do they require?
 Who collaborates to achieve the tasks?
 Why is the task achieved the way it is?

• Envisioned tasks:
 Can be rooted in existing behaviour
 Can be described as future scenarios

37
WHERE DO ALTERNATIVES
COME FROM?
• Human stick to what they know works
• But considering alternatives is important to ‘break out of the box’
• Designers are trained to consider alternatives, software people
generally are not
• How do you generate alternatives?
 ‘Flair and creativity’ : research & synthesis
 Seek inspiration : look at similar products or look at very different products

38
HOW DO YOU CHOOSE
AMONG ALTERNATIVES?
• Evaluation with users or with peers e.g. prototypes
• Technical feasibility: some not possible
• Quality thresholds: Usability goals lead to usability criteria
 Safety: how safe?
 Utility : which functions are superfluous?
 Effectiveness : appropriate support? Task coverage, information available
 Efficiency: performance measurements

39
TOPIC 6: INTERACTION
DESIGN (ID) AND USER
EXPERIENCE (UX)
• The process of understanding users is to be clear about the
primary objective of developing an interactive product for them
• To help identify the objectives we suggest classifying them in
terms of usability and user experience goals.

40
usability goals
at center of
Interaction Design
user-experience
goals
outer ring of diagram
(secondary to
usability goals)

41
USABILITY GOALS
• Usability goals refer to ensuring the interactive products are easy
to learn, effective to use and enjoyable from the user’s
perspective.
• It involves optimizing the interactions people have with interactive
products to enable them to carry out their activities at work, school
and in their everyday lives.
• Usability goals are typically operationalized as questions. The
purpose is to provide the interaction designer with a concreate
means of assessing various aspects of an interactive product and
the user experience. Through answering the questions, designers
can be alerted very early on in the design process to potential
design problems and conflicts that they might not have
considered. 42
USABILITY GOALS
• Usability Goals: concerned with meeting a usability criteria (e.g.
efficiency)
 Effectiveness - how good system is at doing what it is supposed to
 Efficiency - the way a system supports users in carrying out their tasks
 Safety - protecting the users from dangerous conditions / undesirable situations
 Utility - extent to which the system provides the right kind of functionality so
that users can do what they need or want to do
 Learnability - how easy a system is to learn to use
 Memorability - how easy a system is to remember how to use, once learned

43
USER EXPERIENCE GOALS
• A diversity of user experience goals has been articulated in
interaction design, which cover a range of emotions and felt
experiences.
• Many of these are subjective qualities and are concerned with how
a system feels to a user.
• They differ from the more objective usability goals in that they are
concerned with how users experience an interactive product from
their perspectives, rather assessing how useful of productive a
system is from its own perspective.
• Similar to usability goals, user experience concept are most useful
when turned into specific questions.
44
USER EXPERIENCE GOALS
• User Experience Goals: User experience is what the interaction
with the system feels like to the users (subjectively)
Desirable aspects
Satisfying Helpful Fun
Enjoyable Motivating Provocative
Engaging Challenging Suprising
Pleasurable Supporting creativity Rewarding
Exciting Cognitive stimulating Emotionally fulfilling
Entertaining
Undesirable aspects
Boring Unpleasant
Frustrating Patronizing
Making one feel guilty Making one feel stupid
Annoying Cutesy
Childish Gimmicky
45
46
ID AND UX
• Not all usability and user experience goals will be relevant to the
design and evaluation of an interactive product being developed.
• Some combinations will also be incompatible.

47
DESIGN PRINCIPLES
• Design principles are used by interaction designers to aid their
thinking when designing for the user experience.
• The most common ones (Norman’s usability principles):
 Visibility : Helps user to construct a mental model of a document
 Feedback : Related to the concept of visibility. Involves sending back information
about what action has been done and what has been accomplished
 Constraints : Determining ways of restricting the kinds of user interaction that
can take place at a given moment
 Consistency : Designing interfaces to have similar operations and use similar
elements for achieving similar tasks.
 Affordance : An attribute of an object that allows people to know how to use it

48
ID PROCESS

49
SUMMARY
• In this chapter we have looked at what interaction design is and
how it has evolved.
• We examined briefly its makeup and the various processes
involved.
• We pointed out how the notion of usability is fundamental to
interaction design.
• This was explained in some detail, describing what it is and how it
is operationalized to assess the appropriateness, effectiveness,
and quality of interactive products.
• A number of high-level design principles were also introduced that
provide different forms of guidance for interaction design.
50
KEY POINTS
• Interaction design is concerned with designing interactive products to support people
in their everyday and working lives.
• Interaction design is multidisciplinary, involving many inputs from wide-reaching
disciplines and fields. Interaction design is now big business: many companies want it
but don't know how to do it.
• Optimizing the interaction between users and interactive products requires taking into
account a number of interdependent factors, including context of use, type of task,
and kind of user.
• Interactive products need to be designed to match usability goals like ease of use and
learning.
• User experience goals are concerned with creating systems that enhance the user
experience in terms of making it enjoyable, fun, helpful, motivating, and pleasurable.
• Design and usability principles, like feedback and simplicity, are useful heuristics for
analyzing and evaluating aspects of an interactive product.
51