Human Computer

Interaction
Introduction to HCI
(EXTRA NOTE)
PART 1

What is Interaction
Design?
 Aims
Explain the difference between good and poor interaction design.
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.
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.
 Bad Design
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
 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
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
Good & Bad Design
What is wrong with the
remote on the right?
Why is the TiVo remote so
much better designed?
Peanut shaped to fit in hand
Logical layout and color-
coded, distinctive buttons
Easy to locate buttons
 What to design?
Need to take into account:
Who the users are
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
Novel Interface
 Understanding Users Needs
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-centered methods
 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
 What is interaction design?
Designing interactive products to support the way
people communicate and interact in their everyday
and working lives
Sharp, Rogers and Preece (2011)

The design of spaces for human communication and

interaction
Winograd (1997)
 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

 Which kind of design?
Number of other terms used emphasizing what is
being designed, e.g.
user interface design, software design, user-centered design, product
design, web design, experience design (UX)

Interaction design is the umbrella term covering all

of these aspects
fundamental to all disciplines, fields, and approaches concerned with
researching and designing computer-based systems for people
HCI & Interaction Design
 Relationship Between ID,
HCI & Other Fields (1)
Academic disciplines contributing to ID:
Psychology
Social Sciences
Computing Sciences
Engineering
Ergonomics
Informatics
 Relationship Between ID,
HCI & Other Fields (2)

Design practices contributing to ID:

Graphic design
Product design
Artist-design
Industrial design
Film industry
 Relationship Between ID,
HCI & Other Fields (3)
Interdisciplinary fields in interaction design:
HCI
Ubiquitous Computing
Human Factors
Cognitive Engineering
Cognitive Ergonomics
Computer Supported Co-operative Work
Information Systems
 Working in Multi-
Disciplinary 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
 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
 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
 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
iPod Nano Touch
 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, cool,
etc.,
 What is involved in the
process of interaction design?
Establishing requirements
Developing alternatives
Prototyping
Evaluating
 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
 Why go to this length?
Help designers:
understand how to design interactive products that fit with
what people want, need and may desire
appreciate that one size does not fit all
e.g., teenagers are very different to grown-ups
identify any incorrect assumptions they may have about
particular user groups
e.g., not all old people want or need big fonts
be aware of both peoples sensitivities and their
capabilities
 Are cultural differences
important?
5/21/2012 versus 21/5/2012?
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?
 Anna, IKEA online sales agent
Designed to be
different for UK and US
customers

What are the differences

and which is which?

What should Annas

appearance be like
for other countries,
like India, South Africa,
or China?
 Usability Goals
Effective to use
Efficient to use
Safe to use
Have good utility
Easy to learn
Easy to remember how to use
 Activity on Usability
How long should it take and how long does it
actually take to:
Using a DVD to play a movie?
Use a DVD to pre-record two programs?
Using a web browser tool to create a website?
 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

Undesirable aspects
boring unpleasant
frustrating patronizing
making one feel guilty making one feel stupid
annoying cutesy
childish gimmicky
 Usability & User Experience
Goals
Selecting terms to convey a persons 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?
 Design Principles
Generalizable abstractions for thinking about different
aspects of design
The dos and donts of interaction design
What to provide and what not to provide at the interface
Derived from a mix of theory-based knowledge,
experience and common-sense
 Visibility (1)
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
 Visibility (2)
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
 What do I do if I am
wearing black?
Invisible automatic controls
can make it more difficult to
use?
 Feedback
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
 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
 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
 How to design them more
logically?
(i) A provides direct adjacent
mapping between icon and
connector

(ii) B provides color coding to

associate the connectors
with the labels

From: www.baddesigns.com
 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
 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
 Internal & 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 designers
preference
 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
 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
 What does affordance have to
offer interaction design?
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 conceptualized as
perceived affordances
Learned conventions of arbitrary mappings between
action and effect at the interface
Some mappings are better than others
 Activity
Physical affordances:
How do the following physical objects afford? Are
they obvious?
 Activity
Virtual affordances
An affordance is a quality of an object
How do the following screen objects afford?
What if you were a novice (beginner) user?
Would you know what to do with them?
 Key Points
Interaction design is concerned with designing
interactive products to support the way people
communicate and interact in their everyday and
working lives
It is concerned with how to create quality user
experiences
It requires taking into account a number of
interdependent factors, including context of use,
type of activities, cultural differences, & user groups
It is multidisciplinary, involving many inputs from
wide-reaching disciplines and fields
Reference
Rogers, Y., Sharp, H.,
and Preece, J., (2011)
Interaction Design:
Beyond Human-
Computer Interaction,
3rd Edition, New York:
J. Wiley & Sons.