Understanding Experience
in Interactive Systems
MODELS OF INTERACTION
terms of interaction
Norman model
Some terms of interaction
domain – the area of work under study
e.g. graphics design
goal
– what you want to achieve
e.g. create a solid red triangle
task
– how you go about doing it
– ultimately in terms of operations or actions
e.g. … select fill tool, click over triangle
Note …
 traditional interaction …
 use of terms differs a lot especially task/goal !!!
Donald Norman’s model
 Seven stages







user establishes the goal
formulates intention
specifies actions at interface
executes action
perceives system state
interprets system state
evaluates system state with respect to goal
 Norman’s model concentrates on user’s
view of the interface
execution/evaluation loop
goal
execution
evaluation
system







user establishes the goal
formulates intention
specifies actions at interface
executes action
perceives system state
interprets system state
evaluates system state with respect to goal
execution/evaluation loop
goal
execution
evaluation
system







user establishes the goal
formulates intention
specifies actions at interface
executes action
perceives system state
interprets system state
evaluates system state with respect to goal
execution/evaluation loop
goal
execution
evaluation
system







user establishes the goal
formulates intention
specifies actions at interface
executes action
perceives system state
interprets system state
evaluates system state with respect to goal
execution/evaluation loop
goal
execution
evaluation
system







user establishes the goal
formulates intention
specifies actions at interface
executes action
perceives system state
interprets system state
evaluates system state with respect to goal
Using Norman’s model
Some systems are harder to use than others
Gulf of Execution
user’s formulation of actions
≠
actions allowed by the system
Gulf of Evaluation
user’s expectation of changed system state
≠
actual presentation of this state
Human error - slips and mistakes
slip
understand system and goal
correct formulation of action
incorrect action
mistake
may not even have right goal!
Fixing things?
slip – better interface design
mistake – better understanding of system
INTERACTION STYLE
dialogue … computer and user
distinct styles of interaction
Common interaction styles








command line interface
menus
natural language
question/answer and query dialogue
form-fills and spreadsheets
WIMP
point and click
three–dimensional interfaces
Command line interface
 Way of expressing instructions to the
computer directly
 function keys, single characters, short
abbreviations, whole words, or a combination




suitable for repetitive tasks
better for expert users than novices
offers direct access to system functionality
command names/abbreviations should be
meaningful!
Typical example: the Unix system
Menus
 Set of options displayed on the screen
 Options visible
 less recall - easier to use
 rely on recognition so names should be
meaningful
 Selection by:
 numbers, letters, arrow keys, mouse
 combination (e.g. mouse plus accelerators)
 Often options hierarchically grouped
 sensible grouping is needed
 Restricted form of full WIMP system
Natural language
 Familiar to user
 speech recognition or typed natural
language
 Problems
 vague
 ambiguous
 hard to do well!
 Solutions
 try to understand a subset
 pick on key words
Query interfaces
 Question/answer interfaces
 user led through interaction via series of
questions
 suitable for novice users but restricted
functionality
 often used in information systems
 Query languages (e.g. SQL)
 used to retrieve information from database
 requires understanding of database structure and
language syntax, hence requires some expertise
Form-fills




Primarily for data entry or data retrieval
Screen like paper form.
Data put in relevant place
Requires
 good design
 obvious correction
facilities
Spreadsheets
 first spreadsheet VISICALC, followed by
Lotus 1-2-3
MS Excel most common today
 sophisticated variation of form-filling.
 grid of cells contain a value or a formula
 formula can involve values of other cells
e.g. sum of all cells in this column
 user can enter and alter data spreadsheet
maintains consistency
WIMP Interface
Windows
Icons
Menus
Pointers
… or windows, icons, mice, and pull-down menus!
 default style for majority of interactive
computer systems, especially PCs and
desktop machines
Point and click interfaces
 used in ..
 multimedia
 web browsers
 hypertext
 just click something!
 icons, text links or location on map
 minimal typing
Three dimensional
interfaces
 virtual reality
 ‘ordinary’ window systems
 highlighting
 visual affordance
 indiscriminate use
just confusing!
 3D workspaces
flat buttons …
click me!
 use for extra virtual space
 light and occlusion give depth
 distance effects
… or sculptured
THREE LEVELS
OF DESIGN
visceral | behavioural | reflective
THREE
LEVELS
of design
visceral | behavioural | reflective
 Play part in shaping one’s experience
 Important
 Require a different approach by the designer
VISCERAL
DESIGN
visceral | behavioural | reflective
QUOTE visceral design
“ Package designers and brand
managers are looking beyond graphic
elements or even the design as a
whole to forge an emotional link
between consumers and brands ”
 The entire success of a product
 PACKAGE, not content
BOTTLE OF WATER
VISCERAL DESIGN what?
 Is what nature does
 Powerful emotional signals from the
environment are automatically interpreted at
this level
 Culturally
 Perception of “pretty”
Visceral design is all about emotional impact
DOMINATING FACTORS
LOOK
FEEL
SOUND
DOMINATING FACTORS
 Physical features
LOOK
FEEL
SOUND
 These principles are wired in, consistent
across people and cultures
VISCERAL DESIGN where?
 Advertising
 Folk
 Crafts
 Children items
VISCERAL DESIGN: how?
 About initial reactions
 Studied
 Putting people in front of a design
 Waiting for reactions
 What is the reaction the visceral designer
strives for?
 I want it
 What does it do?
 How much does it cost?
BEHAVIOURAL
DESIGN
visceral | behavioural | reflective
BEHAVIOURAL DESIGN
“Use and performance”
 Four components
1. Function
2. Understandability
3. Usability
4. Physical feel
BEHAVIOURAL DESIGN
FUNCTION
FUNCTION
 Comes first
 Product  To fulfil needs
 Tricky
TRICKY
 Question: what does a product do, what
function does it perform?
 Answer: it has to fulfil needs
 Difficult: why ?
 People’s needs are not as obvious as might be
thought
 Importance for designers
Designers have
to watch their customers
to understand how they will use a product
PRODUCT DEVELOPMENT
 Enhancement
 = making an existing product or service better
 Easiest: comes primarily by watching how people
use what exists today
 Innovation
 = completely new way of doing something that
was not possible before
 Difficult to access: cannot be evaluated by asking
potential customers for their views
CAR CUPHOLDERS
BEHAVIOURAL DESIGN
UNDERSTANDING
UNDERSTANDING
 The secret
= to establish a proper conceptual model
 Three mental images
1. Designer’s model
2. User’s model
3. System image
 = conveyed by the product and written material
(advertising and manuals)
 The system image of the final design conveys the proper
user model
FEEDBACK
“Component of understanding”
 To give continual feedback
 Computer
 Amazing: many products give inadequate
feedback
 To be effective?
 Enhance the conceptual model
 Indicating precisely
 What is happening and what remains to be done?
BEHAVIOURAL DESIGN
USABILITY
USABILITY
 Complex topic
“a product that does what is required
and is understandable, may still not
be usable”
 E.g. guitars, violins, piano
 Usage = the critical test of a product:
 How well does the product perform?
 How comfortable does it feel to use?
 Challenge = UNIVERSAL DESIGN
BEHAVIOURAL DESIGN
PHYSICAL
FEEL
PHYSICAL FEEL matters
 Designers worry a lot about the physical feel
of their products
 Make huge difference in our appreciations
 They are critical to our behavioural assessment of
a product
 Physical feel matters: why?
 We are biological creatures: interaction between
our sensory systems and the environment
+ BEHAVIOURAL DESIGN +
 Human-centered
 Understanding and satisfying the needs
 Observation
 Visceral and behavioural reactions are
subconscious
 Make us unaware of our true reactions and their
causes
REFLECTIVE
DESIGN
visceral | behavioural | reflective
REFLECTIVE DESIGN what?
 Message, culture, meaning of a product
 The image we present to others
 The essence of reflective design: it’s all in
the mind of the beholder
QUESTION
function vs fashion
ATTRACTIVENESS <>
BEAUTY
 Attractiveness
 Visceral level
 The response is entirely to the surface look of an
object
 Beauty
 Reflective level
 It is influenced by knowledge, learning and culture
Advertising
 can work at either the visceral or the reflective level
REFLECTIVE LEVEL product
 Shows person’s overall impression
 Customer relationships play a major role
 A good relationship  reverse a negative
experience
 Is about long-term customer experience
 Service
 Providing a personal touch
 Warm interaction
CONCLUSION
 A human-centered approach works well for
behavioural design,
 but it is not necessarily appropriate for either the
visceral or the reflective side
 Conclusion
 If you want a successful product, test and revise
 If you want a product that can change the world:
let it be driven by someone with a clear vision