Lecture 15
●
Further reading: Don Norman, The Design of
Everyday Things: Revised and Expanded
Edition, Basic Books, 2013
October 23, 2014
CS 350 - Computer/Human Interaction
1
Outline
●
Discuss smart fridge sketches
●
Chapter 8
–
Mental models
–
Metaphors
–
Conceptual design
–
Storyboards
–
Embodied interaction
October 23, 2014
CS 350 - Computer/Human Interaction
2
Introduction
October 23, 2014
CS 350 - Computer/Human Interaction
3
Mental Models
●
●
From Wikipedia: “an explanation of someone's
thought process about how something works in
the reals world.”
Designer’s mental model
–
Vision of how system works as held by designer
●
●
●
October 23, 2014
What the system is
How it is organized
What it does and how
CS 350 - Computer/Human Interaction
4
Mental models
●
User’s mental model
–
●
Description of how system works as held by user
Conceptual design is what is used to connect
the two
October 23, 2014
CS 350 - Computer/Human Interaction
5
Designer’s mental model in
ecological perspective
●
●
Describes how system works within its
environment
How system or product fits within work context
–
●
In flow of activities involving it and other parts of
broader world
Example: thermostat in a heating system
October 23, 2014
CS 350 - Computer/Human Interaction
6
Designer’s mental model in
interaction perspective
●
Describes how users operate system or product
●
Task-oriented view, including
●
–
User intentions
–
Sensory, cognitive, and physical user actions
–
Includes device behavior
Example: thermostat displays ambient and
target temperatures, allows user to set target
temperature. What about visual feedback
explaining what is happening?
October 23, 2014
CS 350 - Computer/Human Interaction
7
Designer’s mental model in
emotional perspective
●
●
●
Describing intended emotional impact
About expected overarching emotional
response
Example: not too much for a thermostat, but
perhaps visual or physical design to fit in with
house décor or excellence of craftsmanship
October 23, 2014
CS 350 - Computer/Human Interaction
8
User's mental model
●
Internal explanation user has built about how
system works
●
It’s what we do naturally in unfamiliar situations
●
Starts with imperfect theories
●
Draws on expertise and previous experience
●
Example: many thermostats work the same, so
after learning one can operate others, but
newer programmable thermostats can be
frustrating because user has no mental model
of how one works.
October 23, 2014
CS 350 - Computer/Human Interaction
9
Conceptual design as mapping
October 23, 2014
CS 350 - Computer/Human Interaction
10
Mapping designer to users
●
●
Goal: Get user’s mental model to match reality
of designer’s mental model
Implementation of this mapping
–
●
The part of an interaction design containing a
theme
–
●
Conceptual design as manifest in system
For communicating design vision
Where you innovate to plant seed of UX
October 23, 2014
CS 350 - Computer/Human Interaction
11
Metaphors
●
Analogies for communication and explanations
–
Explain unfamiliar using familiar conventional
knowledge
–
Use what users already know about existing system
or phenomena
–
Adapt to help user learn how to use new system
October 23, 2014
CS 350 - Computer/Human Interaction
12
Metaphors
●
Example: typewriter metaphor in a word
processing system
–
One of simplest and oldest examples
–
So old, in fact, that it has become a “dead
metaphor” and works in reverse
October 23, 2014
CS 350 - Computer/Human Interaction
13
Examples of metaphors
●
Ecological perspective example
–
●
iTunes as a mother ship for iPods, iPhones, and
iPads
Interaction perspective example
–
Actions for reading a book on an iPad, Kindle, or
Nook “turn” pages
October 23, 2014
CS 350 - Computer/Human Interaction
14
Examples of metaphors
●
Emotional perspective example
–
Ad in Backpacker magazine for Garmin handheld
GPS
●
●
October 23, 2014
“Like an old pair of boots and your favorite fleece”
“The ideal hiking companion”
CS 350 - Computer/Human Interaction
15
Conceptual design in
three perspectives
●
Ecological perspective
–
●
To communicate design vision of system as a black
box within its environment
Interaction perspective
–
To communicate design vision of how user operates
system
October 23, 2014
CS 350 - Computer/Human Interaction
16
Conceptual design in
three perspectives
●
Emotional perspective
–
To communicate a vision of how design elements
will evoke emotional impact
–
Example, for a sports car:
●
●
●
October 23, 2014
About jaw-dropping performance
About how your heart skips a beat when you see its
aerodynamic form
About fun and being independent from crowd
CS 350 - Computer/Human Interaction
17
Example: early conceptual design
for Ticket Kiosk System
●
Immersion in ecological perspective
October 23, 2014
CS 350 - Computer/Human Interaction
18
Example: early conceptual design
for Ticket Kiosk System
●
Broad environmental view in ecological
perspective
October 23, 2014
CS 350 - Computer/Human Interaction
19
Example: ecological
conceptual design
●
Focusing on feature for smart ticket to guide
users to seating
October 23, 2014
CS 350 - Computer/Human Interaction
20
Example: ecological
conceptual design
●
Focusing on communication with a smartphone
October 23, 2014
CS 350 - Computer/Human Interaction
21
Example: ecological
conceptual design
●
Focusing on social networking
October 23, 2014
CS 350 - Computer/Human Interaction
22
Example: conceptual design in
interaction perspective
October 23, 2014
CS 350 - Computer/Human Interaction
23
Storyboards
●
●
●
●
●
Sequence of visual “frames”
Illustrating interplay between user and
envisioned system
Brings design to life in graphical “movie clips”
Freeze-frame sketches of stories of how people
will work with system.
Visual design scenarios, envisioned interaction
design solutions
October 23, 2014
CS 350 - Computer/Human Interaction
24
Storyboards
●
“Comic-book” style illustration of scenario
–
Actors
–
Screens
–
Interaction
–
Dialogue showing sequences of flow from frame to
frame
October 23, 2014
CS 350 - Computer/Human Interaction
25
Include in storyboards
●
●
●
●
Hand-sketched pictures annotated with a few
words
All work practice that is part of task, not just
interaction with system
Example, include telephone conversations with
agents outside system
Sketches of devices and screens
October 23, 2014
CS 350 - Computer/Human Interaction
26
Include in storyboards
●
Any connections with system internals, for
example, flow to and from a database
●
Physical user actions
●
Cognitive user actions in “thought balloons”
●
Extra-system activities, such as talking with a
friend about what ticket to buy
October 23, 2014
CS 350 - Computer/Human Interaction
27
Example: Ecological
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
28
Example: Ecological
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
29
Example: Ecological
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
30
Example: Ecological
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
31
Example: Ecological
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
32
Example: More ecological
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
33
Example: More ecological
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
34
Example: More ecological
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
35
Example: More ecological
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
36
Example: More ecological
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
37
Example: Interaction perspective
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
38
Example: Interaction perspective
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
39
Example: Interaction perspective
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
40
Example: Interaction perspective
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
41
Example: Interaction perspective
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
42
Example: Interaction perspective
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
43
Example: Interaction perspective
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
44
Example: Interaction perspective
storyboard sketches
October 23, 2014
CS 350 - Computer/Human Interaction
45
Importance of between-frame
transitions
●
●
Storyboard frames
–
Individual states
–
Static screenshots
Frame-to-frame progression of interaction over
time
October 23, 2014
CS 350 - Computer/Human Interaction
46
Importance of between-frame
transitions
●
●
●
●
●
The dynamics in transitions between frames is
where user experience lives
Transitions are where users think
Cognitive affordances in your design earn their
keep
Help users think about what to do next
Where most problems for users, challenges for
designers
October 23, 2014
CS 350 - Computer/Human Interaction
47
Importance of between-frame
transitions
●
●
Make actions between frames part of what is
sketched
How?
–
Add frames that show circumstances that lead to
transitions
–
User thought bubbles, gestures, reactions
October 23, 2014
CS 350 - Computer/Human Interaction
48
Example: storyboard
transition frame
●
Thought bubble explaining state change
October 23, 2014
CS 350 - Computer/Human Interaction
49
Example: storyboard
transition frame
●
Thought bubble explaining state change
October 23, 2014
CS 350 - Computer/Human Interaction
50
Example: storyboard
transition frame
●
Thought bubble explaining state change
October 23, 2014
CS 350 - Computer/Human Interaction
51
Design for embodied interaction
●
●
Embodied interaction
–
Involves user’s physical body in interaction with
technology
–
In a natural way, such as by gestures
Moving interaction off screen and into actionsituated real world
October 23, 2014
CS 350 - Computer/Human Interaction
52
Design for embodied interaction
●
Embodiment
–
“How nature of living entity’s cognition shaped by
form of its physical manifestation in world.”
–
Central to idea of phenomenological interaction
–
Dourish: “How we understand the world, ourselves,
and interaction comes from our location in a
physical and social world of embodied factors.”
October 23, 2014
CS 350 - Computer/Human Interaction
53
Example: Scrabble Flash Game
October 23, 2014
CS 350 - Computer/Human Interaction
54