IA SUMMIT 2016
@stephenanderson
Stephen P. Anderson
#IAS16
t
presented by
Place in Space
AKA “How to Create A Concept Model”

“How do you create a concept model?”

Write down the numbers 1 through 9 on a sheet of paper.
You will each take turns selecting numbers from the list
(crossing off each number once it has been selected).
The winner is the first person to have chosen exactly
three numbers which add up to 15.
For example if I selected 9, 6, 2 and you selected 3, 8, 4 then
you would win because 3 + 8 + 4 = 15.
Let’s play a game…
1
2
3
4
5
6
7
8
9

Let’s play a (different) game…
Consider a 3 x 3 magic square:
The rows, columns, and diagonals all add
up to 15, and moreover every way of
writing 15 as the sum of three numbers
from 1 to 9 is represented.
When you choose a number, draw an X
over it; when I choose a number, circle it.
4 9 2
3 5 7
8 1 6

1
2
3
4
5
6
7
8
9
4 9 2
3 5 7
8 1 6
Why is Tic-tac-toe so much simpler?
VS

1
2
3
4
5
6
7
8
9
4 9 2
3 5 7
8 1 6
Tic tac toe is a model that more easily reveals patterns
VS

Customer JourneysBusiness Model Canvas Gantt charts Site Maps
Models we use that reveal patterns:
9 Grids
Charts & Diagrams Data Visualizations Abstract Patterns
Models, Templates & Frameworks
X Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line Graph

Jesse James Garrett’s
Elements of UX
Models others create to reveal patterns:

Models others create to reveal patterns:
Stephen P. Anderson’s
UX Hierarchy of Needs
Meaningful
Pleasurable
Convenient
Usable
Reliable
Functional (Useful)
Focused on
Experiences
(People, Activities, Context)
Focused on
Tasks
(Products, Features)
© 2006 Stephen P. Anderson | p
SUBJECTIVE / QUALITATIVE
OBJECTIVE / QUANTIFIABLE
Has personal significance
Memorable experience worth sharing
Super easy to use, works like I think
Can be used without difficulty
Is available and accurate
Works as programmed
Prioritize Aesthetics (no, not Graphic Design)
(visual, behaviors, sounds, psychology)
Design for FLOW (boredom vs anxiety)
Leverage Game Mechanics/Learning Theory
(completeness)
Have a Personality
Create conversational and context aware
interactions
(“Adaptive Interfaces”; narrative IA structures)
Elicit Desire
(Limited availability, limited access, curious and
seductive experiences)Simplify, organize, and clarify
Display information visually
Reduce features and complexity
Use language for more natural
Add features that support desired
ine browsing)
Have a believable story
Co-create value with customers
Connect people in community
Are part of a bigger system
Appeal to emotional, spiritual, and
Create a tolerance for faults at
Are tied to a person’s self-image,
highly personal
Creating Pleasurable Interfaces:
Getting fom Tasks to Experiences
presented by Stephen P. Anderson | Nov 8, 2006
“It is not enough that we
products that function, t
understandable and usab
we also need to build prod
that bring joy and excite
pleasure and fun, and y
beauty, to people’s lives.”
THIS IS THE“CHASM”THAT IS REALLY, REALLY
HARD FOR ORGANIZATIONS TO CROSS

Models others create to reveal patterns:
Dan Roam explains health care in the US

Models others create to reveal patterns:
Making sense of espresso drinks!

Models others create to reveal patterns:
Chris Fahey, explaining whiskeys!

Other “models” that easily reveals patterns…

Medical Chart

Medical Chart

INFORMATION

INFORMATION UNDERSTANDING

External Visual Representations
are critical tools for making sense of
complex information.

EXTERNAL VISUAL REPRESENTATIONS…
WHY?

…create Persistent,
Shareable Structures:
•Are persistent structures.
• Can be shared with others
• Can represent literal as we! as
conceptual ideas.
…provide Perceptual,
Computational Benefits:
• Relieve our short term memory
• Help us to spot patterns
•Are powerful as mental construction tools.
…allow us to more Easily
Interact with Information:
• Can be modified.
• Can be rearranged (making it easier to
explore many options)
• Can be “reformulated”
EXTERNAL VISUAL REPRESENTATIONS…
WHY?

But, there’s a problem:

Abstract PatternsCharts & Diagrams
Customer Journeys
Models, Templates & Frameworks
Data Visualizations
Business Model Canvas Gantt charts Site Maps
Models we use that reveal patterns:
Models others create to reveal patterns:
Jesse James Garrett’s
Elements of UX
Stephen P. Anderson’s
UX Hierarchy of Needs
Dan Roam explaining
Health Care
9 Grids
X Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line Graph
Meaningful
Pleasurable
Convenient
Usable
Reliable
Functional (Useful)
Focused on
Experiences
(People, Activities, Context)
Focused on
Tasks
(Products, Features)
© 2006 Stephen P. Anderson | poetpainter.com
SUBJECTIVE / QUALITATIVE
OBJECTIVE / QUANTIFIABLE
Has personal significance
Memorable experience worth sharing
Super easy to use, works like I think
Can be used without difficulty
Is available and accurate
Works as programmed
Prioritize Aesthetics (no, not Graphic Design)
(visual, behaviors, sounds, psychology)
Design for FLOW (boredom vs anxiety)
Leverage Game Mechanics/Learning Theory
(completeness)
Have a Personality
Create conversational and context aware
interactions
(“Adaptive Interfaces”; narrative IA structures)
Elicit Desire
(Limited availability, limited access, curious and
seductive experiences)Simplify, organize, and clarify
Display information visually
Reduce features and complexity
Use language for more natural
Add features that support desired
ine browsing)
Have a believable story
Co-create value with customers
Connect people in community
Are part of a bigger system
Appeal to emotional, spiritual, and
Create a tolerance for faults at
Are tied to a person’s self-image,
highly personal
Creating Pleasurable Interfaces:
Getting fom Tasks to Experiences
presented by Stephen P. Anderson | Nov 8, 2006
“It is not enough that we build
products that function, that are
understandable and usable -
we also need to build products
that bring joy and excitement,
pleasure and fun, and yes,
beauty, to people’s lives.”
THIS IS THE“CHASM”THAT IS REALLY, REALLY
HARD FOR ORGANIZATIONS TO CROSS
Making sense of
espresso drinks!

Abstract PatternsCharts & Diagrams
Customer Journeys
Models, Templates & Frameworks
Data Visualizations
Business Model Canvas Gantt charts Site Maps
Models we use that reveal patterns:
Models others create to reveal patterns:
Jesse James Garrett’s
Elements of UX
Stephen P. Anderson’s
UX Hierarchy of Needs
Dan Roam explaining
Health Care
9 Grids
X Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line Graph
Meaningful
Pleasurable
Convenient
Usable
Reliable
Functional (Useful)
Focused on
Experiences
(People, Activities, Context)
Focused on
Tasks
(Products, Features)
© 2006 Stephen P. Anderson | poetpainter.com
SUBJECTIVE / QUALITATIVE
OBJECTIVE / QUANTIFIABLE
Has personal significance
Memorable experience worth sharing
Super easy to use, works like I think
Can be used without difficulty
Is available and accurate
Works as programmed
Prioritize Aesthetics (no, not Graphic Design)
(visual, behaviors, sounds, psychology)
Design for FLOW (boredom vs anxiety)
Leverage Game Mechanics/Learning Theory
(completeness)
Have a Personality
Create conversational and context aware
interactions
(“Adaptive Interfaces”; narrative IA structures)
Elicit Desire
(Limited availability, limited access, curious and
seductive experiences)Simplify, organize, and clarify
Display information visually
Reduce features and complexity
Use language for more natural
Add features that support desired
ine browsing)
Have a believable story
Co-create value with customers
Connect people in community
Are part of a bigger system
Appeal to emotional, spiritual, and
Create a tolerance for faults at
Are tied to a person’s self-image,
highly personal
Creating Pleasurable Interfaces:
Getting fom Tasks to Experiences
presented by Stephen P. Anderson | Nov 8, 2006
“It is not enough that we build
products that function, that are
understandable and usable -
we also need to build products
that bring joy and excitement,
pleasure and fun, and yes,
beauty, to people’s lives.”
THIS IS THE“CHASM”THAT IS REALLY, REALLY
HARD FOR ORGANIZATIONS TO CROSS
Making sense of
espresso drinks!
The Visual Models we’re handed
aren’t always a good “fit”

Abstract PatternsCharts & Diagrams
Customer Journeys
Models, Templates & Frameworks
Data Visualizations
Business Model Canvas Gantt charts Site Maps
Models we use that reveal patterns:
Models others create to reveal patterns:
Jesse James Garrett’s
Elements of UX
Stephen P. Anderson’s
UX Hierarchy of Needs
Dan Roam explaining
Health Care
9 Grids
X Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line Graph
Meaningful
Pleasurable
Convenient
Usable
Reliable
Functional (Useful)
Focused on
Experiences
(People, Activities, Context)
Focused on
Tasks
(Products, Features)
© 2006 Stephen P. Anderson | poetpainter.com
SUBJECTIVE / QUALITATIVE
OBJECTIVE / QUANTIFIABLE
Has personal significance
Memorable experience worth sharing
Super easy to use, works like I think
Can be used without difficulty
Is available and accurate
Works as programmed
Prioritize Aesthetics (no, not Graphic Design)
(visual, behaviors, sounds, psychology)
Design for FLOW (boredom vs anxiety)
Leverage Game Mechanics/Learning Theory
(completeness)
Have a Personality
Create conversational and context aware
interactions
(“Adaptive Interfaces”; narrative IA structures)
Elicit Desire
(Limited availability, limited access, curious and
seductive experiences)Simplify, organize, and clarify
Display information visually
Reduce features and complexity
Use language for more natural
Add features that support desired
ine browsing)
Have a believable story
Co-create value with customers
Connect people in community
Are part of a bigger system
Appeal to emotional, spiritual, and
Create a tolerance for faults at
Are tied to a person’s self-image,
highly personal
Creating Pleasurable Interfaces:
Getting fom Tasks to Experiences
presented by Stephen P. Anderson | Nov 8, 2006
“It is not enough that we build
products that function, that are
understandable and usable -
we also need to build products
that bring joy and excitement,
pleasure and fun, and yes,
beauty, to people’s lives.”
THIS IS THE“CHASM”THAT IS REALLY, REALLY
HARD FOR ORGANIZATIONS TO CROSS
Making sense of
espresso drinks!
The Visual Models we’re handed
aren’t always a good “fit”
Few people know exactly HOW to use
visuals to explore difficult subjects

The good news:

Abstract PatternsCharts & Diagrams
Customer Journeys
Models, Templates & Frameworks
Data Visualizations
Business Model Canvas Gantt charts Site Maps
Models we use that reveal patterns:
Models others create to reveal patterns:
Jesse James Garrett’s
Elements of UX
Stephen P. Anderson’s
UX Hierarchy of Needs
Dan Roam explaining
Health Care
9 Grids
X Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line Graph
Meaningful
Pleasurable
Convenient
Usable
Reliable
Functional (Useful)
Focused on
Experiences
(People, Activities, Context)
Focused on
Tasks
(Products, Features)
© 2006 Stephen P. Anderson | poetpainter.com
SUBJECTIVE / QUALITATIVE
OBJECTIVE / QUANTIFIABLE
Has personal significance
Memorable experience worth sharing
Super easy to use, works like I think
Can be used without difficulty
Is available and accurate
Works as programmed
Prioritize Aesthetics (no, not Graphic Design)
(visual, behaviors, sounds, psychology)
Design for FLOW (boredom vs anxiety)
Leverage Game Mechanics/Learning Theory
(completeness)
Have a Personality
Create conversational and context aware
interactions
(“Adaptive Interfaces”; narrative IA structures)
Elicit Desire
(Limited availability, limited access, curious and
seductive experiences)Simplify, organize, and clarify
Display information visually
Reduce features and complexity
Use language for more natural
Add features that support desired
ine browsing)
Have a believable story
Co-create value with customers
Connect people in community
Are part of a bigger system
Appeal to emotional, spiritual, and
Create a tolerance for faults at
Are tied to a person’s self-image,
highly personal
Creating Pleasurable Interfaces:
Getting fom Tasks to Experiences
presented by Stephen P. Anderson | Nov 8, 2006
“It is not enough that we build
products that function, that are
understandable and usable -
we also need to build products
that bring joy and excitement,
pleasure and fun, and yes,
beauty, to people’s lives.”
THIS IS THE“CHASM”THAT IS REALLY, REALLY
HARD FOR ORGANIZATIONS TO CROSS
Making sense of
espresso drinks!

Abstract PatternsCharts & Diagrams
Customer Journeys
Models, Templates & Frameworks
Data Visualizations
Business Model Canvas Gantt charts Site Maps
Models we use that reveal patterns:
Models others create to reveal patterns:
Jesse James Garrett’s
Elements of UX
Stephen P. Anderson’s
UX Hierarchy of Needs
Dan Roam explaining
Health Care
9 Grids
X Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line Graph
Meaningful
Pleasurable
Convenient
Usable
Reliable
Functional (Useful)
Focused on
Experiences
(People, Activities, Context)
Focused on
Tasks
(Products, Features)
© 2006 Stephen P. Anderson | poetpainter.com
SUBJECTIVE / QUALITATIVE
OBJECTIVE / QUANTIFIABLE
Has personal significance
Memorable experience worth sharing
Super easy to use, works like I think
Can be used without difficulty
Is available and accurate
Works as programmed
Prioritize Aesthetics (no, not Graphic Design)
(visual, behaviors, sounds, psychology)
Design for FLOW (boredom vs anxiety)
Leverage Game Mechanics/Learning Theory
(completeness)
Have a Personality
Create conversational and context aware
interactions
(“Adaptive Interfaces”; narrative IA structures)
Elicit Desire
(Limited availability, limited access, curious and
seductive experiences)Simplify, organize, and clarify
Display information visually
Reduce features and complexity
Use language for more natural
Add features that support desired
ine browsing)
Have a believable story
Co-create value with customers
Connect people in community
Are part of a bigger system
Appeal to emotional, spiritual, and
Create a tolerance for faults at
Are tied to a person’s self-image,
highly personal
Creating Pleasurable Interfaces:
Getting fom Tasks to Experiences
presented by Stephen P. Anderson | Nov 8, 2006
“It is not enough that we build
products that function, that are
understandable and usable -
we also need to build products
that bring joy and excitement,
pleasure and fun, and yes,
beauty, to people’s lives.”
THIS IS THE“CHASM”THAT IS REALLY, REALLY
HARD FOR ORGANIZATIONS TO CROSS
Making sense of
espresso drinks!
All of these models build
upon a common set of
underlying visual elements.

All of these models build
upon a common set of
underlying visual elements.

Using visual properties and spatial arrangement,
to make sense of complex ideas.
In a moment…

But first…

List some things you’re working with that could benefit
from a good visual model:

The world of
Whiskeys, Bourbons,
Rye, Cocktails,
etc.
List some things you’re working with that could benefit
from a good visual model: Choosing which
board games do
I want to buy!
The world of
artisan cheeses
Gah! I enjoy the
Marvel movies. How
do I make sense of
all the different
comic book titles
and storylines!
shopping for a
good VPN service
how public key
encryption works
a way to assess
the presidential
candidates
making sense of
medical bills
how to prepare
the perfect cup
of coffee!
comparing Android
Phones
UX Prototyping
tools
understanding
Legal Proceedings

Using visual properties and spatial arrangement,
to make sense of complex ideas.
HOW?

A visual model we’re all familiar with…

OBJECTS

OBJECTS

OBJECTS

OBJECTS

TIME TIME TIME TIME
VALUE
VALUE
VALUE

TIME TIME TIME TIME
VALUE
VALUE
VALUE
OBJECTS

TIME TIME TIME TIME
VALUE
VALUE
VALUE
OBJECTS

OBJECTS

WHICH DATA
WHERE?
- Geolocation
- Places I’ve been / would like to visit
- If I went, *when* I went
- Places with good food
- Places that speak English (or not)
- Relative strength of the do!ar
- etc.

WHICH DATA
WHERE?
- Geolocation
- Places I’ve been / would like to visit
- If I went, *when* I went
- Places with good food
- Places that speak English (or not)
- Relative strength of the do!ar
- etc.

WHICH DATA
WHERE?
- Geolocation
- Places I’ve been / would like to visit
- If I went, *when* I went
- Places with good food
- Places that speak English (or not)
- Relative strength of the do!ar
- etc.

WHICH DATA
WHERE?
- Geolocation
- Places I’ve been / would like to visit
- If I went, *when* I went
- Places with good food
- Places that speak English (or not)
- Relative strength of the do!ar
- etc.

WHICH DATA
WHERE?
- Geolocation
- Places I’ve been / would like to visit
- If I went, *when* I went
- Places with good food
- Places that speak English (or not)
- Relative strength of the do!ar
- etc.

Things arranged into territories.
OBJECTS

Things arranged into territories.
OBJECTS
Spatial Positioning: Spatial Properties:
Visual Encodings

Things arranged into territories.
OBJECTS
Visual Encodings
Things

SHAPE COLOR: INTENSITY ICONOGRAPHY PERSPECTIVE
COLOR: HUE OPACITY OVERLAY OUTLINE OR SOLID
SPATIAL POSITION TEXTURE OVERLAP ASPECT RATIO
FORM: SIZE/AREA ROTATION JOIN FORM: ENCLOSURE
LINE LENGTH LINE TREATMENT
ETC!
IF OUTLINE,
THICKNESS OF STROKE
Visual Encodings

Example Encoding Ordered Useful values Quantitative Ordinal Categorical Relational
position, placement yes infinite Good Good Good Good
1, 2, 3; A, B, C text labels optional
(alphabetical
or numbered)
infinite Good Good Good Good
length yes many Good Good
size, area yes many Good Good
angle yes medium/few Good Good
pattern density yes few Good Good
weight, boldness yes few Good
saturation, brightness yes few Good
color no few (< 20) Good
shape, icon no medium Good
pattern texture no medium Good
enclosure, connection no infinite Good Good
line pattern no few Good
line endings no few Good
line weight yes few Good
Properties and Best Uses of Visual Encodings
Noah Iliinsky • ComplexDiagrams.com/properties • 2012-06
Example Encoding Ordered Useful values Quantitative Ordinal Categorical Relational
position, placement yes infinite Good Good Good Good
1, 2, 3; A, B, C text labels optional
(alphabetical
or numbered)
infinite Good Good Good Good
length yes many Good Good
size, area yes many Good Good
angle yes medium/few Good Good
pattern density yes few Good Good
weight, boldness yes few Good
saturation, brightness yes few Good
color no few (< 20) Good
shape, icon no medium Good
pattern texture no medium Good
enclosure, connection no infinite Good Good
line pattern no few Good
line endings no few Good
Properties and Best Uses of Visual Encodings
⋆
Representing
Categories
Representing
Precise Quantitative
Perception
Representing
General Quantitative
Perception
Showing
Sequence
Form: Orientation
! ! !
Form: Line Length
!
Form: Line Width
! ! limited
Form: Size / Area
! !
Form: Enclosure
!
Form: Shape
! limited
Form: Curvature
!
Form: Proximity
!* !*
Form: Added Marks
! limited
Pattern Density
! limited ! limited
Line Pattern
!
Line Endings
! !
Color: Hue
! !
Color: Intensity
(Saturation, Brightness, Opacity) ! !
Spatial Position: 2-D Position
! ! !
Motion
limited !*
Texture
! limited
Rotation
! limited limited
Perspective
! limited
Iconography
! !

Encoding Ordered Useful values Quantitative Ordinal
Properties and Best Uses of Visual Encoding
Representing
Categories
Representing
Precise Quantitative
Perception
Representing
General Quantitative
Perception
Showing
Sequence
! ! !
!
! ! limited
! !

Encoding Ordered Useful values Quantitative Ordinal
Properties and Best Uses of Visual Encoding
Representing
Categories
Representing
Precise Quantitative
Perception
Representing
General Quantitative
Perception
Showing
Sequence
! ! !
!
! ! limited
! !

Encoding Ordered Useful values Quantitative Ordinal
Properties and Best Uses of Visual Encoding
Representing
Categories
Representing
Precise Quantitative
Perception
Representing
General Quantitative
Perception
Showing
Sequence
! ! !
!
! ! limited
! !

Things arranged into territories.
OBJECTS
Visual Encodings
Things
CATEGORY
PRECISE QUANTITATIVE INFO.
GENERAL QUALITATIVE INFO
SEQUENCE
Visual Encodings

OBJECTS
Things arranged into territories.
Spatial Positioning: Spatial Properties:
CATEGORY
PRECISE QUANTITATIVE INFO.
GENERAL QUALITATIVE INFO
SEQUENCE
Visual Encodings

Abstract PatternsCharts & Diagrams
Customer Journeys
Models, Templates & Frameworks
Data Visualizations
Business Model Canvas Gantt charts Site Maps
Models we use that reveal patterns:
Models others create to reveal patterns:
Jesse James Garrett’s
Elements of UX
Stephen P. Anderson’s
UX Hierarchy of Needs
Dan Roam explaining
Health Care
9 Grids
X Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line Graph
Meaningful
Pleasurable
Convenient
Usable
Reliable
Functional (Useful)
Focused on
Experiences
(People, Activities, Context)
Focused on
Tasks
(Products, Features)
© 2006 Stephen P. Anderson | poetpainter.com
SUBJECTIVE / QUALITATIVE
OBJECTIVE / QUANTIFIABLE
Has personal significance
Memorable experience worth sharing
Super easy to use, works like I think
Can be used without difficulty
Is available and accurate
Works as programmed
Prioritize Aesthetics (no, not Graphic Design)
(visual, behaviors, sounds, psychology)
Design for FLOW (boredom vs anxiety)
Leverage Game Mechanics/Learning Theory
(completeness)
Have a Personality
Create conversational and context aware
interactions
(“Adaptive Interfaces”; narrative IA structures)
Elicit Desire
(Limited availability, limited access, curious and
seductive experiences)Simplify, organize, and clarify
Display information visually
Reduce features and complexity
Use language for more natural
Add features that support desired
ine browsing)
Have a believable story
Co-create value with customers
Connect people in community
Are part of a bigger system
Appeal to emotional, spiritual, and
Create a tolerance for faults at
Are tied to a person’s self-image,
highly personal
Creating Pleasurable Interfaces:
Getting fom Tasks to Experiences
presented by Stephen P. Anderson | Nov 8, 2006
“It is not enough that we build
products that function, that are
understandable and usable -
we also need to build products
that bring joy and excitement,
pleasure and fun, and yes,
beauty, to people’s lives.”
THIS IS THE“CHASM”THAT IS REALLY, REALLY
HARD FOR ORGANIZATIONS TO CROSS
Making sense of
espresso drinks!

Abstract PatternsCharts & Diagrams
Customer Journeys
Models, Templates & Frameworks
Data Visualizations
Business Model Canvas Gantt charts Site Maps
Models we use that reveal patterns:
Models others create to reveal patterns:
Jesse James Garrett’s
Elements of UX
Stephen P. Anderson’s
UX Hierarchy of Needs
Dan Roam explaining
Health Care
9 Grids
X Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line Graph
Meaningful
Pleasurable
Convenient
Usable
Reliable
Functional (Useful)
Focused on
Experiences
(People, Activities, Context)
Focused on
Tasks
(Products, Features)
© 2006 Stephen P. Anderson | poetpainter.com
SUBJECTIVE / QUALITATIVE
OBJECTIVE / QUANTIFIABLE
Has personal significance
Memorable experience worth sharing
Super easy to use, works like I think
Can be used without difficulty
Is available and accurate
Works as programmed
Prioritize Aesthetics (no, not Graphic Design)
(visual, behaviors, sounds, psychology)
Design for FLOW (boredom vs anxiety)
Leverage Game Mechanics/Learning Theory
(completeness)
Have a Personality
Create conversational and context aware
interactions
(“Adaptive Interfaces”; narrative IA structures)
Elicit Desire
(Limited availability, limited access, curious and
seductive experiences)Simplify, organize, and clarify
Display information visually
Reduce features and complexity
Use language for more natural
Add features that support desired
ine browsing)
Have a believable story
Co-create value with customers
Connect people in community
Are part of a bigger system
Appeal to emotional, spiritual, and
Create a tolerance for faults at
Are tied to a person’s self-image,
highly personal
Creating Pleasurable Interfaces:
Getting fom Tasks to Experiences
presented by Stephen P. Anderson | Nov 8, 2006
“It is not enough that we build
products that function, that are
understandable and usable -
we also need to build products
that bring joy and excitement,
pleasure and fun, and yes,
beauty, to people’s lives.”
THIS IS THE“CHASM”THAT IS REALLY, REALLY
HARD FOR ORGANIZATIONS TO CROSS
Making sense of
espresso drinks!
JUST SCREENS & PAPER?!

Before the page, there was space itself.
Perhaps the simplest way to use space
to communicate is to arrange or
rearrange things in it.”
“
%om “Visualizing Thought” Barbara Tversky

“Close’’ family members and friends sit nearer to one
another than strangers.
The flatware tray in a drawer of most kitchens allows
arranging the knives together in one pile and separating
them from the pile of forks and the pile of spoons.
Written text is spatially arranged to reflect the organization
of thought, spaces between words and sentences, larger
spaces between paragraphs.
[We put] the letters to be mailed by the door or the bills to
be paid on the top of the desk
[We line] up the ingredients for a recipe in order of use
%om “Visualizing Thought” Barbara Tversky

“Close’’ family members and friends sit nearer to one
another than strangers.
The flatware tray in a drawer of most kitchens allows
arranging the knives together in one pile and separating
them from the pile of forks and the pile of spoons.
Written text is spatially arranged to reflect the organization
of thought, spaces between words and sentences, larger
spaces between paragraphs.
[We put] the letters to be mailed by the door or the bills to
be paid on the top of the desk
[We line] up the ingredients for a recipe in order of use
%om “Visualizing Thought” Barbara Tversky
LITERAL MODELS
—VS—
CONCEPTUAL MODELS
(IT’S THE SAME VISUAL LANGUAGE)

Things arranged into territories.
OBJECTS
Spatial Positioning:
Things arranged

ARRANGEMENT (PROXIMITY)

2003 2004 20062005 2007 2008 2009 20102002 2011 20

ARRANGEMENT (PROXIMITY)

SEQUENCE

2003 2004 20062005 2007 2008 2009 20102002 2011 20

2003
2004
2006
2005
2007
2008
2009

Things arranged into territories.
OBJECTS
Things arranged
Spatial Positioning:
ARRANGMENT
PROXIMITY

Things arranged into territories.
OBJECTS
into territories.
Spatial Properties:
SHAPE
BOUNDARIES
RELATIONSHIPS
ATTRIBUTE INTENSITY

SHAPE

BOUNDARIES

Roger Caillois

RELATIONSHIPS

ATTRIBUTE INTENSITY

Things arranged into territories.
OBJECTS
into territories.
Spatial Properties:
SHAPE
BOUNDARIES
RELATIONSHIPS
ATTRIBUTE INTENSITY

Things arranged into territories.
OBJECTS
Spatial Positioning:
ARRANGMENT
PROXIMITY
Spatial Properties:
SHAPE
BOUNDARIES
RELATIONSHIPS
ATTRIBUTE INTENSITY

Useful as a ‘deconstruction’ tool…

Things arranged into territories.
OBJECTS
Spatial Positioning:
ARRANGMENT
PROXIMITY
Spatial Properties:
SHAPE
BOUNDARIES
RELATIONSHIPS
ATTRIBUTE INTENSITY

Things arranged into territories.
OBJECTS
Spatial Positioning:
ARRANGMENT
PROXIMITY
Spatial Properties:
SHAPE
BOUNDARIES
RELATIONSHIPS
ATTRIBUTE INTENSITY
CATEGORY
PRECISE QUANTITATIVE INFO.
GENERAL QUALITATIVE INFO
SEQUENCE
Visual Encodings

Putting it all together…

Identify “the thing(s)”1.
Inspect the properties
of each thing
2.
Arrange the things
(based on identified properties)
3.
Clarify the territories4.
Keep (or remove) the things,
as appropriate
5.

comparing Android
Phones
Samsung Galaxy S6
Samsung Galaxy S7
Samsung Galaxy S6 Edge
Samsung Galaxy S7 Edge
Samsung Galaxy Note 5
Google Nexus 6P
Sony Xperia Z5 Compact
LG V10
Alcatel OneTouch Idol 3 (5.5)
Motorola Moto G Late 2015
etc.
Identify “the thing(s)”1.

how to prepare
the perfect cup
of coffee!
comparing Android
Phones
Samsung Galaxy S6
Samsung Galaxy S7
Samsung Galaxy S6 Edge
Samsung Galaxy S7 Edge
Samsung Galaxy Note 5
Google Nexus 6P
Sony Xperia Z5 Compact
LG V10
Alcatel OneTouch Idol 3 (5.5)
Motorola Moto G Late 2015
etc.
beans:water ratio
water temperature
brew time
sugar?
cream?
- Chemex
- Aeropress
- French Press
- Syphon
- Hario V60
- Moka pot
- Percolator
beans
grind size
brew method / filter
Identify “the thing(s)”1.

Identify “the thing(s)”1.

Identify “the thing(s)”1.
play, fun, and
games,

Identify “the thing(s)”1.
play, fun, and
games,
Kite-flying
Solitaire
Crossword puzzles
Racing
Wrestling
Athletics
Boxing
Billiards
Fencing
CheckersFootball
Chess
Contests, Sports in
general
Counting-out
rhymes
Heads or tails
Betting
Roulette
Lotteries
Children’s
initiations
Games of illusion
Tag
Disguises
Masks
Children
“whirling”
Horseback riding
Swinging
Waltzing
Skiing
Mountain
climbing Tightrope walking
Traveling
carnivals
Theater

Chess
Inspect the properties
of each thing
2.

Chess
2 players
competitive
strategic
turn-based
played on a board,
with pieces
no chance
not simple
Inspect the properties
of each thing
2.

Kite-flying
Solitaire
Racing
Wrestling
Athletics
Boxing
Billiards
Fencing
Football
Contests, Sports in
general
Counting-out
rhymes
Heads or tails
Betting
Roulette
Lotteries
Children’s
initiations
Games of illusion
Tag
Disguises
Masks
Children
“whirling”
Horseback riding
Swinging
Waltzing
Skiing
Mountain
climbing
Tightrope walking
Traveling
carnivalsTheater
Arrange the things
(based on identified properties)
3.
Checkers
Chess
Crossword puzzles
Tumult
Agitation
Immoderate
Laughter
ludus
structured activities with
explicit rules (games)
paidia
unstructured and spontaneous
activities (playfulness)
(not regulated)
*
*
*

Kite-flying
Solitaire
Racing
Wrestling
Athletics
Boxing
Billiards
Fencing
Football
Contests, Sports in
general
Counting-out
rhymes
Heads or tails
Betting
Roulette
Lotteries
Children’s
initiations
Games of illusion
Tag
Disguises
Masks
Children
“whirling”
Horseback riding
Swinging
Waltzing
Skiing
Mountain
climbing
Tightrope walking
Traveling
carnivalsTheater
Chance
Clarify the territories4.
Checkers
Chess
Crossword puzzles
Tumult
Agitation
Immoderate
Laughter
Mimicry VertigoCompetition
ludus
structured activities with
explicit rules (games)
paidia
unstructured and spontaneous
activities (playfulness)
(not regulated)
*
*
*

AGON
Competition
ALEA
Chance
MIMESIS
Roleplay
ILINX
Vertigo
PAIDIA
unstructured and spontaneous
activities (playfulness)
LUDUS
structured activities with
explicit rules (games)

Identify “the thing”1.
Inspect the properties
of each thing
2.
Arrange the things
(based on identified properties)
3.
Clarify the territories4.
Keep (or remove) the things,
as appropriate
5.

Things arranged into territories.
OBJECTS
Spatial Positioning:
ARRANGMENT
PROXIMITY
Spatial Properties:
SHAPE
BOUNDARIES
RELATIONSHIPS
ATTRIBUTE INTENSITY
CATEGORY
PRECISE QUANTITATIVE INFO.
GENERAL QUALITATIVE INFO
SEQUENCE
Visual Encodings

poetpainter.com/tiles
Example Encoding
Ordered Useful values Quantitative Ordinal Categorical Relational
position, placement yes
infinite Good Good Good Good
1, 2, 3; A, B, C text labels
optional
(alphabetical
or numbered)
infinite Good Good Good Good
length
yes
many Good Good
size, area
yes
many Good Good
angle
yes
medium/few Good Good
pattern density yes
few Good Good
weight, boldness yes
few
Good
saturation, brightness yes
few
Good
color
no
few (< 20)
Good
shape, icon
no
medium
Good
pattern texture no
medium
Good
enclosure, connection no
infinite
Good Good
line pattern
no
few
Good
line endings
no
few
Good
line weight
yes
few
Good
Properties and Best Uses of Visual Encodings
Noah Iliinsky • ComplexDiagrams.com/properties • 2012-06
Example Encoding
Ordered Useful values Quantitative Ordinal Categorical Relational
position, placement yes
infinite Good Good Good Good
1, 2, 3; A, B, C text labels
optional
(alphabetical
or numbered)
infinite Good Good Good Good
length
yes
many Good Good
size, area
yes
many Good Good
angle
yes
medium/few Good Good
pattern density yes
few Good Good
weight, boldness yes
few
Good
saturation, brightness yes
few
Good
color
no
few (< 20)
Good
shape, icon
no
medium
Good
pattern texture no
medium
Good
enclosure, connection no
infinite
Good Good
line pattern
no
few
Good
line endings
no
few
Good
line weight
yes
few
Good
Properties and Best Uses of Visual Encodings
Noah Iliinsky • ComplexDiagrams.com/properties • 2012-06
⋆
1, 2, 3; A, B ,C
Representing
Categories
Representing
Precise Quantitative
Perception
Representing
General Quantitative
Perception
Showing
Sequence
Form: Orientation
! !
!
Form: Line Length
!
Form: Line Width
!
! limited
Form: Size / Area
! !
Form: Enclosure
!
Form: Shape
! limited
Form: Curvature
!
Form: Proximity
!*
!*
Form: Added Marks
! limited
Pattern Density
! limited ! limited
Line Pattern
!
Line Endings
!
!
Color: Hue
!
!
Color: Intensity
(Saturation, Brightness, Opacity)
! !
Spatial Position: 2-D Position
! !
!
Motion
limited !*
Texture
! limited
Rotation
! limited
limited
Perspective
! limited
Iconography
!
!
Outline or Solid
limited
Overlay
limited !
Overlap
!
limited
Join
limited !
Aspect Ratio
limited
limited
Labels
! ! ! !
Transformation
!
limited !
Quantity
limited !

DESIGN FOR
UNDERSTANDING

Thank you!
getmentalnotes.com
Design for
Understanding
StephenP.Anderson
@stephenanderson
www.poetpainter.com | www.slideshare.net/stephenpa