Place in Space (AKA "How to Design A Concept Model")
-
Upload
stephen-anderson -
Category
Design
-
view
24.238 -
download
0
Transcript of Place in Space (AKA "How to Design A Concept Model")
-
IA SUMMIT 2016
@stephenandersonStephen P. Anderson
#IAS16t
presented by
Place in SpaceAKA 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.
Lets play a game1 2 3 4 5 6 7 8 9
-
Lets play a (different) gameConsider 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 Garretts Elements of UX
Models others create to reveal patterns:
-
Models others create to reveal patterns:
Stephen P. Andersons 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 | 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 persons self-image, highly personal
Creating Pleasurable Interfaces: Getting fom Tasks to Experiencespresented 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 peoples 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, theres 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 Garretts Elements of UX
Stephen P. Andersons 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 persons self-image, highly personal
Creating Pleasurable Interfaces: Getting fom Tasks to Experiencespresented 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 peoples 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 Garretts Elements of UX
Stephen P. Andersons 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 persons self-image, highly personal
Creating Pleasurable Interfaces: Getting fom Tasks to Experiencespresented 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 peoples lives.
THIS IS THE CHASM THAT IS REALLY, REALLY HARD FOR ORGANIZATIONS TO CROSS
Making sense of espresso drinks!
TheVisualModelswere handedarent 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 Garretts Elements of UX
Stephen P. Andersons 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 persons self-image, highly personal
Creating Pleasurable Interfaces: Getting fom Tasks to Experiencespresented 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 peoples lives.
THIS IS THE CHASM THAT IS REALLY, REALLY HARD FOR ORGANIZATIONS TO CROSS
Making sense of espresso drinks!
TheVisualModelswere handedarent always a good fit
Few people know exactlyHOW to usevisuals 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 Garretts Elements of UX
Stephen P. Andersons 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 persons self-image, highly personal
Creating Pleasurable Interfaces: Getting fom Tasks to Experiencespresented 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 peoples 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 Garretts Elements of UX
Stephen P. Andersons 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 persons self-image, highly personal
Creating Pleasurable Interfaces: Getting fom Tasks to Experiencespresented 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 peoples 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 youre working with that could benefit from a good visual model:
-
The world of Whiskeys, Bourbons,
Rye, Cocktails, etc.
List some things youre 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 were all familiar with
-
!!
!
-
!!
!
-
!!
!
OBJECTS
-
!!
!
SUBSTRATE
OBJECTS
-
OBJECTS
-
SUBSTRATE
OBJECTS
-
TIME TIME TIME TIME
VALUE
VALUE
VALUE
-
TIME TIME TIME TIME
VALUE
VALUE
VALUE
OBJECTS
-
TIME TIME TIME TIME
VALUE
VALUE
VALUE
SUBSTRATE
OBJECTS
-
!!
!
SUBSTRATE
OBJECTS
-
!!
!
-
!!
!
WHICH DATA WHERE?
- Geolocation- Places Ive 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 Ive 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 Ive 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 Ive 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 Ive 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.
SUBSTRATE
OBJECTS!
!
-
Things arranged into territories.
SUBSTRATE
OBJECTS
Spatial Positioning: Spatial Properties:
Visual Encodings
!!
-
Things arranged into territories.
SUBSTRATE
OBJECTSVisual 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 Relationalposition, placement yes infinite Good Good Good Good
1, 2, 3; A, B, C text labels optional (alphabeticalor 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 Relationalposition, placement yes infinite Good Good Good Good
1, 2, 3; A, B, C text labels optional (alphabeticalor 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
RepresentingPrecise Quantitative
Perception
RepresentingGeneral Quantitative
Perception
ShowingSequence
Form: Orientation ! ! !Form: Line Length !Form: Line Width ! ! limitedForm: Size / Area ! !Form: Enclosure !Form: Shape ! limitedForm: Curvature !Form: Proximity !* !*Form: Added Marks ! limitedPattern Density ! limited ! limitedLine Pattern !Line Endings ! !Color: Hue ! !Color: Intensity (Saturation, Brightness, Opacity) ! !Spatial Position: 2-D Position ! ! !Motion
limited !*Texture ! limitedRotation ! limited limitedPerspective ! limitedIconography ! !Outline or Solid
limited
Overlaylimited !
Overlap ! limitedJoin
limited !Aspect Ratio
limited limited
Labels ! ! ! !Transformation ! limited !Quantity
limited !
-
Example Encoding Ordered Useful values Quantitative Ordinal Categorical Relationalposition, placement yes infinite Good Good Good Good
1, 2, 3; A, B, C text labels optional (alphabeticalor 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 Relationalposition, placement yes infinite Good Good Good Good
1, 2, 3; A, B, C text labels optional (alphabeticalor 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
RepresentingPrecise Quantitative
Perception
RepresentingGeneral Quantitative
Perception
ShowingSequence
Form: Orientation ! ! !Form: Line Length !Form: Line Width ! ! limitedForm: Size / Area ! !Form: Enclosure !Form: Shape ! limitedForm: Curvature !Form: Proximity !* !*Form: Added Marks ! limitedPattern Density ! limited ! limitedLine Pattern !Line Endings ! !Color: Hue ! !Color: Intensity (Saturation, Brightness, Opacity) ! !Spatial Position: 2-D Position ! ! !Motion
limited !*Texture ! limitedRotation ! limited limitedPerspective ! limitedIconography ! !Outline or Solid
limited
Overlaylimited !
Overlap ! limitedJoin
limited !Aspect Ratio
limited limited
Labels ! ! ! !Transformation ! limited !Quantity
limited !
-
Example Encoding Ordered Useful values Quantitative Ordinal Categorical Relationalposition, placement yes infinite Good Good Good Good
1, 2, 3; A, B, C text labels optional (alphabeticalor 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 Relationalposition, placement yes infinite Good Good Good Good
1, 2, 3; A, B, C text labels optional (alphabeticalor 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
RepresentingPrecise Quantitative
Perception
RepresentingGeneral Quantitative
Perception
ShowingSequence
Form: Orientation ! ! !Form: Line Length !Form: Line Width ! ! limitedForm: Size / Area ! !Form: Enclosure !Form: Shape ! limitedForm: Curvature !Form: Proximity !* !*Form: Added Marks ! limitedPattern Density ! limited ! limitedLine Pattern !Line Endings ! !Color: Hue ! !Color: Intensity (Saturation, Brightness, Opacity) ! !Spatial Position: 2-D Position ! ! !Motion
limited !*Texture ! limitedRotation ! limited limitedPerspective ! limitedIconography ! !Outline or Solid
limited
Overlaylimited !
Overlap ! limitedJoin
limited !Aspect Ratio
limited limited
Labels ! ! ! !Transformation ! limited !Quantity
limited !
-
Example Encoding Ordered Useful values Quantitative Ordinal Categorical Relationalposition, placement yes infinite Good Good Good Good
1, 2, 3; A, B, C text labels optional (alphabeticalor 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 Relationalposition, placement yes infinite Good Good Good Good
1, 2, 3; A, B, C text labels optional (alphabeticalor 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
RepresentingPrecise Quantitative
Perception
RepresentingGeneral Quantitative
Perception
ShowingSequence
Form: Orientation ! ! !Form: Line Length !Form: Line Width ! ! limitedForm: Size / Area ! !Form: Enclosure !Form: Shape ! limitedForm: Curvature !Form: Proximity !* !*Form: Added Marks ! limitedPattern Density ! limited ! limitedLine Pattern !Line Endings ! !Color: Hue ! !Color: Intensity (Saturation, Brightness, Opacity) ! !Spatial Position: 2-D Position ! ! !Motion
limited !*Texture ! limitedRotation ! limited limitedPerspective ! limitedIconography ! !Outline or Solid
limited
Overlaylimited !
Overlap ! limitedJoin
limited !Aspect Ratio
limited limited
Labels ! ! ! !Transformation ! limited !Quantity
limited !
-
Things arranged into territories.
SUBSTRATE
OBJECTSVisual Encodings
!!
Things
CATEGORY PRECISE QUANTITATIVE INFO. GENERAL QUALITATIVE INFO SEQUENCE Visual Encodings
-
SUBSTRATE
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 Garretts Elements of UX
Stephen P. Andersons 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 persons self-image, highly personal
Creating Pleasurable Interfaces: Getting fom Tasks to Experiencespresented 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 peoples 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 Garretts Elements of UX
Stephen P. Andersons 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 persons self-image, highly personal
Creating Pleasurable Interfaces: Getting fom Tasks to Experiencespresented 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 peoples 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 (ITS THE SAME VISUAL LANGUAGE)
-
Things arranged into territories.
SUBSTRATE
OBJECTS
Spatial Positioning:
!!
Things arranged
-
ARRANGEMENT (PROXIMITY)
-
2003 2004 20062005 2007 2008 2009 20102002 2011 2012
-
ARRANGEMENT (PROXIMITY)
-
SEQUENCE
-
2003 2004 20062005 2007 2008 2009 20102002 2011 2012
-
2003
2004
2006
2005
2007
2008
2009
-
Things arranged into territories.
SUBSTRATE
OBJECTS!
!Things arranged
Spatial Positioning: ARRANGMENT PROXIMITY
-
Things arranged into territories.
SUBSTRATE
OBJECTS!
!into territories.
Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY
-
SHAPE
-
BOUNDARIES
-
Roger Caillois
-
RELATIONSHIPS
-
ATTRIBUTE INTENSITY
-
Things arranged into territories.
SUBSTRATE
OBJECTS!
!into territories.
Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY
-
Things arranged into territories.
SUBSTRATE
OBJECTS!
!
Spatial Positioning: ARRANGMENT PROXIMITY
Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY
-
Useful as a deconstruction tool
-
Things arranged into territories.
SUBSTRATE
OBJECTS!
!
Spatial Positioning: ARRANGMENT PROXIMITY
Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY
-
Things arranged into territories.
SUBSTRATE
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 ratiowater temperaturebrew timesugar?cream?
- Chemex - Aeropress - French Press - Syphon - Hario V60 - Moka pot - Percolator
beansgrind sizebrew 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
Childrens 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
strategicturn-based
played on a board,with pieces
no chancenot 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
Childrens 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
ChessCrossword 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
Childrens 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
ChessCrossword puzzles
Tumult
Agitation
Immoderate Laughter
Mimicry VertigoCompetition
ludus structured activities with explicit rules (games)
paidia unstructured and spontaneous activities (playfulness)
(not regulated)
***
-
AGONCompetition
ALEAChance
MIMESIS Roleplay
ILINXVertigo
PAIDIAunstructured and spontaneous
activities (playfulness)
LUDUSstructured activities with
explicit rules (games)
-
Identify the thing1.
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.
SUBSTRATE
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 Quantitativ
e Ordinal Categorical Relational
position, placementyes infinite
Good GoodGood Good
1, 2, 3; A, B, C text labels option
al (alphabeticalor numbered)
infinite GoodGood Good
Good
lengthyes many
Good Good
size, areayes many
Good Good
angleyes medium
/few Good Good
pattern densityyes few
Good Good
weight, boldnessyes few
Good
saturation, brightnessyes few
Good
colorno few (<
20)Good
shape, iconno medium
Good
pattern textureno medium
Good
enclosure, connectionno infinite
Good Good
line patternno few
Good
line endingsno few
Good
line weightyes few
Good
Properties and Best Uses of Visual Encodings
Noah Iliinsky ComplexDiagrams.com/prope
rties 2012-06
Example Encoding
Ordered Useful values Quantitativ
e Ordinal Categorical Relational
position, placementyes infinite
Good GoodGood Good
1, 2, 3; A, B, C text labels option
al (alphabeticalor numbered)
infinite GoodGood Good
Good
lengthyes many
Good Good
size, areayes many
Good Good
angleyes medium
/few Good Good
pattern densityyes few
Good Good
weight, boldnessyes few
Good
saturation, brightnessyes few
Good
colorno few (<
20)Good
shape, iconno medium
Good
pattern textureno medium
Good
enclosure, connectionno infinite
Good Good
line patternno few
Good
line endingsno few
Good
line weightyes few
Good
Properties and Best Uses of Visual Encodings
Noah Iliinsky ComplexDiagrams.com/prope
rties 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 Solidlimited
Overlay
limited !
Overlap!
limited
Join
limited !
Aspect Ratiolimited
limited
Labels! !
! !
Transformation!
limited !
Quantity
limited !
-
DESIGN FOR UNDERSTANDING
-
Thank you!
getmentalnotes.com
Design for
Understanding
Stephen P. Anderson @stephenanderson www.poetpainter.com | www.slideshare.net/stephenpa