CSE 4849

Human Computer Interaction (HCI)

Lecture 4: Interaction Design

Summer 2022
Dr. Hasan Mahmud | [email protected]
 Interaction Design
1. Pathology of Design
2. What is design?
3. What to design?
4. What is Interaction Design?
5. What is involved in the process of interaction design?
6. Goals of Interaction Design
a. Usability goal
b. User experience goal
7. Interaction Design and HCI

CSE 4849 | HCI | Summer-2022 2

How do you turn a computer off?

3
CSE 4849 | HCI | Summer-2022
Insane Dialog Boxes

CSE 4849 | HCI | Summer-2022 4

Insane Dialog Boxes

CSE 4849 | HCI | Summer-2022 5

 Bad designs
– Elevator controls and labels on the bottom row all look the same,
so it is easy to push a label by mistake instead of a control button

– People do not make same mistake for the labels and buttons on
the top row. Why not?

From: www.baddesigns.com

CSE 4849 | HCI | Summer-2022 6

Why is this vending machine so bad?

• Need to push button first

to activate reader
• Normally insert bill first
before making selection
• Contravenes well known
convention
From: www.baddesigns.com

7
 Good design

• Marble answering machine (Bishop, 1995)

• Based on how everyday objects behave
• Easy, intuitive and a pleasure to use
• Only requires one-step actions to perform core tasks

8
Good and bad design

• What is wrong with the Apex

remote?
• Why is the TiVo remote so
much better designed?
– Peanut shaped to fit in hand
– Logical layout and colour-
coded, distinctive buttons
– Easy to locate buttons

9
Good and bad design

CSE 4849 | HCI | Summer-2022 10

 What is design?
Achieving goals within constraints
• Goals
– What is the purpose of the design intended?
– who is it for?
– why do they want it ?
• Constraints
– materials, platforms, standards, cost, time, health &
safety etc.
• Trade-offs
– Choosing between goals and constraints

CSE 4849 | HCI | Summer-2022 11

 A Note on the Term “Design”
• Industrial Design
– A branch of Architecture dealing with the design
of artifact
• Graphical Design (or Visual Design)
– A set of techniques for making effective visual
presentations
– Often requires a lot of “artistic” taste
• Interface Design
– A set of principles (or even guidelines) to design
computer graphical interfaces (GUI)
CSE 4849 | HCI | Summer-2022 12
• User-Centred Design (UCD)
– A term introduced by Norman in the ’80
– Refers to the need of considering the user in the
life-cycle of software
• Interaction Design
– A trend in Industrial Design that emphasis the role
of the user
– In IT, it often refers to UCD after the GUI era
• Participatory Design
– A Swedish technique to implement extreme UCD

CSE 4849 | HCI | Summer-2022 13

 What to design?
• Need to take into account:
– Who the users are
– What activities are being carried out
– Where the interaction is taking place
• The appropriateness of different kinds of interfaces and
arrangements of input and output devices depends on what
kinds of activities need to be supported.
• The range of activities that can be supported is diverse.
• There are also many ways of designing the way users can
interact with a system.
• Need to optimize the interactions users have with a product
– So that they match the users’ activities and needs

CSE 4849 | HCI | Summer-2022 14

 Understanding the users..

• Need to take into account what people are good and bad at
• Consider what might help people in the way they currently do
things
• Think through what might provide quality user experiences
• Listen to what people want and get them involved
• Use tried and tested user-centred methods

CSE 4849 | HCI | Summer-2022 15

 Activity
• How does making a call differ when using a:
– Cell phone
– Public phone box?
• Consider the kinds of user, type of activity and
context of use

CSE 4849 | HCI | Summer-2022 16

 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, South Africa,
or China?

CSE 4849 | HCI | Summer-2022 17

golden rule of design

Understand your materials

CSE 4849 | HCI | Summer-2022 18

 for Human–Computer Interaction

Understand your materials

• Understand computers
– Limitations, capacities, tools, platforms
• Understand people
– Psychological, social aspects
– Human error
• And their interaction …

CSE 4849 | HCI | Summer-2022 19

 What is interaction design?
• Designing interactive products to support people in
their everyday and working lives.
– it is about creating user experiences that enhance and extend the way
people work, communicate and interact
– Sharp, Rogers and Preece (2007)

• The design of spaces for human communication and

interaction – Winograd (1997)
– finding way of supporting people
– Architects vs. civil engineers

• The why as well as the how of our daily interactions

using computers – Thackara (2001)
CSE 4849 | HCI | Summer-2022 20
What is involved in the process of
interaction design
• Identifying needs and establishing requirements for the user
experience
• Developing alternative designs to meet these
• Building interactive prototypes that can be communicated
and assessed
• Evaluating what is being built throughout the process and
the user experience it offers

CSE 4849 | HCI | Summer-2022 21

 Core characteristics of interaction design

• Users should be involved through the development of the

project
• Specific usability and user experience goals need to be
identified, clearly documented and agreed at the beginning of
the project
• Iteration is needed through the core activities

CSE 4849 | HCI | Summer-2022 22

 Goals of interaction design
• Usability goals
– Develop usable products
• Usability means easy to learn, effective to use and
provide an enjoyable experience
– Goals are concerned with meeting specific
usability criteria (e.g., efficiency)
• User experience goals
– User experience goals are largely concerned with
explicating the quality of the user experience (e.g.,
to be aesthetically pleasing).

CSE 4849 | HCI | Summer-2022 23

• Effective to use
Usability goals
– Refers to how good a system is at doing what it is supposed to do.
• Efficient to use
– Refers to the way a system supports users in carrying out their
tasks. Let the user carry out common tasks through a minimal
number of steps. E.g. one-click option patented by Amazon.com
• Safe to use
– Involves protecting the user from dangerous conditions and
undesirable situations
• preventing the user from making serious errors by reducing the risk of
wrong keys/ buttons being mistakenly activated. An example is not
placing the quit or delete-file command right next to the save command
on a menu
• providing users with various means of recovery should they make
errors.
• Other safety mechanisms include undo facilities and confirmatory
dialog boxes that give users another chance to consider their intentions.

CSE 4849 | HCI | Summer-2022 24

 Usability goals
• Have good utility
– Refers to the extent to which the system provides the right kind of
functionality so that users can do what they need or want to do.
– An example of a system with high utility is an accounting software
package providing a powerful computational tool that accountants
can use to work out tax returns.
• Learnability
– Refers to how easy a system is to learn to use.
– A key concern is determining how much time users are prepared to
spend learning a system.
– Flash tutorial vs. Interactive TV, email
• Memorability
– Refers to how easy a system is to remember how to use, once
learned.

CSE 4849 | HCI | Summer-2022 25

 How to Measure Usability?
• We want to achieve these goals, but how do
we know?
• Develop measurable criteria based on
previous goals. Examples:
– Time to learn
– Speed of performance
– Rate of errors over by users
– Retention over time
– Subjective satisfaction

CSE 4849 | HCI | Summer-2022 26

 User experience goals
• satisfying • aesthetically pleasing
• enjoyable • supportive of creativity
• engaging • supportive of creativity
• pleasurable • rewarding
• exciting • fun
• entertaining • provocative
• helpful • surprising
• motivating • enhancing sociability
• emotionally fulfilling • challenging

• boring • annoying
• frustrating • cutsey

CSE 4849 | HCI | Summer-2022 27

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?

CSE 4849 | HCI | Summer-2022 28

 The User Experience
• 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, cardigan sweaters.”
(Garrett, 2003)
• Cannot design a user experience, only design for a
user experience

CSE 4849 | HCI | Summer-2022 29

Usability and user experience goals

use

Usability
Goals

CSE 4849 | HCI | Summer-2022 30

Usability and user experience - relationship

CSE 4849 | HCI | Summer-2022 31

Why was the iPod user experience
such a success?

CSE 4849 | HCI | Summer-2022 32

 Design principles
• Generalizable abstractions for thinking about
different aspects of design
• The do’s and don’ts of interaction design
– But at a high level. (Compare to guidelines later.)
• What to provide and what not to provide at the
interface
• Derived from a mix of theory-based knowledge,
experience and common-sense

CSE 4849 | HCI | Summer-2022 33

 Higher-level Principles
• Now, we will talk about the following:
– Visibility: Can is see it?
– Feedback: What is it doing now?
– Constraints: Why can’t I do that?
– Mapping: Where am I and where can I go?
– Consistency: I think I have seen this before?
– Affordances: How do I use it?
• Ideas well-known (e.g. from Norman’s Design
of Everyday Things)
CSE 4849 | HCI | Summer-2022 34
 Activity (Mini-Homework)
• Do this on your own on in pairs
• Go find two examples of problems in the GUIs of
software apps or the UI of a interactive device (not
Web pages)
– Problem must illustrate a violation of one of the design
principles or usability guidelines
– Describe the problems in these terms

CSE 4849 | HCI | Summer-2022 35

 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?

It is not visible as to what to do!

From:
www.baddesigns.com

CSE 4849 | HCI | Summer-2022 36

 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
• make relevant parts visible
• make what has to be done obvious

CSE 4849 | HCI | Summer-2022 37

 Visibility
• Hiding certain functions can be advantageous in interface design
• Certain functions are kept invisible until needed; also contained within a
group of similar types

• Google search makes it clear where to enter text

CSE 4849 | HCI | Summer-2022 38

 Feedback
• What is it doing now? what action has been performed?
• Sending information back to the user about what has been
done
• Includes sound, highlighting, animation and combinations
of these
– e.g. when screen button clicked on provides sound or red highlight
feedback:
“ccclichhk”

CSE 4849 | HCI | Summer-2022 39

 Feedback
• Other examples

CSE 4849 | HCI | Summer-2022 40

 Constraints
• Restricting the possible actions that can be
performed
• Helps prevent user from selecting incorrect options,
reduce the chance of doing error
• Can also work to focus user’s attention to needed
task
• Three main types (Norman, 1999)
– physical
– cultural
– logical

CSE 4849 | HCI | Summer-2022 41

 Physical constraints
• Refer to the way physical objects restrict the
movement of things
– E.g. only one way you can insert a key into a lock
• How many ways can you insert a CD or DVD disk into
a computer?
• How physically constraining is this action?
• How does it differ from the insertion of a floppy disk
into a computer?

CSE 4849 | HCI | Summer-2022 42

 Logical constraints
• Exploits people’s everyday common sense reasoning
about the way the world works

• An example is the logical relationship between

physical layout of a device and the way it works
– See next slide for an illustration

CSE 4849 | HCI | Summer-2022 43

 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

help?
From: www.baddesigns.com

44
 More Logically Constrained
Provides direct adjacent
mapping between icon
and connector

Provides color coding to

associate the
connectors with the
labels

From: www.baddesigns.com

45
 Cultural constraints
• Leaned arbitrary conventions like red triangles
for warning
• Can be universal or culturally specific
– For SW we’ve accepted certain conventions, e.g. we
know what to do with an icon
• Be concerned of cross-cultural conventions and
other ambiguities!
– Does an “X” mean “selected” or “not selected”
– Is a check-mark better?

CSE 4849 | HCI | Summer-2022 46

Which are universal and which are culturally-specific?

CSE 4849 | HCI | Summer-2022 47

 Mapping
• Relationship between controls and their
movements and the results in the world
• Why is this a poor mapping of control
buttons?

CSE 4849 | HCI | Summer-2022 48

 Mapping
• Why is this a better mapping?

• The control buttons are mapped better onto the

sequence of actions of fast rewind, rewind, play and
fast forward
– Is this a logical mapping (in most people’s minds)?
– Is there a mapping that makes more sense?

CSE 4849 | HCI | Summer-2022 49

 Mappings in the Kitchen
– Which controls go with which rings (burners)?

A B C D
CSE 4849 | HCI | Summer-2022 50
Why is this a better design?

CSE 4849 | HCI | Summer-2022 51

 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+S, ctrl+O
• Main benefit is consistent interfaces are easier to
learn and use
• But… didn’t a wise man say this?
Consistency is the hobgoblin of little minds.
– A foolish consistency is the hobgoblin of little minds
(adored by little statesmen and philosophers and divines)

CSE 4849 | HCI | Summer-2022 52

 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

• Is this desirable? Does it defeat the purpose?

– It may increase learning burden on user
– It may make them more prone to errors
– But it may still benefit frequent or experienced users

CSE 4849 | HCI | Summer-2022 53

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
– Most successful in product families (e.g MS Office)
– Op. Sys. vendors may define style guidelines

CSE 4849 | HCI | Summer-2022 54

 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

CSE 4849 | HCI | Summer-2022 55

 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 then has been popularized in interaction design
to discuss how to design interface objects
– E.g. scrollbars to afford moving up and down, icons to
afford clicking on

CSE 4849 | HCI | Summer-2022 56

 What does ‘affordance’ have to offer
interaction design?
• Notion of affordance is often over-used!
http://www.jnd.org/dn.mss/affordances-and.html
• Interfaces are virtual and do not have affordances
like physical objects
• Norman argues it does not make sense to talk about
interfaces in terms of ‘real’ affordances
• Instead interfaces are better conceptualised as
‘perceived’ affordances
– Learned conventions of arbitrary mappings between
action and effect at the interface
– Some mappings are better than others
CSE 4849 | HCI | Summer-2022 57
 Activity 1.3
– Physical affordances:
How do the following physical objects afford? Are they
obvious?

CSE 4849 | HCI | Summer-2022 58

 Activity 1.4
– Virtual affordances
How do the following screen objects afford?
What if you were a novice user?
Would you know what to do with them?

CSE 4849 | HCI | Summer-2022 59

 Activity 1.5: Physical and Perceived
Affordances
• Take a cell phone, digital camera, or PDA
– Have laptop? Open a fancy SW app: Outlook, Eclipse, etc?
• In a small group
– Identify any physical affordances the device has
– Identify any perceived or visual affordances the software
user interface has
• Write these down, be prepared to share or turn in

CSE 4849 | HCI | Summer-2022 60

 A Good Example
• Kodak DC-290 digital camera

CSE 4849 | HCI | Summer-2022 61

 Adjusting Tabs in MS Word

• What’s the idea here? Problems?

• What principle(s)?
– Affordance
– Metaphor
CSE 4849 | HCI | Summer-2022 62
“Usability principles” (Nielsen 2001)
• Visibility of system status
• Match between system and the real world
• User control and freedom
• Consistency and standards
• Help users recognize, diagnose and recover from
errors
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help and documentation
CSE 4849 | HCI | Summer-2022 63
 Web Links
• What are the conventions that help you recognize a
link?
• Would you argue this is an affordance?
– A perceived affordance – convention of a mapping
between action and effect
– Does it “afford” clicking on it?

• Examples of problems with this?

– Let’s look at: http://www.cs.virginia.edu

CSE 4849 | HCI | Summer-2022 64

HCI and interaction design

CSE 4849 | HCI | Summer-2022 65

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

CSE 4849 | HCI | Summer-2022 66

Relationship between ID, HCI and other fields

• Design practices contributing to ID:

– Graphic design
– Product design
– Artist-design
– Industrial design
– Film industry

CSE 4849 | HCI | Summer-2022 67

Relationship between ID, HCI and other fields
• Interdisciplinary fields that ‘do’ interaction
design:
– HCI
– Human Factors
– Cognitive Engineering
– Cognitive Ergonomics
– Computer Supported Co-operative Work
– Information Systems

CSE 4849 | HCI | Summer-2022 68

Working in multidisciplinary teams
• Many people from different
backgrounds involved

• 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 create

CSE 4849 | HCI | Summer-2022 69

 Interaction design in business
• Increasing number of ID consultancies, examples of well known ones
include:
– Nielsen Norman Group: “help companies enter the age of the
consumer, designing human-centered products and services”
– Cooper: ”From research and product to goal-related design”
– Swim: “provides a wide range of design services, in each case
targeted to address the product development needs at hand”
– IDEO: “creates products, services and environments for
companies pioneering new ways to provide value to their
customers”

CSE 4849 | HCI | Summer-2022 70

 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

CSE 4849 | HCI | Summer-2022 71

 Readings
• Chapter 5: Interaction Design basics – Alan dix
• Chapter 1: What is interaction design - Sharp

CSE 4849 | HCI | Summer-2022 72