Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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
www.baddesigns.com
Contravenes well
known convention
www.id-book.com
Good design
www.id-book.com
Dilemma
Which is the best way to interact with a smart TV?
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
www.id-book.com
www.id-book.com
www.id-book.com
www.id-book.com
10
www.id-book.com
11
www.id-book.com
12
www.id-book.com
13
www.id-book.com
14
HCI
Ubiquitous Computing
Human Factors
Cognitive Engineering
Cognitive Ergonomics
Computer Supported Co-operative Work
Information Systems
www.id-book.com
15
Disadvantages
difficult to communicate and
progress forward the designs being create
www.id-book.com
16
www.id-book.com
17
web designers - people who develop and create the visual design of
websites, such as layouts
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
19
www.id-book.com
20
21
22
23
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
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
Undesirable aspects
boring
unpleasant
frustrating
patronizing
making one feel guilty
making one feel stupid
annoying
cutesy
childish
gimmicky
www.id-book.com
28
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
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!
www.id-book.com
32
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
www.baddesigns.com
www.id-book.com
36
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
www.id-book.com
38
www.id-book.com
39
www.id-book.com
40
3
6
9
9
6
3
0
www.id-book.com
41
www.id-book.com
42
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
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
www.id-book.com
51
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
54
www.id-book.com
55
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
www.id-book.com
58
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)
Do you agree?
www.id-book.com
14
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
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
www.id-book.com
66
67
68
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
71
72
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.,
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
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
81
Applications
Speech-recognition systems allow users to interact with
them by asking questions
e.g. Google Voice, Siri
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
83
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)
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
88
www.id-book.com
89
www.id-book.com
90
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
www.id-book.com
93
94
www.id-book.com
95
Information processing
Conceptualizes human performance in
metaphorical terms of information
processing stages
www.id-book.com
96
97
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
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
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 = ???
www.id-book.com
106
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?
www.id-book.com
116
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!
www.id-book.com
118
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
120
www.id-book.com
121
122
Sketch of VideoWindow
www.id-book.com
123
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
www.id-book.com
126
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
People in different
places are
superimposed
on the same screen
to make them appear
as if in same space
www.id-book.com
129
www.id-book.com
130
Everyone happy
www.id-book.com
131
BiReality
www.id-book.com
132
www.id-book.com
133
A telepresence room
www.id-book.com
134
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
www.id-book.com
137
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
www.id-book.com
140
www.id-book.com
141
www.id-book.com
142
www.id-book.com
143
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
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)
Anthropomorphism
The pros and cons
www.id-book.com
151
www.id-book.com
152
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
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
www.id-book.com
156
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
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.
www.id-book.com
165
www.id-book.com
166
www.id-book.com
167
www.id-book.com
168
169
Facial Coding
Measures a users emotions as they interact with
a computer or tablet
170
www.id-book.com
171
172
173
www.id-book.com
174
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
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
www.id-book.com
180
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
www.id-book.com
183
184
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
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
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
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
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
www.id-book.com
198
www.id-book.com
199
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
201
Windows
Windows were invented to overcome physical
constraints of a computer display
enable more information to be viewed and tasks to be
performed
202
www.id-book.com
203
www.id-book.com
204
www.id-book.com
205
www.id-book.com
206
www.id-book.com
207
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
212
www.id-book.com
213
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
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)
217
Early icons
www.id-book.com
218
Newer icons
www.id-book.com
219
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
221
www.id-book.com
222
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
www.id-book.com
224
www.id-book.com
225
226
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)
www.id-book.com
228
229
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
www.id-book.com
231
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
www.id-book.com
234
www.id-book.com
235
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
238
www.id-book.com
239
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.
242
A toaster
www.id-book.com
243
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.
www.id-book.com
245
www.id-book.com
246
iBeer app
www.id-book.com
247
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
249
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
www.id-book.com
252
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
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
www.id-book.com
256
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
www.id-book.com
259
260
www.id-book.com
261
Home entertainment
Universal
appeal
young
children,
grandparent
s,
professional
gamers,
technophob
es
www.id-book.com
262
263
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
265
www.id-book.com
266
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
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
www.id-book.com
273
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
277
VoxBox
www.id-book.com
278
www.id-book.com
279
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
281
An augmented map
www.id-book.com
282
www.id-book.com
283
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
www.id-book.com
285
286
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
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
292
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?
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
297