Place in Space (AKA "How to Design A Concept Model")
184 likesโข50,080 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.
![โ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](https://image.slidesharecdn.com/visualmodels-ias16-160506125719/85/Place-in-Space-AKA-How-to-Design-A-Concept-Model-85-320.jpg)
![โ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)](https://image.slidesharecdn.com/visualmodels-ias16-160506125719/85/Place-in-Space-AKA-How-to-Design-A-Concept-Model-86-320.jpg)
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 ๏ฌ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
- 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 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
- 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 modi๏ฌed. โข 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 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!
- 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 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โ
- 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! 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 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!
- 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 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.
- 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 bene๏ฌt โจ from a good visual model:
- 37. 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
- 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 in๏ฌnite Good Good Good Good 1, 2, 3; A, B, C text labels optional (alphabetical or numbered) in๏ฌnite 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 in๏ฌnite 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 in๏ฌnite Good Good Good Good 1, 2, 3; A, B, C text labels optional (alphabetical or numbered) in๏ฌnite 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 in๏ฌnite 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 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!
- 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 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?!
- 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 identi๏ฌed 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 / ๏ฌlter 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-๏ฌ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
- 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-๏ฌ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) * * *
- 147. 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) * * *
- 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 identi๏ฌed 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 in๏ฌnite Good Good Good Good 1, 2, 3; A, B, C text labels optional (alphabetical or numbered) in๏ฌnite 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 in๏ฌnite 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 in๏ฌnite Good Good Good Good 1, 2, 3; A, B, C text labels optional (alphabetical or numbered) in๏ฌnite 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 in๏ฌnite 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