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”

2. “How do you create a concept model?”

3. 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 ﬁrst 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

4. 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

5. 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

6. 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

7. 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

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

9. 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 signiﬁcance Memorable experience worth sharing Super easy to use, works like I think Can be used without diﬃculty 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

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

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

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

13. Other “models” that easily reveals patterns…

14. Medical Chart

15. Medical Chart

16. INFORMATION

17. INFORMATION UNDERSTANDING

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

19. EXTERNAL VISUAL REPRESENTATIONS… WHY?

20. …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 modiﬁed. • Can be rearranged (making it easier to explore many options) • Can be “reformulated” EXTERNAL VISUAL REPRESENTATIONS… WHY?

21. But, there’s a problem:

22. 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 signiﬁcance Memorable experience worth sharing Super easy to use, works like I think Can be used without diﬃculty 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!

23. 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 signiﬁcance Memorable experience worth sharing Super easy to use, works like I think Can be used without diﬃculty 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”

24. 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 signiﬁcance Memorable experience worth sharing Super easy to use, works like I think Can be used without diﬃculty 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

25. The good news:

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 signiﬁcance Memorable experience worth sharing Super easy to use, works like I think Can be used without diﬃculty 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.

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

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

30. But first…

31. List some things you’re working with that could beneﬁt   from a good visual model:

32. The world of Whiskeys, Bourbons, Rye, Cocktails, etc. List some things you’re working with that could beneﬁt   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

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

34. A visual model we’re all familiar with…

35. OBJECTS

36. OBJECTS

37. OBJECTS

38. OBJECTS

39. TIME TIME TIME TIME VALUE VALUE VALUE

40. TIME TIME TIME TIME VALUE VALUE VALUE OBJECTS

41. TIME TIME TIME TIME VALUE VALUE VALUE OBJECTS

42. OBJECTS

43. 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.

48. Things arranged into territories. OBJECTS

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

50. Things arranged into territories. OBJECTS Visual Encodings Things

51. 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

52. 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 ! !

53. 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 ! !

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

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

59. 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 signiﬁcance Memorable experience worth sharing Super easy to use, works like I think Can be used without diﬃculty 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?!

60. 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

61. “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

62. “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)

63. Things arranged into territories. OBJECTS Spatial Positioning: Things arranged

64. ARRANGEMENT (PROXIMITY)

65. 2003 2004 20062005 2007 2008 2009 20102002 2011 20

66. ARRANGEMENT (PROXIMITY)

67. SEQUENCE

68. 2003 2004 20062005 2007 2008 2009 20102002 2011 20

69. 2003 2004 2006 2005 2007 2008 2009

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

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

72. SHAPE

73. BOUNDARIES

74. Roger Caillois

75. RELATIONSHIPS

76. ATTRIBUTE INTENSITY

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

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

79. Useful as a ‘deconstruction’ tool…

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

81. 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

82. Putting it all together…

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

84. 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.

85. 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 / ﬁlter Identify “the thing(s)”1.

86. Identify “the thing(s)”1.

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

88. Identify “the thing(s)”1. play, fun, and games, Kite-ﬂying 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

89. Chess Inspect the properties of each thing 2.

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

91. Kite-ﬂying 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 identiﬁed 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) * * *

92. Kite-ﬂying 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) * * *

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

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

95. 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

96. 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 !

97. DESIGN FOR UNDERSTANDING

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

Place in Space (AKA "How to Design A Concept Model")

Stephen Anderson

Place in Space (AKA "How to Design A Concept Model")