Lecture 4:
Understanding how interfaces
affect users
and the Process of Interaction
design
1
Overview

Expressive interfaces
• how the ‘appearance’ of an interface can
elicit positive responses

Negative aspects
• how computers frustrate users

Anthropomorphism and interface agents
• The pros and cons

Designing synthetic characters
2
Affective aspects


HCI has generally been about designing
efficient and effective systems
Recently, move towards considering how
to design interactive systems to make
people respond in certain ways
• e.g. to be happy, to be trusting, to learn, to be
motivated
3
Expressive interfaces

Colour, icons, sounds, graphical elements and
animations are used to make the ‘look and feel’
of an interface appealing
• Conveys an emotional state

In turn this can affect the usability of an interface
• People are prepared to put up with certain aspects of an
interface (e.g. slow download rate) if the end result is
very appealing and aesthetic
4
Friendly interfaces



Microsoft pioneered friendly interfaces for
technophobes - ‘At home with Bob’
software
3D metaphors based on familiar places
(e.g. living rooms)
Agents in the guise of pets (e.g. bunny,
dog) were included to talk to the user
• Make users feel more at ease and comfortable
5
User-created expressiveness

Users have created emoticons - compensate
for lack of expressiveness in text
communication:
Happy :)
Sad :<
Sick :X
Mad >:
Very angry >:-(

Also use of icons and shorthand in text and
instant messaging has emotional
connotations, e.g.
I 12 CU 2NITE
6
User frustration

Many causes:
• Gimmicks—Mild

When a user’s expectations are not met they are
instead presented with a gimmicky display.
• Error Message--High

When a system or application crashes and and
provides an “unexpected” error message
• Overburdening the user—Medium to high

Upgrading software so that users are required to
carry out excessive house-keeping tasks
• Appearance--Medium

When the appearance of an interface is unpleasant
7
Error messages
“The application Word Wonder has unexpectedly quit due to a type 2
error.”
Why not instead:
“the application has expectedly quit due to poor coding in the
operating system”

Shneiderman’s guidelines for error messages include:





avoid using terms like FATAL, INVALID, BAD
Audio warnings
Avoid UPPERCASE and long code numbers
Messages should be precise rather than vague
Provide context-sensitive help
8
Website error message…
9
More helpful error message
“The requested page /helpme is not available on the
web server.
If you followed a link or bookmark to get to this page,
please let us know, so that we can fix the problem.
Please include the URL of the referring page as well as
the URL of the missing page.
Otherwise check that you have typed the address of the
web page correctly.
The Web site you seek
Cannot be located, but
Countless more exist.”
10
Should computers say they’re
sorry?





Reeves and Naas (1996) argue that computers should be
made to apologize
Should emulate human etiquette
Would users be as forgiving of computers saying sorry as
people are of each other when saying sorry?
How sincere would they think the computer was being? For
example, after a system crash:
• “I’m really sorry I crashed. I’ll try not to do it again”
How else should computers communicate with users?
11
Anthropomorphism


Attributing human-like qualities to inanimate
objects (e.g. cars, computers)
Well known phenomenon in advertising
• Dancing butter, drinks, breakfast cereals

Much exploited in human-computer interaction
• Make user experience more enjoyable, more
motivating, make people feel at ease, reduce anxiety
12
Which do you prefer?
1. As a welcome message


“Hello Chris! Nice to see you again. Welcome
back. Now what were we doing last time? Oh yes,
exercise 5. Let’s start again.”
“User 24, commence exercise 5.”
13
Which do you prefer?
2. Feedback when get something wrong
1.
2.
“Now Chris, that’s not right. You can do better
than that.Try again.”
“Incorrect. Try again.”
Is there a difference as to what you prefer
depending on type of message? Why?
14
Evidence to support
anthropomorphism



Reeves and Naas (1996) found that computers
that flatter and praise users in education
software programs -> positive impact on them
“Your question makes an important and useful
distinction. Great job!”
Students were more willing to continue with
exercises with this kind of feedback
15
Criticism of anthropomorphism




Deceptive, make people feel anxious, inferior or
stupid
People tend not to like screen characters that
wave their fingers at the user & say:
• Now Chris, that’s not right. You can do better
than that.Try again.”
Many prefer the more impersonal:
• “Incorrect. Try again.”
Studies have shown that personalized feedback
is considered to be less honest and makes users
feel less responsible for their actions (e.g.
Quintanar, 1982)
16
Virtual characters
Increasingly appearing on our screens

•

Web, characters in videogames, learning
companions, wizards, newsreaders, popstars
Provides a persona that is welcoming, has
personality and makes user feel involved
with them
17
Disadvantages


Lead people into false sense of belief, enticing
them to confide personal secrets with
chatterbots (e.g. Alice)
Annoying and frustrating
• E.g. Clippy

Not trustworthy
• virtual e-commerce assistants?
18
Miss boo.com
What
do you
think
of Miss boo?
19
Persuasive advice?
20
Virtual sales agents

What do the virtual agents do?

Do they elicit an emotional response in you?

Do you trust them?

Is the style of interaction different for men
and woman’s clothes?

What facial expression does Miss.boo have?

Is she believable, pushy, helpful?

Would it be different if she was a male figure?
21
Virtual characters: agents

Can be classified in terms of the
degree of anthropomorphism they
exhibit:
•
•
•
•
Synthetic characters
animated agents
emotional agents
embodied conversational agents
22
(i)Synthetic characters -Silas
the dog
• autonomous, with internal states and able to
respond to external events
(Blumberg, 1996 - MIT)
23
(ii) Animated agents



Play a collaborative role at the interface
Often cartoon-like
e.g. Herman the bug
(Lester et al, 1997
Intellimedia)

flies into plants
& explains things
on-the-fly & gives
advice to students
24
(iii) Emotional agents

Pre-defined personality and set of
emotions that user can change
The Woggles, Bates, 1994
25
(iv) Embodied conversational
agents




Rea, real-estate agent,
showing user
an apartment
Human-like body
Uses gesture, non-verbal
communication (facial
expressions, winks)
while talking
Sophisticated AI
techniques used to
enable this form of interaction
Cassell, 2000, MIT
26
Conversation with Rea













Mike approaches screen and Rea turns to face him and
says:
Hello. How can I help you?
Mike: I’m looking to buy a place near MIT.
Rea nods, indicating she is following.
Rea: I have a house to show you. (picture of a house
appears on the screen)
Rea: it is in Somerville.
Mike: Tell me about it.
Rea looks up and away while she plans what to say.
Rea: It’s big.
Rea makes an expansive gesture with her hands.
Mike brings his hands up as if to speak, so Rea does not
continue, waiting for him to speak.
Mike: Tell me more about it.
Rea: Sure thing. It has a nice garden...
27
Which is the most believable
agent?


Believability refers to the extent to which
users come to believe an agent’s intentions
and personality
Appearance is very important
• Are simple cartoon-like characters or more realistic
characters, resembling the human form more believable?

Behaviour is very important
• How an agent moves, gestures and refers to objects on
the screen
• Exaggeration of facial expressions and gestures to show
underlying emotions (cf animation industry)
28
Key points

Affective aspects are concerned with how interactive
systems make people respond in emotional ways

Well-designed interfaces can elicit good feelings in users

Expressive interfaces can provide reassuring feedback

Badly designed interfaces make people angry and
frustrated

Anthropomorphism is increasingly used at the interface,
in the guise of agents and virtual screen characters
29
The Process of
Interaction Design
30
Overview
•What is Interaction Design?
—Four basic activities
—Three key characteristics
•Some practical issues
—Who are the users?
—What are ‘needs’?
—Where do alternatives come from?
—How do you choose among alternatives?
•Lifecycle models from software engineering
•Lifecycle models from HCI
31
What is Interaction Design?
• It is a process:
— a goal-directed problem solving activity
informed by intended use, target domain,
materials, cost, and feasibility
— a creative activity
— a decision-making activity to balance tradeoffs
• It is a representation:
— a plan for development
— a set of alternatives and successive
elaborations
32
Four basic activities
There are four basic activities in
Interaction Design:
1. Identifying needs and establishing
requirements
2. Developing alternative designs
3. Building interactive versions of the
designs
4. Evaluating designs
33
Three key characteristics
Three key characteristics permeate these
four activities:
1. Focus on users early in the design
and evaluation of the artefact
2. Identify, document and agree
specific usability and user experience
goals
3. Iteration is inevitable. Designers
never get it right first time
34
Some practical issues
•Who are the users?
•What are ‘needs’?
•Where do alternatives come from?
•How do you choose among alternatives?
35
Who are the users/stakeholders?
• Not as obvious as you think:
—
—
—
—
—
those
those
those
those
those
who
who
who
who
who
interact directly with the product
manage direct users
receive output from the product
make the purchasing decision
use competitor’s products
•Three categories of user (Eason, 1987):
— primary: frequent hands-on
— secondary: occasional or via someone else
— tertiary: affected by its introduction, or will influence its
purchase
36
Who are the stakeholders?
Check-out operators
• Suppliers
• Local shop
owners
Managers and owners
Customers
37
What are the users’ capabilities?
Humans vary in many dimensions:
— size of hands may affect the size and positioning of
input buttons
— motor abilities may affect the suitability of certain
input and output devices
— height if designing a physical kiosk
— strength - a child’s toy requires little strength to
operate, but greater strength to change batteries
— disabilities(e.g. sight, hearing, dexterity)
38
What are ‘needs’?

Users rarely know what is possible

Users can’t tell you what they ‘need’ to help them
achieve their goals

Instead, look at existing tasks:
• their context
• what information do they require?
• who collaborates to achieve the task?
• why is the task achieved the way it is?

Envisioned tasks:
• can be rooted in existing behaviour
• can be described as future scenarios
39
Where do alternatives
come from?




Humans stick to what they know works
But considering alternatives is important to
‘break out of the box’
Designers are trained to consider alternatives,
software people generally are not
How do you generate alternatives?
—‘Flair and creativity’: research and synthesis
—Seek inspiration: look at similar products or
look at very different products
40
IDEO TechBox


Library, database, website - all-in-one
Contains physical gizmos for inspiration
From: www.ideo.com/
41
The TechBox
42
How do you choose among
alternatives?



Evaluation with users or with peers, e.g.
prototypes
Technical feasibility: some not possible
Quality thresholds: Usability goals lead to
usability criteria set early on and check regularly
safety: how safe?
— utility: which functions are superfluous?
—
effectiveness: appropriate support? task coverage,
information available
— efficiency: performance measurements
—
43
Testing prototypes to choose
among alternatives
44
Lifecycle models


Show how activities are related to each other
Lifecycle models are:
— management tools
— simplified versions of reality

Many lifecycle models exist, for example:
— from software engineering: waterfall, spiral, JAD/RAD,
Microsoft
— from HCI: Star, usability engineering
45
A simple interaction design model
Identify needs/
establish
requirements
(Re)Design
Evaluate
Build an
interactive
version
Final product
Exemplifies a user-centered design approach
46
Traditional ‘waterfall’ lifecycle
Requirements
analysis
Design
Code
Test
Maintenance
47
Project set-up
A Lifecycle for RAD
(Rapid Applications
Development)
JAD workshops
Iterative design
and build
Engineer and
test final prototype
Implementation
review
48
Spiral model (Barry Boehm)
Important features:
—Risk analysis
—Prototyping
—Iterative framework allowing ideas to be
checked and evaluated
—Explicitly encourages alternatives to be
considered
Good for large and complex projects but
not simple ones
49
Spiral Lifecycle model
From cctr.umkc.edu/~kennethjuwng/spiral.htm
50
The Star lifecycle model
•Suggested by Hartson and Hix (1989)
•Important features:
—Evaluation at the center of activities
—No particular ordering of activities. Development may
start in any one
—Derived from empirical studies of interface designers
51
The Star Model (Hartson and Hix, 1989)
task/functional
analysis
Implementation
Prototyping
Evaluation
Requirements
specification
Conceptual/
formal design
52
Usability engineering lifecycle
model


Reported by Deborah Mayhew
Important features:
• Holistic view of usability engineering
• Provides links to software engineering approaches,
e.g. OOSE
• Stages of identifying requirements, designing,
evaluating, prototyping
• Can be scaled down for small projects
• Uses a style guide to capture a set of usability goals
53
Summary
Four basic activities in the design process
1.
2.
3.
4.
Identify needs and establish requirements
Design potential solutions ((re)-design)
Choose between alternatives (evaluate)
Build the artefact
These are permeated with three principles
1.
2.
3.
Involve users early in the design and evaluation of
the artefact
Define quantifiable & measurable usability criteria
Iteration is inevitable
Lifecycle models show how these are related
54