Bahan Uts Sistem Interaksi

Chapter 1
WHAT IS INTERACTION DESIGN?
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
www.baddesigns.com
People do not make same mistake for the labels and buttons on the top row. Why not?
www.id-book.com
Why is this vending machine so bad?

Need to push button
first to activate reader
Normally insert bill first
before making selection
www.baddesigns.com
Contravenes well
known convention
www.id-book.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
www.id-book.com
Good and bad design

Why is the TiVo remote so much better designed than
standard remote controls?
Peanut shaped to fit in hand
Logical layout and color-coded, distinctive buttons
Easy to locate buttons
See:
http://
gizmodo.com/5017972/story-of-a-peanut-the-tivo-remotes-untold-pa
st-present-and-future
www.id-book.com
Dilemma
Which is the best way to interact with a smart TV?
Standard remote device?

Apple slimline remote control?
Minnums new keyboard?
http://minuum.com
www.id-book.com
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
www.id-book.com
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
What is interaction design?

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
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
www.id-book.com
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 and designing computer-based systems for
people
www.id-book.com
11
HCI and interaction design
www.id-book.com
12
Relationship between ID, HCI and other

fields
Academic disciplines contributing to ID:
Psychology
Social Sciences
Computing Sciences
Engineering
Ergonomics
Informatics
www.id-book.com
13

fields
Design practices contributing to ID:
Graphic design
Product design
Artist-design
Industrial design
Film industry
www.id-book.com
14

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
15
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
16
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
www.id-book.com
17
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
www.id-book.com
18
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
19
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.
www.id-book.com
20
What is involved in the process of

interaction design
Establishing requirements
Developing alternatives
Prototyping
Evaluating
www.id-book.com
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
www.id-book.com
22
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

www.id-book.com
23
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
24
Accessibility
Degree to which 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
25
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?
www.id-book.com
26
Usability goals
Effective to use
Efficient to use
Safe to use
Have good utility
Easy to learn
Easy to remember how to use
www.id-book.com
27
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
www.id-book.com
28
Usability and 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?
www.id-book.com
29
Design principles
Generalizable abstractions for thinking about different
aspects of design
The dos 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
30
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!
www.id-book.com
31
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
www.baddesigns.com
make relevant parts visible

make what has to be done obvious
www.id-book.com
32
What do I do if I am wearing black?

Invisible automatic
controls can make it
more difficult
to use
www.id-book.com
33
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
www.id-book.com
34
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
www.id-book.com
35
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?
www.baddesigns.com
www.id-book.com
36
How to design them more logically

(i) A provides direct
adjacent mapping
between icon and
connector
www.baddesigns.com
(ii) B provides color coding

to associate the
connectors with the
labels
www.baddesigns.com
www.id-book.com
37
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
www.id-book.com
38
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
www.id-book.com
39
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 designers
preference
www.id-book.com
40
Keypad numbers layout

A case of external inconsistency
(a) phones, remote controls
(b) calculators, computer keypads
3
6
9
9
6
3
0
www.id-book.com
41
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
www.id-book.com
42
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
43
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?
www.id-book.com
44
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 inputs from widereaching disciplines and fields
www.id-book.com
45
www.id-book.com
46
Chapter 3
COGNITIVE ASPECTS
Overview
What is cognition?
What are users good and bad at?
Describe how cognition has been
applied to interaction design
Explain what are Mental Models
Cover relevant theories of cognition
www.id-book.com
48
Why do we need to understand users?

Interacting with technology is cognitive
Need to take into account cognitive processes involved and
cognitive limitations of users
Provides knowledge about what users can and cannot be expected
to do
Identifies and explains the nature and causes of problems users
encounter
Supply theories, modelling tools, guidance and methods that can
lead to the design of better interactive products
www.id-book.com
49
Cognitive processes
Attention
Perception
Memory
Learning
Reading, speaking and listening
Problem-solving, planning, reasoning and decisionmaking
www.id-book.com
50
Attention
Selecting things to concentrate on at a point in time from the mass of

stimuli around us
Allows us to focus on information that is relevant to what we are doing
Involves audio and/or visual senses
Focussed and divided attention enables us to be selective in terms of the

mass of competing stimuli but limits our ability to keep track of all events
Information at the interface should be structured to capture users

attention, e.g. use perceptual boundaries (windows), colour, reverse
video, sound and flashing lights
www.id-book.com
51
Activity: Find the price of a double room at the Holiday Inn

in Columbia
www.id-book.com
52
Activity: Find the price for a double room at the Quality Inn
in Pennsylvania a
www.id-book.com
53
Activity
Tullis (1987) found that the two screens produced quite
different results
1st screen - took an average of 5.5 seconds to search
2nd screen - took 3.2 seconds to search
Why, since both displays have the same density of

information (31%)?
Spacing
In the 1st screen the information is bunched up together, making it
hard to search
In the 2nd screen the characters are grouped into vertical categories
of information making it easier
www.id-book.com
54
Multitasking and attention

Is it possible to perform multiple tasks without one or
more of them being detrimentally affected?
Ophir et al (2009) compared heavy vs light multi-taskers

heavy were more prone to being distracted than those who
infrequently multitask
heavy multi-taskers are easily distracted and find it difficult to
filter irrelevant information
www.id-book.com
55
Design implications for attention

Make information salient when it needs attending to
Use techniques that make things stand out like color,
ordering, spacing, underlining, sequencing and
animation
Avoid cluttering the interface with too much information
Search engines and form fill-ins that have simple and
clean interfaces are easier to use
www.id-book.com
56
Perception
How information is acquired from the world and
transformed into experiences
Obvious implication is to design representations that
are readily perceivable, e.g.
Text should be legible
Icons should be easy to distinguish and read
www.id-book.com
57
Is color contrast good? Find Italian
www.id-book.com
58
Are borders and white space better? Find

french
www.id-book.com
59
Activity
Weller (2004) found people took less time to
locate items for information that was grouped
using a border (2nd screen) compared with using color contrast
(1st screen)
Some argue that too much white space on web

pages is detrimental to search
Makes it hard to find information
Do you agree?
www.id-book.com
14
Which is easiest to read and why?
What is the time?
What is the time?
What is the time?
What is the time?
What is the time?
www.id-book.com
61
Design implications
Icons should enable users to readily distinguish their meaning
Bordering and spacing are effective visual ways of grouping information
Sounds should be audible and distinguishable
Speech output should enable users to distinguish between the set of
spoken words
Text should be legible and distinguishable from the background
Tactile feedback should allow users to recognize and distinguish different
meanings
www.id-book.com
62
Memory
Involves first encoding and then retrieving knowledge.
We dont remember everything - involves filtering and
processing what is attended to
Context is important in affecting our memory (i.e. where, when)
We recognize things much better than being able to recall things
we remember less about objects we have photographed than
when we observe them with the naked eye (Henkel, 2014)
www.id-book.com
63
Processing in memory
Encoding is first stage of memory
determines which information is attended to in the environment and
how it is interpreted
The more attention paid to something

The more it is processed in terms of thinking about it and
comparing it with other knowledge
The more likely it is to be remembered
e.g. when learning about HCI, it is much better to reflect upon it, carry
out exercises, have discussions with others about it, and write notes
than just passively read a book, listen to a lecture or watch a video
about it
www.id-book.com
64
Context is important
Context affects the extent to which information
can be subsequently retrieved
Sometimes it can be difficult for people to recall
information that was encoded in a different
context:
You are on a train and someone comes up to you and says
hello. You dont recognize him for a few moments but then
realize it is one of your neighbors. You are only used to seeing
your neighbor in the hallway of your apartment block and seeing
ahim out of context makes him difficult to recognize initially
www.id-book.com
65
Activity
Try to remember the dates of your grandparents birthday
Try to remember the cover of the last two DVDs you bought or
rented
Which was easiest? Why?
People are very good at remembering visual cues about things
e.g. the color of items, the location of objects and marks on an object
They find it more difficult to learn and remember arbitrary

material
e.g. birthdays and phone numbers
www.id-book.com
66
Recognition versus recall

Command-based interfaces require users to
recall from memory a name from a possible set of
100s
GUIs providMP3 players visually-based options
that users need only browse through until they
recognize one
Web browsers, etc., provide lists of visited URLs,
song titles etc., that support recognition memory
www.id-book.com
67
The problem with the classic 72

George Millers (1956) theory of how much
information people can remember
Peoples immediate memory capacity is very limited
Many designers think this is useful finding for
interaction design
But
www.id-book.com
68
What some designers get up to

Present only 7 options on a menu
Display only 7 icons on a tool bar
Have no more than 7 bullets in a list
Place only 7 items on a pull down menu
Place only 7 tabs on the top of a website page
But this is wrong? Why?
www.id-book.com
69
Why?
Inappropriate application of the theory
People can scan lists of bullets, tabs, menu
items for the one they want
They dont have to recall them from memory
having only briefly heard or seen them
Sometimes a small number of items is good
But depends on task and available screen
estate
www.id-book.com
70
Digital content management

Is a growing problem for many users
vast numbers of documents, images, music files, video clips,
emails, attachments, bookmarks, etc.,
where and how to save them all, then remembering what they
were called and where to find them again
naming most common means of encoding them
but can be difficult to remember, especially when have 1000s
and 1000s
How might such a process be facilitated taking into account
peoples memory abilities?
www.id-book.com
71
Digital content management

Memory involves 2 processes
recall-directed and recognition-based scanning
File management systems should be designed

to optimize both kinds of memory processes
e.g. Search box and history list
Help users encode files in richer ways

Provide them with ways of saving files using colour, flagging,
image, flexible text, time stamping, etc.
www.id-book.com
72
Is Apples Spotlight search tool any

good?
www.id-book.com
73
Digital Forgetting
When might you wish to forget something that is
online?
When you break up with a partner
Emotionally painful to be reminded of them through
shared photos, social media, etc.,
Sas and Whittaker (2013) suggest new ways of

harvesting and deleting digital content
e.g. making photos of ex into an abstract collage
helps with closure
www.id-book.com
74
Memory aids
SenseCam developed by Microsoft Research
Labs (now Autographer)
a wearable device that intermittently takes
photos without any user intervention while worn
digital images taken are stored and revisited
using special software
Has been found to improve peoples memory,
suffering from Alzheimers
www.id-book.com
75
SenseCam
www.id-book.com
76
Design implications
Dont overload users memories with
complicated procedures for carrying out tasks
Design interfaces that promote recognition
rather than recall
Provide users with various ways of encoding
information to help them remember
e.g. categories, color, flagging, time stamping
www.id-book.com
77
Learning
How to learn to use a computer-based
application
Using a computer-based application or
YouTube video to understand a given topic
People find it hard to learn by following
instructions in a manual
prefer to learn by doing
www.id-book.com
78
Cognitive prosthetic devices

We rely more and more on the internet and
smartphones to look things up
Cognitive resource cf. extended mind
Expecting to have internet access reduces the
need and extent to which we remember
Also enhances our memory for knowing where
to find it online (Sparrow et al,2011)
What are implications for designing technologies
to support how people will learn, and what they
learn?
www.id-book.com
79
Design implications
Design interfaces that encourage
exploration
Design interfaces that constrain and guide
learners
Dynamically linking concepts and
representations can facilitate the learning
of complex material
www.id-book.com
80
Reading, speaking, and listening

The ease with which people can read, listen, or
speak differs
Many prefer listening to reading
Reading can be quicker than speaking or listening
Listening requires less cognitive effort than reading or
speaking
Dyslexics have difficulties understanding and
recognizing written words
www.id-book.com
81
Applications
Speech-recognition systems allow users to interact with
them by asking questions
e.g. Google Voice, Siri
Speech-output systems use artificially generated speech

e.g. written-text-to-speech systems for the blind
Natural-language systems enable users to type in

questions and give text-based responses
e.g. Ask search engine
www.id-book.com
82
Design implications
Speech-based menus and instructions
should be short
Accentuate the intonation of artificially
generated speech voices
they are harder to understand than human voices
Provide opportunities for making text large on

a screen
www.id-book.com
83
Problem-solving, planning, reasoning and decision-making
All involves reflective cognition

e.g. thinking about what to do, what the options
are, and the consequences
Often involves conscious processes, discussion with
others (or oneself), and the use of artefacts
e.g. maps, books, pen and paper
May involve working through different scenarios and
deciding which is best option
www.id-book.com
84
Design implications
Provide additional information/functions for
users who wish to understand more about how
to carry out an activity more effectively
Use simple computational aids to support rapid
decision-making and planning for users on the
move
www.id-book.com
85
Dilemma
The app mentality developing in the psyche of the
younger generation is making it worse for them to
make their own decisions because they are
becoming risk averse (Gardner and Davis, 2013)
Relying on a multitude of apps means that they
are becoming increasingly more anxious about
making decisions by themselves
Do you agree? Can you think of an example?
www.id-book.com
86
Mental models
Users develop an understanding of a system through
learning about and using it
Knowledge is sometimes described as a mental model:
How to use the system (what to do next)
What to do with unfamiliar systems or unexpected situations (how
the system works)
People make inferences using mental models of how to

carry out tasks
www.id-book.com
87
Mental models
Craik (1943) described mental models as:
internal constructions of some aspect of the
external world enabling predictions to be made
Involves unconscious and conscious

processes
images and analogies are activated
Deep versus shallow models

e.g. how to drive a car and how it works
www.id-book.com
88
Everyday reasoning and mental

models
(a) You arrive home on a cold winters night to a cold house.
How do you get the house to warm up as quickly as
possible? Set the thermostat to be at its highest or to the
desired temperature?
(b) You arrive home starving hungry. You look in the fridge
and find all that is left is an uncooked pizza. You have an
electric oven. Do you warm it up to 375 degrees first and
then put it in (as specified by the instructions) or turn the
oven up higher to try to warm it up quicker?
www.id-book.com
89
Heating up a room or oven that is

thermostat-controlled
Many people have erroneous mental models (Kempton,
1996)
Why?
General valve theory, where more is more principle is
generalised to different settings (e.g. gas pedal, gas cooker, tap,
radio volume)
12
Thermostats based on model of on-off switch model
www.id-book.com
90
Heating up a room or oven that is

thermostat-controlled
Same is often true for understanding how
interactive devices and computers work:
poor, often incomplete, easily confusable, based on
inappropriate analogies and superstition (Norman,
1983)
e.g. elevators and pedestrian crossings - lot of people
hit the button at least twice
Why? Think it will make the lights change faster or
ensure the elevator arrives!
www.id-book.com
91
Exercise: ATMs
Write down how an ATM works
How much money are you allowed to take out?
What denominations?
If you went to another machine and tried the same what would happen?
What information is on the strip on your card? How is this used?
What happens if you enter the wrong number?
Why are there pauses between the steps of a transaction? What happens if you try to
type during them?
Why does the card stay inside the machine?
Do you count the money? Why?
www.id-book.com
92
How did you fare?

Your mental model
How accurate?
How similar?
How shallow?
Payne (1991) did a similar study and found that

people frequently resort to analogies to explain how
they work
Peoples accounts greatly varied and were often ad
hoc
www.id-book.com
93
Gulfs of execution and evaluation

The gulfs explicate the gaps that exist between
the user and the interface
The gulf of execution
the distance from the user to the physical system
The gulf of evaluation

the distance from the physical system to the user
Bridging the gulfs can reduce cognitive effort

required to perform tasks
Norman, 1986; Hutchins et al, 1986
www.id-book.com
94
Bridging the gulfs
www.id-book.com
95
Information processing
Conceptualizes human performance in
metaphorical terms of information
processing stages
www.id-book.com
96
Model Human processor (Card et al,

1983)
Models the information processes of a user
interacting with a computer
Predicts which cognitive processes are
involved when a user interacts with a
computer
Enables calculations to be made of how long
a user will take to carry out a task
www.id-book.com
97
The human processor model
www.id-book.com
98
Limitations
Based on modelling mental activities that
happen exclusively inside the head
Do not adequately account for how people
interact with computers and other devices
in real world
www.id-book.com
99
Distributed cognition
Concerned with the nature of cognitive
phenomena across individuals, artefacts, and
internal and external representations (Hutchins,
1995)
Describes these in terms of propagation across
representational state
Information is transformed through different
media (computers, displays, paper, heads)
www.id-book.com
100
How it differs from information

processing
www.id-book.com
101
www.id-book.com
102
Whats involved
The distributed problem-solving that takes place
The role of verbal and non-verbal behavior
The various coordinating mechanisms that are
used (e.g. rules, procedures)
The communication that takes place as the
collaborative activity progresses
How knowledge is shared and accessed
www.id-book.com
103
External cognition
Concerned with explaining how we interact with
external representations (e.g. maps, notes,
diagrams)
What are the cognitive benefits and what
processes involved
How they extend our cognition
What computer-based representations can we
develop to help even more?
www.id-book.com
104
Externalizing to reduce memory load

Diaries, reminders, calendars, notes, shopping lists, to-do lists
written to remind us of what to do
Post-its, piles, marked emails

where placed indicates priority of what to do
External representations:
Remind us that we need to do something (e.g. to buy something for
mothers day)
Remind us of what to do (e.g. buy a card)
Remind us when to do something (e.g. send a card by a certain date)
www.id-book.com
105
Computational offloading
When a tool is used in conjunction with an external
representation to carry out a computation (e.g. pen
and paper)
Try doing the two sums below (a) in your head, (b) on
a piece of paper and c) with a calculator.
234 x 456 =??
CCXXXIIII x CCCCXXXXXVI = ???
Which is easiest and why? Both are identical sums
www.id-book.com
106
Annotation and cognitive tracing

Annotation involves modifying existing
representations through making marks
e.g. crossing off, ticking, underlining
Cognitive tracing involves externally

manipulating items into different orders or
structures
e.g. playing Scrabble, playing cards
www.id-book.com
107
Design implication
Provide external representations at the
interface that reduce memory load and
facilitate computational offloading
e.g. Information visualizations have been designed
to allow people to make sense and rapid decisions
about masses of data
www.id-book.com
108
Summary
Cognition involves several processes including attention,
memory, perception and learning
The way an interface is designed can greatly affect how
well users can perceive, attend, learn and remember
how to do their tasks
Theoretical frameworks, such as mental models and
external cognition, provide ways of understanding how
and why people interact with products
This can lead to thinking about how to design better
products
www.id-book.com
109
www.id-book.com
110
Chapter 4
SOCIAL INTERACTION
Overview
Being social
Face to face conversations
Remote conversations
Tele-presence
Co-presence
Shareable technologies
www.id-book.com
112
Conversational mechanisms
Various mechanisms and rules are
followed when holding a conversation, e.g.
mutual greetings
A: Hi there
B: Hi!
C: Hi
A: All right?
C: Good, hows it going?
A: Fine, how are you?
C: OK
B: So-so. Hows life treating you?
www.id-book.com
113
Being social
Are F2F conversations being superseded by our
social media interactions?
How many friends do you have on Facebook,
LinkedIn,etc vs real life?
How much overlap?
How are the ways we live and interact with one
another changing?
Are the established rules and etiquette still
applicable to online and offline?
www.id-book.com
114
Conversational rules
Sacks et al. (1978) work on conversation
analysis describe three basic rules:
Rule 1: the current speaker chooses the next speaker
by asking an opinion, question, or request
Rule 2: another person decides to start speaking
Rule 3: the current speaker continues talking
www.id-book.com
115
Conversational rules
Turn-taking used to coordinate conversation
A: Shall we meet at 8?
B: Um, can we meet a bit later?
A: Shall we meet at 8?
B: Wow, look at him?
A: Yes what a funny hairdo!
B: Um, can we meet a bit later?
Back channelling to signal to continue and following

Uh-uh, umm, ahh
www.id-book.com
116
More conversational rules

Farewell rituals
Bye then, see you, yer bye, see you later.
Implicit and explicit cues

e.g. looking at watch, fidgeting with coat and bags
explicitly saying Oh dear, must go, look at the time,
Im late
www.id-book.com
117
Breakdowns in conversation
When someone says something that
is misunderstood:
Speaker will repeat with emphasis:
A: this one?
B: no, I meant that one!
Also use tokens:

Eh? Quoi? Huh? What?
www.id-book.com
118
What happens in social media

conversations?
Do same conversational rules apply?
Are there more breakdowns?
How do people repair them for:
Phone?
email?
Instant messaging?
texting?
Skyping?
www.id-book.com
119
Remote conversations
Much research on how to support
conversations when people are at a distance
from each other
Many applications have been developed
e.g., email, videoconferencing, videophones, instant messaging,
chatrooms
Do they mimic or move beyond existing ways

of conversing?
www.id-book.com
120
Early videophone and visualphone
www.id-book.com
121
VideoWindow system (Bellcore, 1989)

Shared space that allowed people 50
miles apart to carry on a conversation as if
in same room drinking coffee together
3 x 8 ft picture-window between two sites
with video and audio
People did interact via the window but
strange things happened (Kraut, 1990)
www.id-book.com
122
Sketch of VideoWindow
www.id-book.com
123
Findings of how VideoWindow

System was used
Talked constantly about the system
Spoke more to other people in the same
room rather than in other room
When tried to get closer to someone in other
place had opposite effect - went out of range
of camera and microphone
No way of monitoring this
www.id-book.com
124
Skype success
Global household name
Seeing others on screen enables more
intimacy than audio phone
Enables people to get to know each
other better
Less awkward for young children
Like to show, not tell (Ames et al, 2010)
www.id-book.com
125
3D virtual worlds
Second Life (2007)
Over 8 million users
What kinds of conversation take place in these

environments?
VoIP versus chatroom talk?
Which is preferred and why?
www.id-book.com
126
Facebook and Twitter

Everyone uses them so what is there to
learn?
Used in emergencies, demos, etc.,
e.g., users spread up-to-the minute info and
retweet about how a wildfire or gas plume is
moving
but can also start or fuel rumours, by adding
news that is old or incorrect
more confusing than helpful
www.id-book.com
127
Telepresence
New technologies designed to allow a
person to feel as if they were present in
the other location
projecting their body movements, actions,
voice and facial expressions to the other
location or person
e.g. superimpose images of the other person
on a workspace
www.id-book.com
128
Hypermirror (Morikawa and Maesako,

1998)
allows people to feel as if they are in the
same virtual place even though in physically
different spaces
(woman in
white sweater
is in a
different room
to the other
three)
People in different
places are
superimposed
on the same screen
to make them appear
as if in same space
www.id-book.com
129
Creating personal space in

Hypermirror
2) Two in this room are invading

the virtual personal space
of the other person by appearing to be
physically on top of woman in white sweater
www.id-book.com
3) Two in the room move

apart to allow person
in other space more virtual
personal space
130
Everyone happy
www.id-book.com
131
BiReality
www.id-book.com
132
The Peoples Bot attending CHI
www.id-book.com
133
A telepresence room
www.id-book.com
134
How much realism?

Is needed in telepresence to make it
compelling?
Telepresence rooms try make the remote
people appear to be life-like by using
multiple high def cameras with eye-tracking
features and directional microphones
Is Skype just as good?
www.id-book.com
135
Coordination mechanisms
When a group of people act or interact together
they need to coordinate themselves
e.g., playing football, navigating a ship
They use:
verbal and non-verbal communication
schedules, rules, and conventions
shared external representations
www.id-book.com
136
Co-presence
Technologies that enable co-located groups to
collaborate more effectively
when working, learning and socializing
Examples: Smartboards, Surfaces, Wii

and Kinect
www.id-book.com
137
F2F coordinating mechanisms

Talk is central
Non-verbal also used to emphasize and as
substitute
e.g. nods, shakes, winks, glances, gestures and
hand-raising
Formal meetings
explicit structures such as agendas, memos, and
minutes are employed to coordinate the activity
www.id-book.com
138
Awareness mechanisms
Involves knowing who is around, what is
happening, and who is talking with whom
Peripheral awareness
keeping an eye on things happening in the periphery of
vision
Overhearing and overseeing - allows tracking of what
others are doing without explicit cues
www.id-book.com
139
Lo tech awareness mechanism
www.id-book.com
140
Designing technologies to support

awareness
Provide awareness of others who are in
different locations
Workspace awareness: the up-to-themoment understanding of another persons
interaction with the shared workspace
(Gutwin and Greenberg, 2002)
Examples: ReacTable and Reflect Table
www.id-book.com
141
The Reactable experience
www.id-book.com
142
The Reflect Table
www.id-book.com
143
The Dynamo system
www.id-book.com
144
Notification systems
Users notify others as opposed to being
constantly monitored
Provide information about shared objects
and progress of collaborative tasks
example: Babble
www.id-book.com
145
Sococo shows who is where and who is meeting with whom
www.id-book.com
146
What next?
Besides perpetual sharing and
broadcasting of information, knowledge,
and personal content?
Lifelogging
recording everything in ones life and sharing
Micro-chatting
beyond twitter and snapchat?
www.id-book.com
147
Summary
Social mechanisms, like turn-taking, conventions,
etc., enable us to collaborate and coordinate our
activities
Keeping aware of what others are doing and
letting others know what you are doing are
important aspects of collaborative working and
socialising
Many technologies systems have been built to
support telepresence and co-presence
www.id-book.com
148
www.id-book.com
149
Chapter 5
EMOTIONAL
INTERACTION
Overview
Emotions and the user experience
Expressive and annoying interface
how the appearance of an interface can affect users
Models of emotion
Ortony et al (2005)
Automatic emotion recognition and emotional technologies

Persuasive technologies and behavioral change
how technologies can be designed to change peoples attitudes and behavior
Anthropomorphism
The pros and cons
www.id-book.com
151
Emotions and the user experience

HCI has traditionally been about designing efficient and
effective systems
Now more about how to design interactive systems that
make people respond in certain ways
e.g. to be happy, to be trusting, to learn, to be motivated
Emotional interaction is concerned with how we feel and

react when interacting with technologies
www.id-book.com
152
Is this form fun to fill in?

My goal was to design
Wufoo to feel like
something Fisher-Price
would make.
- Kevin Hale, Wufoo director
www.id-book.com
153
Emotional interaction
What makes us happy, sad, annoyed, anxious,
frustrated, motivated, delirious and so on
translating this into different aspects of the user experience
Why people become emotionally attached to certain

products (e.g. virtual pets)
Can social robots help reduce loneliness and improve
wellbeing?
How to change human behavior through the use of
emotive feedback
www.id-book.com
154
Activity
Try to remember the emotions you went
through when buying a big ticket item
online (e.g. a fridge, a vacation, a
computer)
How many different emotions did you go
through?
www.id-book.com
155
Emotional design model

Norman, Ortony and Revelle (2004) model of emotion
www.id-book.com
156
Claims from model

Our emotional state changes how we think
when frightened or angry we focus narrowly and body
responds by tensing muscles and sweating
more likely to be less tolerant
when happy we are less focused and the body

relaxes
more likely to overlook minor problems and be more creative
www.id-book.com
157
Activity
Do you feel more creative when you are in
a happy mood? Do you get less work
done when you are feeling stressed?
www.id-book.com
158
Expressive interfaces
Provide reassuring feedback that can be both
informative and fun
But can also be intrusive, causing people to get annoyed
and even angry
Color, 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 appealing and aesthetic
www.id-book.com
159
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
www.id-book.com
160
Bob
www.id-book.com
161
Clippy
Why was Clippy
disliked
by so many?
Was it annoying,
distracting,
patronising or
other?
What sort of user
liked Clippy?
www.id-book.com
162
Frustrating interfaces
Many causes:
When an application doesnt work properly or crashes
When a system doesnt do what the user wants it to do
When a users expectations are not met
When a system does not provide sufficient information to enable the
user to know what to do
When error messages pop up that are vague, obtuse or condemning
When the appearance of an interface is garish, noisy, gimmicky or
patronizing
When a system requires users to carry out too many steps to perform a
task, only to discover a mistake was made earlier and they need to start
all over again
www.id-book.com
163
Gimmicks
Amusing to the designer but not the user,
e.g.
Clicking on a link to a website only to discover
that it is still under construction
www.id-book.com
164
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
Shneidermans 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
www.id-book.com
165
Website error messages
www.id-book.com
166
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.
www.id-book.com
167
Should computers say theyre 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:
Im really sorry I crashed. Ill try not to do it again
How else should computers communicate with users?
www.id-book.com
168
Detecting emotions and emotional

technology
Sensing technologies used to measure
GSR, facial expressions, gestures, body
movement
Aim is to predict users emotions and
aspects of their behavior
E.g. what is someone most likely to buy
online when feeling sad, bored or happy
www.id-book.com
169
Facial Coding
Measures a users emotions as they interact with
a computer or tablet
Analyses images captured by a webcam of their

face
Uses this to gauge how engaged the user is when
looking at movies, online shopping sites and ads
6 core expressions - sadness, happiness, disgust,
fear, surprise and anger
www.id-book.com
170
www.id-book.com
171
How to use the emotional data?

If user screws up their face when an ad
pops up -> feel disgust
If start smiling -> they are feeling happy
Website can adapt its ad, movie storyline
or content to match users emotional state
Eye-tracking, finger pulse, speech and
words/phrases also analysed when
tweeting or posting to Facebook
www.id-book.com
172
Indirect emotion detection

Beginning to be used more to infer or
predict someones behavior
For example, determining a persons
suitability for a job, or how they will vote at
an election
Do you think it is creepy that technology
can read your emotions from your facial
expressions or from your tweets?
www.id-book.com
173
Persuasive technologies and behavioral

change
Interacive computing systems deliberately
designed to change peoples attitudes and
behaviors (Fogg, 2003)
A diversity of techniques now used to change what
they do or think
Pop-up ads, warning messages, reminders, prompts, personalized
messages, recommendations, Amazon 1-click
Commonly referred to as nudging
www.id-book.com
174
Nintendos Pocket Pikachu

Changing bad habits and improving well being
Designed to motivate children to be more physically
active on a regular basis
owner of the digital pet that lives in the device is
required to walk, run, or jump
If owner does not exercise the virtual pet becomes
angry and refuses to play anymore
www.id-book.com
175
How effective?
Is the use of novel forms of interactive
technologies (e.g., the combination of
sensors and dynamically updated
information) that monitor, nag, or send
personalized messages intermittently to a
person more effective at changing a persons
behavior than non-interactive methods, such
as the placement of warning signs, labels, or
ads in prominent positions?
www.id-book.com
176
Which is most effective?
www.id-book.com
177
Tracking devices
Mobile apps designed to help people
monitor and change their behaviour (e.g.
fitness, sleeping, weight)
Can compare with online leader boards
and charts, to show how they have done
in relation to their peers and friends
Also apps that encourage reflection that in
turn increase well-being and happiness
www.id-book.com
178
Energy reduction
www.id-book.com
179
The Tidy Street project

large-scale visualization of the streets
electricity usage
stenciled display on the road surface using chalk
provided realtime feedback that all could see change each day
reduced electricity consumption by 15%
www.id-book.com
180
Phishing and trust

Web used to deceive people into parting with
personal details
e.g. Paypal, eBay and won the lottery letters
Allows Internet fraudsters to access their bank

accounts and draw money from them
Many vulnerable people fall for it
The art of deception is centuries old but internet
allows ever more ingenious ways to trick people
www.id-book.com
181
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
www.id-book.com
182
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. Lets start again.
User 24, commence exercise 5.
www.id-book.com
183
Which do you prefer?

2. Feedback when get something wrong
1. Now Chris, thats not right. You can do better
than that. Try again.
2. Incorrect. Try again.
Is there a difference as to what you prefer
depending on type of message? Why?
www.id-book.com
184
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
www.id-book.com
185
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 and say:
Now Chris, thats 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)
www.id-book.com
186
Virtual characters
Appearing on our screens in the form of:
Sales agents, characters in videogames,

learning companions, wizards, pets,
newsreaders
Provides a persona that is welcoming, has

personality and makes user feel involved
with them
www.id-book.com
187
Disadvantages
Can lead people into false sense of belief,
enticing them to confide personal secrets with
chatterbots
Annoying and frustrating
e.g. Clippy
May not be trustworthy

virtual shop assistants?
www.id-book.com
188
Virtual agents
What do the virtual agents do?
Do they elicit an emotional response in
you?
Do you trust them?
What is the style of interaction?
What facial expression do they have?
Are they believable, pushy, helpful?
Would it be different if they were male?
If so, how?
www.id-book.com
189
What makes a virtual agent believable?

Believability refers to the extent to which
users come to believe an agents 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 (c.f. animation industry)
www.id-book.com
190
Robot-like or cuddly?
Which do you prefer and why?
www.id-book.com
191
Implications
Should we create products that adapt according
to peoples different emotional states?
When people are feeling angry should an interface
be more attentive and informative than when they
are happy?
Is Norman right?
designers can get away with more for products
intended to be used during leisure time than those
designed for serious tasks
www.id-book.com
192
Summary
Emotional aspects of interaction design concerned with how to
facilitate certain states (e.g. pleasure) or avoid reactions (e.g.
frustration)
Well-designed interfaces can elicit good feelings in people
Aesthetically pleasing interfaces can be a pleasure to use
Expressive interfaces can provide reassuring feedback to users
Badly designed interfaces make people frustrated, annoyed, or
angry
Emotional technologies can be designed to persuade people to
change their behaviors or attitudes
Anthropomorphism is the attribution of human qualities to objects
Virtual agents and robot pets have been developed to make people
feel motivated, reassured, and in a good mood
www.id-book.com
193
www.id-book.com
194
Chapter 6
INTERFACES
Overview
Interface types
highlight the main design and research issues
for each of the different interfaces
Consider which interface is best for a

given application or activity
www.id-book.com
196
1. Command-based
Commands such as abbreviations (e.g. ls) typed
in at the prompt to which the system responds
(e.g. listing current files)
Some are hard wired at keyboard, others can be
assigned to keys
Efficient, precise, and fast
Large overhead to learning set of commands
www.id-book.com
197
Second Life command-based interface

for visually impaired users
www.id-book.com
198
Research and design issues

Form, name types and structure are key
research questions
Consistency is most important design principle
e.g. always use first letter of command
Command interfaces popular for web scripting
www.id-book.com
199
2. WIMP and GUI

Xerox Star first WIMP -> rise to GUIs
Windows
could be scrolled, stretched, overlapped, opened, closed, and moved around
the screen using the mouse
Icons
represented applications, objects, commands, and tools that were opened when
clicked on
Menus
offering lists of options that could be scrolled through and selected
Pointing device
a mouse controlling the cursor as a point of entry to the windows, menus, and
icons on the screen
www.id-book.com
200
GUIs
Same basic building blocks as WIMPs but more
varied
Color, 3D, sound, animation,
Many types of menus, icons, windows
New graphical elements, e.g.

toolbars, docks, rollovers
Challenge now is to design GUIs that are best suited

for tablet, smartphone and smartwatch interfaces
www.id-book.com
201
Windows
Windows were invented to overcome physical
constraints of a computer display
enable more information to be viewed and tasks to be
performed
Scroll bars within windows also enable more

information to be viewed
Multiple windows can make it difficult to find
desired one
listing, iconising, shrinking are techniques that help
www.id-book.com
202
www.id-book.com
203
Apples shrinking windows
www.id-book.com
204
Safari panorama window view
www.id-book.com
205
Selecting a country from a scrolling

window
www.id-book.com
206
Is this method any better?
www.id-book.com
207

Window management
enables users to move fluidly between different
windows (and monitors)
How to switch attention between windows

without getting distracted
Design principles of spacing, grouping, and
simplicity should be used
www.id-book.com
208
Menus
A number of menu interface styles
flat lists, drop-down, pop-up, contextual, and expanding ones,
e.g., scrolling and cascading
Flat menus
good at displaying a small number of options at the same time
and where the size of the display is small, e.g. iPods
but have to nest the lists of options within each other, requiring
several steps to get to the list with the desired option
moving through previous screens can be tedious
www.id-book.com
209
Expanding menus
Enables more options to be shown on a single
screen than is possible with a single flat menu
More flexible navigation, allowing for selection of
options to be done in the same window
Most popular are cascading ones
primary, secondary and even tertiary menus
downside is that they require precise mouse control
can result in overshooting or selecting wrong options
www.id-book.com
210
Cascading menu
www.id-book.com
211
Contextual menus
Provide access to often-used commands that
make sense in the context of a current task
Appear when the user presses the Control key
while clicking on an interface element
e.g., clicking on a photo in a website together with holding down
the Control key results in options open it in a new window, save
it, or copy it
Helps overcome some of the navigation

problems associated with cascading menus
www.id-book.com
212
Windows Jump List Menu
www.id-book.com
213

What are best names/labels/phrases to use?
Placement in list is critical
Quit and save need to be far apart
Choice of menu to use determined by application

and type of system
flat menus are best for displaying a small number of
options at one time
expanding menus are good for showing a large
number of options
www.id-book.com
214
Icon design
Icons are assumed to be easier to learn and
remember than commands
Can be designed to be compact and variably
positioned on a screen
Now pervasive in every interface
e.g. represent desktop objects, tools (e.g. paintbrush),
applications (e.g. web browser), and operations (e.g.
cut, paste, next, accept, change)
www.id-book.com
215
Icons
Since the Xerox Star days icons have changed
in their look and feel:
black and white -> color, shadowing, photorealistic
images, 3D rendering, and animation
Many designed to be very detailed and animated

making them both visually attractive and
informative
GUIs now highly inviting, emotionally appealing,
and feel alive
www.id-book.com
216
Icon forms
The mapping between the representation and underlying
referent can be:
similar (e.g., a picture of a file to represent the object file)
analogical (e.g., a picture of a pair of scissors to represent cut)
arbitrary (e.g., the use of an X to represent delete)
Most effective icons are similar ones

Many operations are actions making it more difficult to
represent them
use a combination of objects and symbols that capture the salient part of an
action
www.id-book.com
217
Early icons
www.id-book.com
218
Newer icons
www.id-book.com
219
Simple flat 2D icons
www.id-book.com
220
Activity
Sketch simple icons to represent the following
operations to appear on a digital camera screen:
Turn image 90 degrees sideways
Auto-enhance the image
Fix red-eye
Crop the image
Show them to someone else and see if they can

understand what each represents
www.id-book.com
221
Basic edit icons on iPhone

Which is which?
Are they easy to understand
Are they distinguishable?
What representation forms
are used?
How do yours compare?
www.id-book.com
222

There is a wealth of resources now so do not
have to draw or invent new icons from scratch
guidelines, style guides, icon builders, libraries
Text labels can be used alongside icons to help

identification for small icon sets
For large icon sets (e.g. photo editing or word
processing) use rollovers
www.id-book.com
223
3. Multimedia
Combines different media within a single
interface with various forms of interactivity
graphics, text, video, sound, and animations
Users click on links in an image or text
-> another part of the program

-> an animation or a video clip is played
->can return to where they were or move on to another
place
www.id-book.com
224
BioBlast Multimedia Learning Environment
www.id-book.com
225
Pros and cons

Facilitates rapid access to multiple representations of
information
Can provide better ways of presenting information than

can any media alone
Can enable easier learning, better understanding, more

engagement, and more pleasure
Can encourage users to explore different parts of a
game or story
Tendency to play video clips and animations, while
skimming through accompanying text or diagrams
www.id-book.com
226

How to design multimedia to help users explore,
keep track of, and integrate the multiple
representations
provide hands-on interactivities and simulations that the user has
to complete to solve a task
Use dynalinking, where information depicted in one window
explicitly changes in relation to what happens in another (Scaife
and Rogers, 1996).
Several guidelines that recommend how to

combine multiple media for different kinds of task
www.id-book.com
227
4. Virtual reality
Computer-generated graphical simulations
providing:
the illusion of participation in a synthetic environment
rather than external observation of such an
environment (Gigante, 1993)
Provide new kinds of experience, enabling users

to interact with objects and navigate in 3D space
Create highly engaging user experiences
www.id-book.com
228
Pros and cons

Can have a higher level of fidelity with objects they
represent compared to multimedia
Induces a sense of presence where someone is totally
engrossed by the experience
a state of consciousness, the (psychological) sense of being in
the virtual environment (Slater and Wilbur, 1999)
Provides different viewpoints: 1st and 3rd person

Head-mounted displays are uncomfortable to wear, and
can cause motion sickness and disorientation
www.id-book.com
229

Much research on how to design safe and realistic VRs to facilitate
training
e.g. flying simulators
help people overcome phobias (e.g. spiders, talking in public)
Design issues
how best to navigate through them (e.g. first versus third person)
how to control interactions and movements (e.g. use of head and body
movements)
how best to interact with information (e.g. use of keypads, pointing, joystick
buttons);
level of realism to aim for to engender a sense of presence
www.id-book.com
230
Which is the most engaging game of

Snake?
www.id-book.com
231
5. Information visualization and

dashboards
Computer-generated interactive graphics of complex data
Amplify human cognition, enabling users to see patterns,
trends, and anomalies in the visualization (Card et al, 1999)
Aim is to enhance discovery, decision-making, and
explanation of phenomena
Techniques include:
3D interactive maps that can be zoomed in and out of and which
present data via webs, trees, clusters, scatterplot diagrams, and
interconnected nodes
www.id-book.com
232
Dashboards
Show screenshots of data updated over periods of
time - to be read at a glance
Usually not interactive - slices of data that depict
current state of a system or process
Need to provide digestible and legible information for
users
design its spatial layout so intuitive to read when first
looking at it
should also direct a users attention to anomalies or
unexpected deviations
www.id-book.com
233
Which dashboard is best?
www.id-book.com
234
Which dashboard is best?
www.id-book.com
235

Whether to use animation and/or interactivity
What form of coding to use, e.g. color or text
labels
Whether to use a 2D or 3D representational
format
What forms of navigation, e.g. zooming or
panning,
What kinds and how much additional information
to provide, e.g. rollovers or tables of text
What navigational metaphor to use
www.id-book.com
236
6. Web
Early websites were largely text-based, providing
hyperlinks
Concern was with how best to structure information
to enable users to navigate and access it easily and
quickly
Nowadays, more emphasis on making pages
distinctive, striking, and pleasurable
Need to think of how to design information for multiplatforms - keyboard or touch?
e.g. smartphones, tablets, PCs
www.id-book.com
237
Usability versus attractive?

Vanilla or multi-flavor design?
Ease of finding something versus aesthetic and enjoyable
experience
Web designers are:

thinking great literature
Users read the web like a:

billboard going by at 60 miles an hour (Krug, 2000)
Need to determine how to brand a web page to catch

and keep eyeballs
www.id-book.com
238
In your face ads

Web advertising is often intrusive and
pervasive
Flashing, aggressive, persistent, annoying
Often need to be actioned to get rid of
What is the alternative?
www.id-book.com
239

Need to consider how best to design, present,
and structure information and system behavior
But also content and navigation are central
Veens (2001) design principles
(1)Where am I?
(2)Where can I go?
(3) Whats here?
www.id-book.com
240
Activity
Look at the Nike.com website
What kind of website is it?
How does it contravene the design principles
outlined by Veen?
Does it matter?
What kind of user experience is it providing for?
What was your experience of engaging with it?
www.id-book.com
241
7.
Consumer electronics and appliances
Everyday devices in home, public place, or car

e.g. washing machines, remotes, photocopiers, printers and
navigation systems)
And personal devices

e.g. MP3 player, digital clock and digital camera
Used for short periods

e.g. putting the washing on, watching a program, buying a ticket,
changing the time, taking a snapshot
Need to be usable with minimal, if any, learning

www.id-book.com
242
A toaster
www.id-book.com
243

Need to design as transient interfaces with
short interactions
Simple interfaces
Consider trade-off between soft and hard
controls
e.g. buttons or keys, dials or scrolling
www.id-book.com
244
8. Mobile
Handheld devices intended to be used while on the
move
Have become pervasive, increasingly used in all
aspects of everyday and working life
Apps running on mobiles have greatly expanded, e.g.
used in restaurants to take orders

car rentals to check in car returns
supermarkets for checking stock
in the streets for multi-user gaming
in education to support life-long learning
www.id-book.com
245
The advent of the iPhone app

A whole new user experience that was
designed primarily for people to enjoy
many apps not designed for any need, want or use
but purely for idle moments to have some fun
e.g. iBeer developed by magician Steve Sheraton
ingenious use of the accelerometer that is inside the
phone
www.id-book.com
246
iBeer app
www.id-book.com
247
QR codes and cell phones
www.id-book.com
248
Mobile challenges
Smaller screens, small number of physical keys and
restricted number of controls
Innovative physical designs including:
roller wheels, rocker dials, up/down lips on the face of
phones, 2-way and 4-way directional keypads, softkeys,
silk-screened buttons
Usability and preference varies

depends on the dexterity and commitment of the user
Smartphones overcome mobile physical

constraints through using multi-touch displays
www.id-book.com
249

Mobile interfaces can be tricky and
cumbersome to use for those with poor manual
dexterity or fat fingers
Key concern is hit area
area on the phone display that the user touches to
make something happen, such as a key, an icon, a
button or an app
space needs to be big enough for fat fingers to
accurately press
if too small the user may accidentally press the
wrong key
www.id-book.com
250
9. Speech
Where a person talks with a system that has a
spoken language application, e.g. timetable,
travel planner
Used most for inquiring about very specific
information, e.g. flight times or to perform a
transaction, e.g. buy a ticket
Also used by people with disabilities
e.g. speech recognition word processors, page
scanners, web readers, home control systems
www.id-book.com
251
Have speech interfaces come of age?
www.id-book.com
252
Get me a human operator!

Most popular use of speech interfaces currently
is for call routing
Caller-led speech where users state their needs
in their own words
e.g. Im having problems with my voice mail
Idea is they are automatically forwarded to the

appropriate service
What is your experience of speech systems?
www.id-book.com
253
Format
Directed dialogs are where the system is in control of the
conversation
Ask specific questions and require specific responses
More flexible systems allow the user to take the initiative:
e.g. Id like to go to Paris next Monday for two weeks.
More chance of error, since caller might assume that the
system is like a human
Guided prompts can help callers back on track
e.g. Sorry I did not get all that. Did you say you wanted to fly next
Monday?
www.id-book.com
254

How to design systems that can keep conversation on
track
help people navigate efficiently through a menu system
enable them to easily recover from errors
guide those who are vague or ambiguous in their requests
for information or services
Type of voice actor (e.g. male, female, neutral, or

dialect)
do people prefer to listen to and are more patient with a
female or male voice, a northern or southern accent?
www.id-book.com
255
10. Pen
Enable people to write, draw, select, and move objects at
an interface using lightpens or styluses
capitalize on the well-honed drawing skills developed
from childhood
Digital pens, e.g. Anoto, use a combination of

ordinary ink pen with digital camera that digitally
records everything written with the pen on
special paper
www.id-book.com
256
Pros and cons

Allows users to quickly and easily
annotate existing documents
Can be difficult to see options on the
screen because a users hand can
occlude part of it when writing
Can have lag and feel clunky
www.id-book.com
257
11. Touch
Touch screens, such as walk-up kiosks, detect
the presence and location of a persons touch on
the display
Multi-touch support a range of more dynamic
finger tip actions, e.g. swiping, flicking, pinching,
pushing and tapping
Now used for many kinds of displays, such as
Smartphones, iPods, tablets and tabletops
www.id-book.com
258

More fluid and direct styles of interaction involving
freehand and pen-based gestures
Core design concerns include whether size, orientation,
and shape of touch displays effect collaboration
Much faster to scroll through wheels, carousels and bars
of thumbnail images or lists of options by finger flicking
More cumbersome, error-prone and slower to type using
a virtual keyboard on a touch display than using a
physical keyboard
www.id-book.com
259

Will fingerflicking, swiping,
stroking and
touching a
screen result in
new ways of
consuming,
reading, creating
and searching
digital content?
www.id-book.com
260
12. Air-based gestures

Uses camera recognition, sensor and computer vision
techniques
can recognize peoples body, arm and hand gestures in a room
systems include Kinect
Movements are mapped onto a variety of gaming

motions, such as swinging, bowling, hitting and punching
Players represented on the screen as avatars doing
same actions
www.id-book.com
261
Home entertainment
Universal
appeal
young
children,
grandparent
s,
professional
gamers,
technophob
es
www.id-book.com
262
Gestures in the operating theatre

A touchless system
that recognizes
gestures
surgeons can
interact with and
manipulate MRI or
CT images
e.g. two-handed
gestures for
zooming and
panning
www.id-book.com
263

How does computer recognize and
delineate users gestures?
Deictic and hand waving
Does holding a control device feel more

intuitive than controller free gestures?
For gaming, exercising, dancing
www.id-book.com
264
13. Haptic
Tactile feedback
applying vibration and forces to a persons body, using
actuators that are embedded in their clothing or a
device they are carrying, such as a smartphone
Can enrich user experience or nudge them to

correct error
Can also be used to simulate the sense of touch
between remote people who want to communicate
www.id-book.com
265
Realtime vibrotactile feedback

Provides nudges when
playing incorrectly
Uses motion capture
Nudges are vibrations
on arms and hands
www.id-book.com
266

Where best to place actuators on body
Whether to use single or sequence of touches
When to buzz and how intense
How does the wearer feel it in different contexts?
What kind of new smartphones/smart-watches
apps can use vibrotactile creatively?
e.g. slow tapping to feel like water dropping that is
meant to indicate it is about to rain and heavy tapping to
indicate a thunderstorm is looming
www.id-book.com
267
14. Multi-modal
Meant to provide enriched and complex
user experiences
multiplying how information is experienced and
detected using different modalities, i.e. touch, sight,
sound, speech
support more flexible, efficient, and expressive means
of humancomputer interaction
Most common is speech and vision
www.id-book.com
268

Need to recognize and analyse speech,
gesture, and eye gaze
What is gained from combining different
input and outputs
Is talking and gesturing, as humans do
with other humans, a natural way of
interacting with a computer?
www.id-book.com
269
15. Shareable
Shareable interfaces are designed for more than
one person to use
provide multiple inputs and sometimes allow
simultaneous input by co-located groups
large wall displays where people use their own pens
or gestures
interactive tabletops where small groups interact with
information using their fingertips
e.g. DiamondTouch, Smart Table and Surface
www.id-book.com
270
A smartboard
www.id-book.com
271
DiamondTouch Tabletop
www.id-book.com
272
Advantages
Provide a large interactional space that can
support flexible group working
Can be used by multiple users
Can point to and touch information being displayed
Simultaneously view the interactions and have same
shared point of reference as others
Can support more equitable participation

compared with groups using single PC
www.id-book.com
273

More fluid and direct styles of interaction involving
freehand and pen-based gestures
Core design concerns include whether size,
orientation, and shape of the display have an effect on
collaboration
Horizontal surfaces compared with vertical ones
support more turn-taking and collaborative working in
co-located groups
Providing larger-sized tabletops does not improve
group working but encourages more division of labor
www.id-book.com
274
16. Tangible
Type of sensor-based interaction, where
physical objects, e.g., bricks, are coupled with
digital representations
When a person manipulates the physical
object/s it causes a digital effect to occur, e.g. an
animation
Digital effects can take place in a number of
media and places or can be embedded in the
physical object
www.id-book.com
275
Examples
Chromarium cubes
when turned over digital animations of color are mixed on an adjacent wall
faciliates creativity and collaborative exploration
Flow Blocks
depict changing numbers and lights embedded in the blocks
vary depending on how they are connected together
Urp
physical models of buildings moved around on tabletop
used in combination with tokens for wind and shadows -> digital shadows
surrounding them to change over time
www.id-book.com
276
Benefits
Can be held in both hands and combined and manipulated
in ways not possible using other interfaces
allows for more than one person to explore the interface together
objects can be placed on top of each other, beside each other, and
inside each other
encourages different ways of representing and exploring a problem
space
People are able to see and understand situations differently

can lead to greater insight, learning, and problem-solving than with
other kinds of interfaces
can facilitate creativity and reflection
www.id-book.com
277
VoxBox
A tangible system that gathers opinions at events through playful

and engaging interaction (Goldsteijn et al, 2015)
www.id-book.com
278

Develop new conceptual frameworks that identify novel and specific
features
The kind of coupling to use between the physical action and digital effect
If it is to support learning then an explicit mapping between action and effect is
critical
If it is for entertainment then can be better to design it to be more implicit and
unexpected
What kind of physical artifact to use

Bricks, cubes, and other component sets are most commonly used because of
flexibility and simplicity
Stickies and cardboard tokens can also be used for placing material onto a surface
www.id-book.com
279
17. Augmented and mixed reality

Augmented reality - virtual representations are
superimposed on physical devices and objects
Mixed reality - views of the real world are
combined with views of a virtual environment
Many applications including medicine, games,
flying, and everyday exploring
www.id-book.com
280
Examples
In medicine
virtual objects, e.g. X-rays and scans, are overlaid on part of a
patients body
aid the physicians understanding of what is being examined
or operated
In air traffic control

dynamic information about aircraft overlaid on a video screen
showing the real planes, etc. landing, taking off, and taxiing
Helps identify planes difficult to make out
www.id-book.com
281
An augmented map
www.id-book.com
282
Top Gear James May in AR

Appears as a 3D character to act as personal tour
guide at Science Museum
www.id-book.com
283

What kind of digital augmentation?
When and where in physical environment?
Needs to stand out but not distract from ongoing task
Need to be able to align with real world objects
What kind of device?

Smartphone, head up display or other?
www.id-book.com
284
18.Wearables
First developments were head- and eyewear-mounted
cameras that enabled user to record what was seen and
to access digital information
Since, jewellery, head-mounted caps, smart fabrics,
glasses, shoes, and jackets have all been used
provide the user with a means of interacting with digital
information while on the move
Applications include automatic diaries, tour guides,

cycle indicators and fashion clothing
www.id-book.com
285
Google Glass: short-lived
What were the pros and cons?

www.id-book.com
286

Comfort
needs to be light, small, not get in the way, fashionable, and preferably hidden
in the clothing
Hygiene
is it possible to wash or clean the clothing once worn?
Ease of wear
how easy is it to remove the electronic gadgetry and replace it?
Usability
how does the user control the devices that are embedded in the clothing?
www.id-book.com
287
19. Robots and drones

Four types of robot
remote robots used in hazardous settings
domestic robots helping around the house
pet robots as human companions
sociable robots that work collaboratively with humans,
and communicate and socialize with them as if they
were our peers
www.id-book.com
288
Advantages
Pet robots are assumed to have therapeutic qualities,
helping to reduce stress and loneliness
Remote robots can be controlled to investigate bombs
and other dangerous materials
www.id-book.com
289
Drones
Unmanned aircraft that are controlled remotely and used in a
number of contexts
e.g. entertainment, such as carrying drinks and food to people at festivals
and parties;
agricultural applications, such as flying them over vineyards and fields to
collect data that is useful to farmers
helping to track poachers in wildlife parks in Africa
Can fly low and and stream photos to a ground station, where
images can be stitched together into maps
Can be used to determine the health of a crop or when it is the best
time to harvest the crop
www.id-book.com
290
Drone in vineyard
www.id-book.com
291

How do humans react to physical robots designed to exhibit
behaviors (e.g. making facial expressions) compared with
virtual ones?
Should robots be designed to be human-like or look like and
behave like robots that serve a clearly defined purpose?
Should the interaction be designed to enable people to
interact with the robot as if it was another human being or
more human-computer-like (e.g. pressing buttons to issue
commands)?
Is it acceptable to use unmanned drones to take a series of
images or videos of fields, towns, and private property without
permission or people knowing what is happening?
www.id-book.com
292
20. Brain-computer interfaces

Braincomputer interfaces (BCI) provide a communication
pathway between a persons brain waves and an external
device, such as a cursor on a screen
Person is trained to concentrate on the task, e.g. moving the
cursor
BCIs work through detecting changes in the neural
functioning in the brain
BCIs apps:
Games
enable people who are paralysed to control robots
www.id-book.com
293
Brainball game
www.id-book.com
294
Which interface?
Is multimedia better than tangible interfaces for learning?
Is speech as effective as a command-based interface?
Is a multimodal interface more effective than a monomodal
interface?
Will wearable interfaces be better than mobile interfaces for
helping people find information in foreign cities?
Are virtual environments the ultimate interface for playing
games?
Will shareable interfaces be better at supporting communication

and collaboration compared with using networked desktop PCs?
www.id-book.com
295
Which interface?
Will depend on task, users, context, cost,
robustness, etc.
Mobile platforms taking over from PCs
Speech interfaces also being used much
more for a variety of commercial services
Appliance and vehicle interfaces becoming
more important
Shareable and tangible interfaces entering
our homes, schools, public places, and
workplaces
www.id-book.com
296
Summary
Many innovative interfaces have emerged post the
WIMP/GUI era, including speech, wearable,
mobile, brain and tangible
Raises many design and research questions to
decide which to use
e.g. how best to represent information to the user so
they can carry out ongoing activity or task
New interfaces that are context-aware or monitor

raise ethical issues concerned with what data is
being collected and what it is used for
www.id-book.com
297

Bahan Uts Sistem Interaksi

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bahan Uts Sistem Interaksi

Uploaded by

Copyright:

Available Formats

Chapter 1

WHAT IS INTERACTION DESIGN?

Why is this vending machine so bad?

Marble answering machine (Bishop, 1995)

Good and bad design

Standard remote device?

Minnums new keyboard?

Need to optimize the interactions users have with a

Understanding users needs

What is interaction design?

The design of spaces for human communication and

Goals of interaction design

Involve users in the design process

Which kind of design?

Interaction design is the umbrella term covering all of

HCI and interaction design

Relationship between ID, HCI and other

Relationship between ID, HCI and other

Relationship between ID, HCI and other

Working in multidisciplinary teams

Interaction design in business

What do professionals do in the ID

interaction designers - people involved in the design of all the

usability engineers - people who focus on evaluating products, using

information architects - people who come up with ideas of how to

The User Experience

Cannot design a user experience, only design

Why was the iPod user experience such

What is involved in the process of

Core characteristics of interaction design

Why go to this length?

identify any incorrect assumptions they may have about

be aware of both peoples sensitivities and their capabilities

Are cultural differences important?

Why is it that certain products, like the iPod, are

Anna, IKEA online sales agent

User experience goals

Usability and user experience goals

How easy is it to measure usability versus user

It is not visible as to what to do!

How would you make this action more visible?

make relevant parts visible

What do I do if I am wearing black?

Logical or ambiguous design?

Where do you plug the

Where do you plug the

top or bottom connector?

Do the color coded icons

How to design them more logically

(ii) B provides color coding

Main benefit is consistent interfaces are easier to learn

When consistency breaks down

Have to find other initials or combinations of keys,

Increases learning burden on user, making them more

Internal and external consistency

External consistency refers to designing

Keypad numbers layout

(a) phones, remote controls

(b) calculators, computer keypads

Affordances: to give a clue

Norman (1988) used the term to discuss the design of

What does affordance have to offer

Interfaces are virtual and do not have affordances like physical

Norman argues it does not make sense to talk about interfaces