Advanced Human

Computer Interaction

Instructor: Irum Feroz

http://www.pctresearchgroup.com/teachers/detail/18/16

1
Human Computer
Interaction (HCI)
 Recommended Books:
 Interaction Design Beyond Human-
Computer Interaction (4th Ed) By J Preece
and Y Rogers
 The Design of Everyday Things: Revised
and Expanded Edition (2013) by Donald
Norman
 User-Centered Design(2013) by Travis
Lowdermilk, Published by Oreilly

2
Bad Design
 Bad Design costs lives, money, &
time.

3
Bad Design? What is
time?

4
Design for People

People’s tasks, goals, and values drive

development
 Work with users throughout the
process
 Assess decisions from the vantage
point of users, their work, and their
environment
 Pay attention to people’s abilities and
situation
Learn more from:
  Talk to the
Don Norman, The actual experts
Design of Everyday Things
 Annual ACM CHI Conference

5
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 6
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

7
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

8
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)

9
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

10
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
11
and designing computer-based systems for
people
HCI and interaction
design

12
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

13
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”

14
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

15
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, armchairs, cardesign
sweaters.” (Garrett, 2003)
 Cannot design a user
experience, only design for a
16 user experience
 Why Was the Apple Product’s
User Experience Such a
Success?

 Quality user experience from the start

 Simple, elegant, distinct brand, pleasurable,
must have fashion item, catchy names, cool,
etc.,

17
What Is Involved In the
Process of Interaction Design

 Establishing requirements
 Developing alternatives
 Prototyping
 Evaluating

18
 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
19
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
20
fonts
Are Cultural Differences
Important?

 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?

21
Usability Goals
 Effective to use
 Efficient to use
 Safe to use
 Have good utility
 Easy to learn
 Easy to remember how to use

22
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?

23
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

24
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?

25  How easy is it to measure usability

Design Principles

 Generalizable abstractions for thinking

about different aspects of design
 What to provide and what not to provide at
the interface
 Derived from a mix of theory-based
knowledge, experience and common-sense

26
Norman’s two principles of designing for
people

1. Make things visible

2. Good conceptual model
Make things
visible
Sliding glass door
How to open it?
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!
31
Good conceptual model

1. Affordance
2. Mapping
3. Constraints
4. Feedback
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
33 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

34
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?

35
 Activity
 Physical affordances:
How do the following physical objects afford? Are
they obvious?

36
 Mapping

Relationship between two things

 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
38
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
39
Left one for keyboard and right one for mouse
Stove
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

42
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

43
 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”

44
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

45
 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
46
 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

47
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, and
user groups
 It is multidisciplinary, involving many
48
inputs from wide-reaching disciplines