Chapter1. Introduction to Human Computer Interaction
“Designing interactive products to support the way people
communicate and interact in their everyday and working
lives.”
-Preece, Sharp and Rogers (2015)
WHATTO DESIGN
Needto 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
WWW.ID-BOOK.COM 2
3.
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
WWW.ID-BOOK.COM 3
4.
WHAT IS INTERACTIONDESIGN?
“Designing interactive products to support the way people
communicate and interact in their everyday and working
lives.”
Preece, Sharp and Rogers (2015)
“The design of spaces for human communication and
interaction.”
Winograd (1997)
WWW.ID-BOOK.COM 4
5.
GOALS OF INTERACTIONDESIGN
Develop usable products
Usability means easy to learn, effective to use and provide an enjoyable experience
Involve users in the design process
WWW.ID-BOOK.COM 5
6.
WHICH KIND OFDESIGN?
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
WWW.ID-BOOK.COM 6
RELATIONSHIP BETWEEN ID,HCI AND
OTHER FIELDS
Academic disciplines contributing to ID:
Psychology
Social Sciences
Computing Sciences
Engineering
Ergonomics
Informatics
WWW.ID-BOOK.COM 8
9.
RELATIONSHIP BETWEEN ID,HCI AND
OTHER FIELDS
Design practices contributing to ID:
Graphic design
Product design
Artist-design
Industrial design
Film industry
WWW.ID-BOOK.COM 9
10.
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
WWW.ID-BOOK.COM 10
11.
BAD INTERFACES
Encumbering
Confusing
Slow
Trust (ex. windows
crashing)
What makes it hard?
Varies by culture
Multiple platforms
Variety of users
12.
SO HOW DOYOUAVOID BAD
DESIGN?
Activity
Design the ultimate fast food drive thru
From: http://pigjockey.com/wp-content/uploads/2009/10/mcdonalds-6.jpg
13.
DIDYOUR DESIGN SUPPORT?
A customer who can’t read English?
A customer who is hearing impaired?
A customer who has never eaten a hamburger
before?
A customer who is health conscious?
A customer who has an IQ of less than 80?
A customer who is over 7’ tall
Did you design an interface for you?
Is not that what someone already did?
14.
GOOD DESIGN
Youcan’t create one just by sitting around and
dreaming one up
Rely on
Known design solutions
User evaluations
Must provide
Usability
Universality
Usefulness
15.
REQUIREMENTS ANALYSIS
• Indesigning a building I want inhabitants to move between floors
1. Ascertain users’ needs
2. Ensure proper reliability
3. Promote appropriate standardization, integration, consistency, and
portability
4. Complete projects on schedule and within budget
16.
ASCERTAIN USER’S NEEDS
Define tasks
Tasks
Subtasks
Frequency
Frequent
Occasional
Exceptional
Repair
Ex: Difference between a
bike, a car and an airplane
Images from: http://www.dexigner.com/news/25736
http://carseatblog.com/wp-content/uploads/2010/07/airplane.jpg
http://prafulla.net/wp-content/sharenreadfiles/2013/01/374828/Finnjet_car_Germany.jpg
17.
ENSURE RELIABILITY
⚫Actions functionas specified
⚫Data displayed must be correct
⚫Updates done correctly
⚫Leads to trust! (software, hardware, information) –
case: 1994 Pentium FDIV bug
⚪Cost to Intel: $475 million
⚫Privacy, security, access, data destruction, tampering
18.
STANDARDIZATION, INTEGRATION, CONSISTENCY,
PORTABILITY
⚫Standardization– common user-interface features
across multiple applications
⚪Apple
⚪Web
⚪Windows
⚪Smart phones
⚫Integration – product should run across application
packages
⚪file formats
⚫Consistency – common action sequences, terms, units,
layouts, color, typography within an application
⚫Portability – allow user to convert data and interfaces
across multiple hardware and software environments
⚪Word/HTML/PDF/ASCII/Flash
19.
USABILITY MEASURES
Howcan we measure the
‘goodness’ of an interface?
What are good metrics?
ISO 9241
Effectiveness
Efficiency
Satisfaction
Shneiderman
Time to learn
Speed of performance
Rate of errors
Retention over time
Subjective satisfaction
Images from: http://www.eoncc.com/telephones.htm
http://www.seriouswheels.com/2008/2008-Pontiac-G8-GT-Show-Car-Dashboard-1280x960.htm
20.
USABILITY MOTIVATIONS
Life-Criticalsystems
Applications: air traffic, nuclear reactors, military, emergency
dispatch
Requirements: reliability and effectiveness (even under stress)
Not as important: cost, long training, satisfaction, retention
Industrial and Commercial Use
Applications: banking, insurance, inventory, reservations
Requirements: ease of use/learning to reduce training costs,
multiple languages, multiplatform, speed of performance
Office, Home, and Entertainment
Applications: email, games, search engines, cell phones
Requirements: Ease of learning/use/retention, error rates,
satisfaction (competition is fierce)
•Time to learn
•Speed of performance
•Rate of errors
•Retention over time
•Subjective satisfaction
21.
USABILITY MOTIVATIONS
Exploratory,Creative, Collaborative
Applications: search engines, simulations, scientific
visualization, CAD, computer graphics, music
composition/artist, photo arranger (email photos)
Requirements: the ‘computer’ should be transparent so that
the user can be absorbed in their task domain
Difficulties: user tech savvy-ness
Socio-technical systems
Applications: health care, voting, police
Requirements:Trust, security, accuracy, error handling, user
tech-savvy-ness (need tools to detect unusual patterns of
usage)
•Time to learn
•Speed of performance
•Rate of errors
•Retention over time
•Subjective satisfaction
22.
UNIVERSAL USABILITY
Interfaceshould handle diversity
of users
Backgrounds
Abilities
Motivation
Personalities
Cultures
Technical capacity
Question, how would you design
an interface to a database
differently for:
A. right-handed female, software engineer,
technology savvy
B. left-handed male, artist
23.
UNIVERSAL USABILITY
Doesnot mean ‘dumbing
down’
Ex. Crosswalks (parents w/
strollers, elderly, diff cultures)
Goal:Address the needs of
more users - unlike yourself!
Everyone is often not at full
faculties at all times
24.
PHYSICALVARIATION
Field ofanthropometry
Basic data about human
dimensions
Is no ‘average’ user
Measures of what is 5-95% for
weight, height, gender, culture,
etc.
Large variance reminds us
there is great ‘variety’
Name some devices that this
would affect…
25.
PHYSICALVARIATION
Work-surface anddisplay-
support height
Clearance under work surface
for legs
Work-surface width and depth
Adjustability of heights and
angles for chairs and work
surfaces
Posture - seating depth and
angle; back-rest height and
lumbar support
Availability of armrests,
footrests, and palmrests
26.
COGNITIVE AND PERCEPTUAL
ABILITIES
The journal Ergonomics Abstracts offers this classification
of human cognitive processes:
Long-term and semantic memory
Short-term and working memory
Problem solving and reasoning
Decision making and risk assessment
Language communication and comprehension
Search, imagery, and sensory memory
Learning, skill development, knowledge acquisition, and concept
attainment
27.
COGNITIVE AND PERCEPTUAL
ABILITIES
However, perceptual and motor performance can
be affected by these factors:
Fatigue and sleep deprivation
Cognitive load
Monotony and boredom
Nutrition and diet
Fear, anxiety, mood, and emotion
Drugs and alcohol
28.
PERSONALITY
No settaxonomy for identifying personality types
Myers-Briggs Type Indicator
extroversion vs introversion
sensing vs intuition
perceptive vs judging
feeling vs thinking
Big FiveTest
Openness to experience (open/closed)
Conscientiousness (disorganized/organized)
Extraversion (extraverted/introverted)
Agreeableness (disagreeable/agreeable)
Neuroticism (calm/nervous)
29.
CULTURAL AND INTERNATIONAL
DIVERSITY
Language
Date / Time conventions
Weights and Measures
Reading: left-to-right, up-and-down
Telephone #s and addresses
Names, titles, salutations
SSN, ID, passport
Icons, buttons, colors
Etiquette, tone, formality
30.
USERS WITH DISABILITIES
1998 Amendment to Rehabilitation Act
Federal law to ensure access to IT, including
computers and web sites
Vision (text-to-speech)
Blind (bill-reader)
Low-vision
Color-blind
Hearing (conversion of tones to visual
signals)
Deaf
Limited hearing
Mobility (eye-gaze control, head-mounted
optical mice)
Learning
Dyslexia
Attention deficient, hemisphere specific, etc.
Keyboard, mouse, color alternatives
31.
ELDERLY
Reduced
Motorskills
Perception
Vision, hearing, touch, mobility
Speed
Memory
Other needs
Technology experience is varied (How many
grandmothers use email? mothers?)
Uninformed on how technology could help
Practice skills (hand-eye, problem solving)
Touch screens, larger fonts,
louder sounds
Images from:
http://www.comforcareblog.com/wp-content/uploads/2013/10/elderly-woman-at-computer.jpg
http://elderlycomputer.com/images/elderlyComputerExample.jpg
32.
CHILDREN
Technology familiarity
Age changes:
Physical dexterity
(double-clicking, click and drag, and
small targets)
Attention span
Varied backgrounds (socio-
economic)
Goals
Educational acceleration
Socialization with peers
Psychological – improve self-image,
self-confidence
Creativity – art, music, etc.
exploration
33.
CHILDREN
Teenagers area special group
Next generation
Beta test new interfaces, trends
Cell phones, text messages, simulations, fantasy games, virtual
worlds
Requires Safety
They
Like exploring (easy to reset state)
Don’t mind making mistakes
Like familiar characters and repetition
Don’t like patronizing comments, inappropriate humor
Design: Focus groups
34.
GOALS FOR ACADEMICHCI
Provide tools, techniques and knowledge for
commercial developers
Competitive advantage (think iPad)
Raising the computer consciousness of the
general public
Reduce computer anxiety (error messages)
Common fears:
I’ll break it
I’ll make a mistake
The computer is smarter than me
HCI contributes to this!
35.
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
WWW.ID-BOOK.COM 35
36.
INTERACTION DESIGN INBUSINESS
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”
WWW.ID-BOOK.COM 36
37.
WHAT DO PROFESSIONALSDO 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
WWW.ID-BOOK.COM 37
38.
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, 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
WWW.ID-BOOK.COM 38
39.
WHY WAS THEIPOD USER
EXPERIENCE SUCH A SUCCESS?
Quality user experience
from the start
Simple, elegant, distinct
brand, pleasurable, must
have fashion item, catchy
names, cool, etc.
WWW.ID-BOOK.COM 39
40.
WHAT IS INVOLVEDIN THE PROCESS
OF INTERACTION DESIGN
Establishing requirements
Developing alternatives
Prototyping
Evaluating
WWW.ID-BOOK.COM 40
41.
CORE CHARACTERISTICS OF
INTERACTIONDESIGN
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
WWW.ID-BOOK.COM 41
42.
WHY GO TOTHISLENGTH?
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 people’s sensitivities and their capabilities
WWW.ID-BOOK.COM 42
43.
ARE CULTURAL DIFFERENCES
IMPORTANT?
5/21/2015 versus 21/5/2015?
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?
WWW.ID-BOOK.COM 43
44.
ACCESSIBILITY
Degree towhich a product is usable and accessible by as
many people as possible
Focus on disability:
Have a mental or physical impairment
This has an adverse affect on their everyday lives
It is long term
WWW.ID-BOOK.COM 44
45.
ANNA, IKEA ONLINESALES 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?
WWW.ID-BOOK.COM
45
46.
USABILITY GOALS
Effectiveto use
Efficient to use
Safe to use
Have good utility
Easy to learn
Easy to remember how to use
WWW.ID-BOOK.COM 46
47.
USER EXPERIENCE GOALS
Desirableaspects
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 guiltymaking one feel stupid
annoying cutesy
childish gimmicky
WWW.ID-BOOK.COM 47
48.
USABILITY AND USEREXPERIENCE
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?
WWW.ID-BOOK.COM 48
49.
DESIGN PRINCIPLES
Generalizableabstractions for thinking about different
aspects of design
The do’s and don'ts 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
WWW.ID-BOOK.COM 49
50.
VISIBILITY
•This is acontrol 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!
WWW.ID-BOOK.COM 50
www.baddesigns.com
51.
VISIBILITY
…you need toinsert 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
WWW.ID-BOOK.COM 51
www.baddesigns.com
52.
WHAT DO IDO IF I AM WEARING
BLACK?
Invisible automatic
controls can make it
more difficult
to use
WWW.ID-BOOK.COM 52
53.
FEEDBACK
Sending informationback 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:
WWW.ID-BOOK.COM 53
“ccclichhk”
54.
CONSTRAINTS
Restricting thepossible 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
WWW.ID-BOOK.COM 54
55.
LOGICAL OR AMBIGUOUSDESIGN?
Where do you plug the mouse?
Where do you plug the
keyboard?
top or bottom connector?
Do the color coded icons help?
WWW.ID-BOOK.COM
www.baddesigns.com
55
56.
HOW TO DESIGNTHEM MORE
LOGICALLY
(i) A provides direct adjacent
mapping between icon
and connector
(ii) B provides color coding
to associate the
connectors with the labels
WWW.ID-BOOK.COM
www.baddesigns.com www.baddesigns.com
56
57.
CONSISTENCY
Design interfacesto 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
WWW.ID-BOOK.COM 57
58.
WHEN CONSISTENCY BREAKSDOWN
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
WWW.ID-BOOK.COM 58
59.
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
WWW.ID-BOOK.COM 59
AFFORDANCES:TO GIVE ACLUE
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
WWW.ID-BOOK.COM 61
62.
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
WWW.ID-BOOK.COM 62
63.
ACTIVITY
Virtual affordances
Howdo the following screen objects afford?
What if you were a novice user?
Would you know what to do with them?
WWW.ID-BOOK.COM 63
64.
KEY POINTS
Interactiondesign 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 inputs from wide-
reaching disciplines and fields
WWW.ID-BOOK.COM 64