Place in Space (AKA "How to Design A Concept Model")
•
184 likes•49,356 views
The document summarizes Stephen Anderson's presentation at IA Summit 2016 on creating concept models. It discusses playing a numbers game to add up to 15 as an example of a simple concept model. It then presents magic squares as a more complex concept model and compares it to tic-tac-toe. The document lists various models used to reveal patterns and concepts. It notes that while visual models are useful, the ones provided may not always fit the problem well and few know how to create new visual models. However, it suggests that all visual models are built upon common visual elements that can be used to make sense of complex ideas.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Place in Space (AKA "How to Design A Concept Model")
Similar to Place in Space (AKA "How to Design A Concept Model") (20)
More from Stephen Anderson
More from Stephen Anderson (20)
Recently uploaded
Recently uploaded (20)
Place in Space (AKA "How to Design A Concept Model")
- 1. IA SUMMIT 2016 @stephenanderson Stephen P. Anderson #IAS16 t presented by Place in Space AKA “How to Create A Concept Model”
- 3. “How do you create a concept model?”
- 4. 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
- 5. 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
- 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
- 7. 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
- 8. 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
- 9. Jesse James Garrett’s Elements of UX Models others create to reveal patterns:
- 10. 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
- 11. Models others create to reveal patterns: Dan Roam explains health care in the US
- 12. Models others create to reveal patterns: Making sense of espresso drinks!
- 13. Models others create to reveal patterns: Chris Fahey, explaining whiskeys!
- 14. Other “models” that easily reveals patterns…
- 17. Medical Chart
- 18. Medical Chart
- 19. INFORMATION
- 21. External Visual Representations are critical tools for making sense of complex information.
- 23. …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?
- 24. But, there’s a problem:
- 25. 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!
- 26. 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”
- 27. 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
- 28. The good news:
- 29. 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!
- 30. 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.
- 33. All of these models build upon a common set of underlying visual elements.
- 34. Using visual properties and spatial arrangement, to make sense of complex ideas. In a moment…
- 35. But first…
- 36. List some things you’re working with that could benefit from a good visual model:
- 37. 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
- 38. Using visual properties and spatial arrangement, to make sense of complex ideas. HOW?
- 39. A visual model we’re all familiar with…
- 43. OBJECTS
- 44. OBJECTS
- 48. OBJECTS
- 49. OBJECTS
- 57. TIME TIME TIME TIME VALUE VALUE VALUE
- 58. TIME TIME TIME TIME VALUE VALUE VALUE OBJECTS
- 59. TIME TIME TIME TIME VALUE VALUE VALUE OBJECTS
- 60. OBJECTS
- 62. 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.
- 63. 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.
- 64. 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.
- 65. 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.
- 66. 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.
- 68. Things arranged into territories. OBJECTS
- 69. Things arranged into territories. OBJECTS Spatial Positioning: Spatial Properties: Visual Encodings
- 70. Things arranged into territories. OBJECTS Visual Encodings Things
- 71. 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
- 75. 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 ! !
- 76. 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 ! !
- 77. 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 ! !
- 78. 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 ! !
- 79. Things arranged into territories. OBJECTS Visual Encodings Things CATEGORY PRECISE QUANTITATIVE INFO. GENERAL QUALITATIVE INFO SEQUENCE Visual Encodings
- 80. OBJECTS Things arranged into territories. Spatial Positioning: Spatial Properties: CATEGORY PRECISE QUANTITATIVE INFO. GENERAL QUALITATIVE INFO SEQUENCE Visual Encodings
- 81. 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!
- 82. 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?!
- 84. 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
- 85. “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
- 86. “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)
- 88. Things arranged into territories. OBJECTS Spatial Positioning: Things arranged
- 94. 2003 2004 20062005 2007 2008 2009 20102002 2011 20
- 96. SEQUENCE
- 97. 2003 2004 20062005 2007 2008 2009 20102002 2011 20
- 102. Things arranged into territories. OBJECTS Things arranged Spatial Positioning: ARRANGMENT PROXIMITY
- 103. Things arranged into territories. OBJECTS into territories. Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY
- 105. SHAPE
- 110. BOUNDARIES
- 113. Roger Caillois
- 114. RELATIONSHIPS
- 115. ATTRIBUTE INTENSITY
- 116. Things arranged into territories. OBJECTS into territories. Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY
- 117. Things arranged into territories. OBJECTS Spatial Positioning: ARRANGMENT PROXIMITY Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY
- 119. Useful as a ‘deconstruction’ tool…
- 135. Things arranged into territories. OBJECTS Spatial Positioning: ARRANGMENT PROXIMITY Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY
- 136. 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
- 137. Putting it all together…
- 138. 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.
- 139. 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.
- 140. 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.
- 142. Identify “the thing(s)”1. play, fun, and games,
- 143. 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
- 144. Chess Inspect the properties of each thing 2.
- 145. Chess 2 players competitive strategic turn-based played on a board, with pieces no chance not simple Inspect the properties of each thing 2.
- 146. 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) * * *
- 147. 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) * * *
- 149. AGON Competition ALEA Chance MIMESIS Roleplay ILINX Vertigo PAIDIA unstructured and spontaneous activities (playfulness) LUDUS structured activities with explicit rules (games)
- 150. 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.
- 151. 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
- 152. 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 !
- 154. Thank you! getmentalnotes.com Design for Understanding StephenP.Anderson @stephenanderson www.poetpainter.com | www.slideshare.net/stephenpa