MSIS and MSIT – Interaction

Design Methods
By: M Shuaib Zarinkhail
Fall 2024
Information Systems and Information Technology Departments
Computer Science Faculty
Kabul University
 Chapter 1
WHAT IS INTERACTION DESIGN?
 Chapter 1 Objectives:
• Explain the difference between good and poor interaction
design.

• Consider the pros and cons of transforming activities to

become digital.

• Describe what interaction design is and how it relates to

human computer interaction and other fields.

• Explain the relationship between the user experience and

usability.

Fall 2024 © CSF, Kabul University 3

 Chapter 1 Objectives:
• Introduce what is meant by accessibility and inclusiveness in
relation to human computer interaction.

• Describe what and who is involved in the process of interaction

design.

• Outline the different forms of guidance used in interaction design.

• Enable you to evaluate an interactive product and explain what is

good and bad about it in terms of the goals and core principles of
interaction design.

Fall 2024 © CSF, Kabul University 4

 Introduction - ICE
• How many interactive devices are there in everyday use?

– Think a minute and list them

• Then think, which apps and social media you use?

– List them too

• … (the lists might be endless)

• Now, think how usable they are?

– Discuss some examples (e.g. smart phone, tablet, computer, ATM, printer, TV, …)

• How many are actually easy, effortless, and enjoyable to use?

– Some maybe effective but not efficient.

• Why is there a difference?

– DISCUSSION

Fall 2024 © CSF, Kabul University 5

 1.1 Introduction
• In this chapter we begin by examining: what interaction

design is?

• We look at the difference between good and poor design

– Highlighting how products can differ radically in how

usable and enjoyable they are

• We then describe: what and who is involved in the

process of interaction design?

Fall 2024 © CSF, Kabul University 6
 1.1 Introduction
• The user experience, which is a central concern of interaction
design, is then introduced

• Finally, we outline how to characterize the user experience in

terms of usability goals, user experience goals, and design
principles?

• An assignment is presented at the end of the chapter in which

you have the opportunity to put into practice: what you have
read by evaluating the design of an interactive product?

Fall 2024 © CSF, Kabul University 7

 1.1 Introduction
• A central concern of interaction design is
to develop interactive products that are
usable
– A good place to start thinking about how to
design usable interactive products is to
compare examples of well and poorly-
designed ones
Fall 2024 © CSF, Kabul University 8
 Alternate Names Used
(Which kind of Design?)
– Different names are used in terms as User,
People, Human, or Customer
• User Interface Design • Web Design
(UI) • User Experience (UX)
• Software Design Design

• User-Centred Design • Customer Experience

• Human-Centred Design (CX) Design

• People-Centred Design • Interactive System

• Product Design Design

– Interaction Design (ID) is generally used as the
overarching term to describe the field, including its
methods, theories, and approaches
Fall 2024 © CSF, Kabul University 9
 InClass / Practice Session
– Make a search (using search engines/libraries) on
below terms and make short notes for the most
used ones
• User Interface Design • Web Design
(UI) • User Experience (UX)
• Software Design Design

• User-Centred Design • Customer Experience

• Human-Centred Design (CX) Design

• People-Centred Design • Interactive System

• Product Design Design

Fall 2024 © CSF, Kabul University 10
 1.2 Good and poor design
– A central concern of interaction design is to
develop interactive products that are usable

– The TiVo remote control is a good example

• It is designed with large buttons, clearly labelled and
logically arranged

• The remote is designed to fit into the palm of hand

with a peanut shape

Fall 2024 © CSF, Kabul University 11

 1.2 Good and poor design
• Why is the TiVo remote so much better designed
than standard remote controls?
– The answer is: TiVo invested the time and effort to
follow a user-centered design process and designed
as:
• Peanut shaped to fit in hand
• Logical layout and color-coded, distinctive buttons
• Easy to locate buttons
See:
http://gizmodo.com/5017972/story-of-a-peanut-the-tivo-remotes-
untold-past-present-and-future

Fall 2024 © CSF, Kabul University 12

 Dilemma
Which is the best way to interact with a smart TV?
• Selecting letters and numbers from a square matrix?
• Swiping along a single line of letters and numbers?
See: http://support.apple.com/en-us/HT200107

Fall 2024 © CSF, Kabul University 13

 1.3 Switching to Digital
• Many activities that used to be done via a physical artifact
have gone digital
– Instead of walking up to a machine or place and buying a
ticket, many of us now do such transactions digitally using an
app on our smartphone or tablet

• Mostly, this has made the tasks easier, quicker, and more
convenient
• Besides, it has disadvantages as well
– It requires a smartphone with a specific app
– Some people want physical evidence of their
activities/purchases …

Fall 2024 © CSF, Kabul University 14

 1.4 What to design
• Interactive design needs to take into account:
– Who the users are?
– How they are going to be used?
– What activities are being carried out?
– Where the interaction is taking place?
• Need to optimize the interactions users have with a product:
– So that they match the users’ activities and needs
• What activities to be supported?

Fall 2024 © CSF, Kabul University 15

 1.4 What to design - ICE
• Just think for a minute what you can currently do using computer-
based systems? Write them down
– They may be: send messages, gather information, write essays, control
power plants, program, draw, plan, calculate, monitor others, play
games, …

• Now think about the types of interfaces and interactive devices that
are available. Write them too
– Such examples are: multi-touch displays, speech-based systems,
handheld devices, and large interactive displays

Fall 2024 © CSF, Kabul University 16

 1.4 What to design - ICE
• There are also many ways of designing how users
can interact with a system:
– Via the use of menus, commands, forms, icons,
gestures, etc.

• Furthermore, ever more innovative everyday

artifacts are being created, using novel materials,
such as etextiles and wearable's (see Figures)

Fall 2024 © CSF, Kabul University 17

 Novel design

Fall 2024 © CSF, Kabul University 18

 Novel design

Fall 2024 © CSF, Kabul University 19

 1.4 What to Design
Using IoT (Internet of Things)
• By using IoT, the data is collected from sensors and travels via the Internet to
other devices

• For instance, a popular household IoT-enabled product is home security

– People can keep an eye on their home remotely based on the data relayed to their
smartphones

• Some home-based security also use machine learning that recognizes

whether an intruder is trying to break into the house through using facial
recognition
– Machine learning is also being used in a range of other home-based products,
such as automated thermostats, which optimizes the temperature settings for a
household

Fall 2024 © CSF, Kabul University 20

 1.4 What to Design
Users’ needs
• A key question for interaction design is:
how do you optimize the users’
interactions with a system, environment, or
product?
– The aim is to support and extend the users’
activities in effective, useful, usable, and
pleasurable ways

Fall 2024 © CSF, Kabul University 21

 1.4 What to Design
Understanding users’ needs
– Need to know how safe and private is the data being collected:
• Considering 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

• Considering a person’s privacy concerns if data is being collected

about them

• Listening to what people want and getting them involved in the design

• Using people-centred techniques during the design process

Fall 2024 © CSF, Kabul University 22

 1.5 What is interaction design?
• “Designing interactive products to support the
way people communicate and interact in their
everyday and working lives.”
– Preece, Sharp and Rogers (2023)

• “The design of spaces for human

communication and interaction.”
– Winograd (1997)

Fall 2024 © CSF, Kabul University 23

 1.5 What is interaction design?
• “The why as well as the how of our daily
interactions using computers”
– Thackara (2001)

• “The art of facilitating interactions between

humans through products and services”
– Saffer (2010)

Fall 2024 © CSF, Kabul University 24

 Goals of interaction design
• Develop usable products
– Usability means easy to learn, effective to use
and provide an enjoyable experience

• Involve users in the design process

Fall 2024 © CSF, Kabul University 25

 1.5.1 The components of ID
(Is Interaction Design beyond HCI?)
• The main difference between ID and HCI:
– ID is much wider, being concerned with the theory, research
and practice of designing user experiences for all manner of
technologies, systems, and products
– HCI has a narrower focus, being “concerned with the design,
evaluation, and implementation of interactive computing
systems for human use and with the study of major
phenomena surrounding them”
(ACM SIGCHI, 1992, p.6)

Fall 2024 © CSF, Kabul University 26

 The Components of ID

Fall 2024 © CSF, Kabul University 27

 Relationship between ID, HCI and
other fields
Academic disciplines contributing to ID:
– Psychology
– Social Sciences
– Computing Sciences
– Engineering
– Ergonomics
– Informatics

Fall 2024 © CSF, Kabul University 28

 Relationship between ID, HCI and
other fields

Design practices contributing to ID:

– Graphic design

– Product design

– Artist-design

– Industrial design

– Film industry
Fall 2024 © CSF, Kabul University 29
 Relationship between ID, HCI and
other fields
Interdisciplinary fields that ‘do’ interaction design:
– HCI
– Ubiquitous Computing
– Human Factors
– Cognitive Engineering
– Cognitive Ergonomics
– Computer Supported Co-operative Work
– Information Systems >> Activity 1.1 @ page 11/37
Fall 2024 © CSF, Kabul University 30
Fall 2024 © CSF, Kabul University 31
 1.5.2 Who is involved in ID?
(Working in multidisciplinary teams)
• Many people from different backgrounds involved

• ID is ideally carried out by multidisciplinary teams including:

– Engineers, designers, programmers, psychologists, anthropologists,
sociologists, marketing people, artists, toy makers, product managers, ….
– It can help different perspectives and ways of seeing and talking about things

• Benefits
– More ideas and designs generated

• Disadvantages
– Difficult to communicate and progress forward the designs being created
– >> Activity 1.2 @ page 13/39

Fall 2024 © CSF, Kabul University 32

Fall 2024 © CSF, Kabul University 33
 1.5.3 Interaction design consultancies
• Increasing number of ID consultancies not only in the field
of IT but also in financial services, retail, governments,
marketing, …
• Examples of well known ones include:
– Nielsen Norman Group: “Help companies enter the age of the
consumer, designing human-centred products and services”
– IDEO: “Creates products, services and environments for companies
pioneering new ways to provide value to their customers”

• Other (more recent) examples include Madgex, Cogapp,

CXpartners, Bunnyfoot, Dovetailed, and so on

Fall 2024 © CSF, Kabul University 34

 What do professionals do in the ID business?
• Interaction designers - People involved in the design of all the
interactive aspects of a product

• Usability engineers - People who focus on evaluating products, using

usability methods and principles

• Web designers - People who develop and create the visual design of
websites, such as layouts

• Information architects - People who come up with ideas of how to plan

and structure interactive products

• User experience designers (UX) - People who do all the above but who
may also carry out field studies to inform the design of products

• Many other including psychologists, researchers, and customer

experience specialists are also involved
Fall 2024 © CSF, Kabul University 35
1.6 People-Centred Design
• How a product behaves and is used by people in the
real world
– The way people feel about it and their pleasure and satisfaction
when using it, looking at it, holding it, and opening or closing it
– “Every product that is used by someone has a user experience:
newspapers, ketchup bottles, reclining armchairs….” (Garrett,
2010)
– “All aspects of the end-user's interaction with the company, its
services, and its products. (Nielsen and Norman, 2014)

• Cannot design a user experience, only design for a

user experience >> Activity 1.3 @ page 14/40
Fall 2024 © CSF, Kabul University 36
Fall 2024 © CSF, Kabul University 37
 Activity 1.3 Result:

Why was the iPod user experience

such a success?
• Quality user experience
from the start

• Simple, elegant, distinct

brand, pleasurable, must
have fashion item,
catchy names (iTunes,
iPod), cool, etc.
Fall 2024 © CSF, Kabul University 38
 1.7 Understanding People
• A main reason for having a better understanding of
people as they live, work, … is:
– It can help designers understand how to design interactive
products that augment people and match heir needs
– Just as everyday objects like clothes, food, … are
designed differently for children, teenagers, and adults
(Interactive products should also be designed according to
the people needs)
– Cultural differences is also an important concern for
interaction design
Fall 2024 © CSF, Kabul University 39
 Discussion Time!
• Take 2 minutes; think and discuss about the Cultural
Differences in a specific product’s interactive
use/design in your society
– Share your findings with the class!
Note: to understand more about people, check chapter 4 to 6
of the referenced book (Interaction Design Methods: beyond
human computer interaction. 6th Edition). The contents there
discusses how people act and interact with one another, with
information and with various technologies.
Fall 2024 © CSF, Kabul University 40
 1.7 Understanding People
(Are cultural differences important?)
• 5/21/2023 versus 21/5/2023?
– Which should be used for international services and
online forms?

• Why is it that certain products, like the iPod, are

universally accepted by people from all parts of
the world whereas websites are reacted to
differently by people from different cultures?

Fall 2024 © CSF, Kabul University 41

 Anna, IKEA online sales agent

• Designed to be
different for UK and US
customers
• What are the differences
and which is which?
• What should Anna’s
appearance be like
for other countries,
like India, China,
• or your country?

Fall 2024 © CSF, Kabul University 42

 1.8 Accessibility and Inclusiveness

• Accessibility means the degree to which an interactive

product is accessible by as many people as possible
– Companies like Google and Apple provide tools for their
developers to promote this

• Focus on disability:
– Have a mental or physical impairment

– This has an adverse affect on their everyday lives

– It may be long term (12 months or more)

Fall 2024 © CSF, Kabul University 43
 1.8 Accessibility and Inclusiveness

• Inclusiveness means being fair, open, and equal to

everyone

• Inclusive design is an overarching approach where

designers strive to make their products and services
accommodate the widest possible number of people
– An example is ensuring that smartphones are being designed for
all and made available to everyone regardless of their disability,
education, age, or income
Fall 2024 © CSF, Kabul University 44
 1.8 Accessibility and Inclusiveness
• Accessibility can be achieved in two ways:
– Through the inclusive design of technology
– Through the design of assistive technology
• When designing for accessibility, it is important to understand the
impairments that caused disability problems
• They are often classified by the type of impairment which may be:
– Sensory impairment (such as loss of vision or hearing)
– Physical impairment (loss of functions to one or more parts of the body)
– Cognitive impairment (for instance, learning impairment or loss of
memory/cognitive function i.e. Alzheimer’s disease)

Fall 2024 © CSF, Kabul University 45

 1.8 Accessibility and Inclusiveness
• Impairment can also categorized as:
– Permanent (for example, long-term wheelchair user)

– Temporary (such as after an accident of illness)

– Situational (for instance, a noisy environment)

• The number of people living with permanent disability

increases with age
– Fewer than 20 percent of people are born with a disability

– 80 percent of people will have a disability once they reach 85

Fall 2024 © CSF, Kabul University 46

 Accessibility issue (Color-blindness)

• Almost 10% male and only 0.5% female

are color-blind!

Fall 2024 © CSF, Kabul University 47

 1.8 Accessibility and Inclusiveness
• Current HCI research into disability explores:
– How new technologies, such as IoT (Internet of Things),
wearables, and VR (Virtual Reality) can be used to improve upon
existing Assistive Technologies
• Color-blindness can be overcome by an Inclusive Design
approach
– Designers can choose colors that will appear as separate colors
for everyone
• However, peripheral vision loss or complete blindness will
often need an Assistive Technology to be designed

Fall 2024 © CSF, Kabul University 48

 1.8 Accessibility and Inclusiveness
• A recent approach is to consider Disability
Interaction (DIX)
– This approach combines cross-disciplinary
methods from HCI and disability studies to co-
create new technologies, experiences, and
ways of with disable people (Holloway and
Barbaraschi, 2022)
Fall 2024 © CSF, Kabul University 49
 1.9 Usability and User Experience Goals
• Selecting terms to convey a person’s feelings, emotions,
etc., can help designers understand the multifaceted
nature of the user experience
• How do usability goals differ from user experience
goals?
• Are there trade-offs between the two kinds of goals?
– e.g. Can a product be both fun and safe?

• How easy is it to measure usability versus user

experience goals?
Fall 2024 © CSF, Kabul University 50
 1.9.1 Usability goals
• Effective to use (Effectiveness)
• Efficient to use (Efficiency)
• Safe to use (Safety)
• Have good utility (Utility)
• Easy to learn (Learnability)
• Easy to remember how to use (Memorability)
• Enjoyable to use (Satisfaction)

Fall 2024 © CSF, Kabul University 51

 Usability goals – ICE
• Here are 7 questions; relate each question to one usability goal:
– Q1: What is the range of errors that are possible using the product, and
what measures are there to permit someone to recover easily from them?

– Q2: How many steps does it take to complete a task? How does storing a
person’s personal details make it more efficient?

– Q3: Is the product capable of allowing people to carry out their work
efficiently, access the information they need, or buy the goods they want?

– Q4: What are the mean, median, and mode values on the CSAT (Customer
Satisfaction Score) scale? What proportion of users say they are highly
satisfied with the product? How may people are still satisfied after using the
product for six months?

Fall 2024 © CSF, Kabul University 52

 Usability goals – ICE
• Here are 7 questions; relate each question to one usability goal:
– Q5: What types of interface support have been provided to help
someone remember how to carry out tasks, especially for ones they use
infrequently?

– Q6: Is it possible for someone to work out basic use of the product by
exploring the interface and trying out certain actions? How hard will it be
to master the product in this way? Are additional learning tools needed?

– Q7: Does the product provide an appropriate set of functions that will
enable them to carry out all of their tasks in the way they want to do
them?

Fall 2024 © CSF, Kabul University 53

 1.9.2 User experience goals
Desirable aspects
satisfying helpful fun
enjoyable motivating provocative
engaging challenging surprising
pleasurable enhancing sociability rewarding
exciting supporting creativity emotionally fulfilling
entertaining cognitively stimulating experiencing flow

Undesirable aspects
boring unpleasant creepy
frustrating patronizing intrusive
making one feel guilty making one feel stupid invasive
annoying cutesy deceptive
childish gimmicky annoying
>> Activity 1.4 @ page 24/50

Fall 2024 © CSF, Kabul University 54

Fall 2024 © CSF, Kabul University 55
 1.9.3 Design principles
• Generalizable abstractions for thinking about different
aspects of design
• Derived from a mix of theory-based knowledge,
experience and common-sense
• The Do’s and Don'ts of Interaction Design
– What to provide and what not to provide at the interface

• The most common design principles are:

– Visibility, Feedback, Constraints, Consistency, Affordance

Fall 2024 © CSF, Kabul University 56

 Visibility

• This is a control panel for an elevator

• How does it work?
• Push a button for the floor you want?
• Nothing happens. Push any other button?
Still nothing. What do you need to do?

www.baddesigns.com
• It is not visible as to what to do!

Fall 2024 © CSF, Kabul University 57

 Visibility
…you need to insert your room card in the slot by the buttons

to get the elevator to work!

How would you make this action more visible?

• Make the card reader more obvious

• Provide an auditory message, that says what to do

(which language?)

• Provide a big label next to the card reader that flashes

when someone enters

www.baddesigns.com
• Make relevant parts visible

• Make what has to be done obvious

Fall 2024 © CSF, Kabul University 58

What do I do if I am wearing black?

Invisible automatic
controls can make it
more difficult
to use

Fall 2024 © CSF, Kabul University 59

 Feedback
• Sending information back to the user about what has
been done

• Includes sound, highlighting, animation or

combinations of these
– e.g. When screen button clicked on provides sound or red
highlight feedback:

“ccclichhk”

Fall 2024 © CSF, Kabul University 60

 Constraints

• Restricting the possible actions that can be

performed
• Helps prevent user from selecting incorrect
options
• Physical objects can be designed to constrain
things
– e.g. Only one way you can insert a key into a lock

Fall 2024 © CSF, Kabul University 61

Constraints

Fall 2024 © CSF, Kabul University 62

Logical or ambiguous design?

• Where do you plug the

mouse?

• Where do you plug the

keyboard?
– Top or bottom connector?

• Do the color coded icons

www.baddesigns.com

help?

© CSF, Kabul University 63

How to design them more logically
(i) A provides direct
adjacent mapping
between icon and
connector

www.baddesigns.com
(ii) B provides color coding to
associate the connectors
with the labels
www.baddesigns.com

© CSF, Kabul University 64

 Consistency
• Design interfaces to have similar operations and use
similar elements for similar tasks

• For example:
– Always use ctrl key plus first initial of the command for an
operation – ctrl+C & ctrl+V, ctrl+S, ctrl+O

• Main benefit is consistent interfaces are easier to learn

and use
– Works well for simple interfaces and limited operations

Fall 2024 © CSF, Kabul University 65

 When consistency breaks down

• What happens if there is more than one command

starting with the same letter?
– e.g. Save, Spelling, Select, Style

• Have to find other initials or combinations of keys,

thereby breaking the consistency rule
– e.g. ctrl+S, ctrl+Sp, ctrl+shift+L

• Increases learning burden on user, making them more

prone to errors

Fall 2024 © CSF, Kabul University 66

 Internal and external consistency

• Internal consistency refers to designing operations to

behave the same within an application

– Difficult to achieve with complex interfaces

• External consistency refers to designing operations,

interfaces, etc., to be the same across applications and
devices
– Very rarely the case, based on different designer’s preference

Fall 2024 © CSF, Kabul University 67

 Keypad numbers layout

• A case of external inconsistency

(a) Phones, remote controls (b) Calculators, computer keypads

1 2 3 7 8 9
4 5 6 4 5 6
7 8 9 1 2 3
0 0

Fall 2024 © CSF, Kabul University 68

 Affordances: to give a clue
• Refers to an attribute of an object that allows people to know
how to use it
– e.g. A mouse button invites pushing, a door handle affords pulling

• Norman (1988) used the term to discuss the design of

everyday objects

• Since has been much popularised in interaction design to

discuss how to design interface objects
– e.g. Scrollbars to afford moving up and down, icons to afford
clicking on

Fall 2024 © CSF, Kabul University 69

 What does ‘affordance’ have to offer
interaction design?

• Interfaces are virtual and do not have affordances like physical

objects

• Norman (1999) argues it does not make sense to talk about

interfaces in terms of ‘real’ affordances

• Instead interfaces are better conceptualized as ‘perceived’

affordances
– Learned conventions of arbitrary mappings between action and
effect at the interface

Fall 2024 © CSF, Kabul University 70

 Activity
– Virtual affordances
How do the following screen objects afford?

What if you were a novice user?

Would you know what to do with them?

For more info visit www.asktog.com >> Activity 1.5 @ page 31/57

Fall 2024 © CSF, Kabul University 71

Fall 2024 © CSF, Kabul University 72
 Key points
• ID is concerned with designing interactive products to
support the way people communicate and interact in
their everyday and working lives

• ID is multidisciplinary, involving many inputs from wide-

ranging disciplines and fields

• There is a growing shift toward replacing the term user-

centred design with people-centred design

Fall 2024 © CSF, Kabul University 73

 Key points
• Optimizing the interaction between people and interactive products
requires consideration of a number of interdependent factors
including:
– Context of use, types of activity, design goals, accessibility, cultural
differences, and user groups

• Identifying and specifying relevant usability and user experience

goals can help lead to the design of good interactive products

• Design principles, such as feedback and simplicity, are useful

heuristics for informing, analysing, and evaluating aspects of an
interactive product

Fall 2024 © CSF, Kabul University 74

 Individual Assignment
• Review chapter 01 of the book “Interaction Design –
Beyond HCI – 6th Edition”
• Do assignment on page 31/57 individually (every
student should does it!)
• Write your findings in a full report for all parts (1 to 7)
• Submit your work in MS-Word format to
[email protected] by the deadline set during the
class session

Fall 2024 © CSF, Kabul University 75

 Individual Assignment …
• By completing the assignment, now you have a report based your
own experience
• This is a normal report (How can we change it to an Academic
Report?)
• You need to find references for the report
– Do a literature survey
– Cite the points you claimed
– Add the citations and references list using a tool (Citations & Bibliography)
under REFERENCES tab in MS Word

• Resubmit your work in MS-Word format to [email protected] by

the deadline set during the class session

Fall 2024 © CSF, Kabul University 76