Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

28 438 vues

Publié le

“How do you create a concept model?”

It's a simple question without a simple answer. As wranglers of information, we routinely create visual artifacts to make sense of difficult subjects. Think service blueprints. Site maps. Clusters of sticky notes on walls. Venn diagrams. These are all external representations created to organize our understanding—concept models. And in team settings, these models allow us to communicate and collaborate; master these visual thinking skills and you can effectively frame the conversation. For as long as we’ve organized things into stacks (“my pile, your pile”) or into some continuum (letterforms carved into a clay tablet, sorting kids by height), we’ve used the *spatial* arrangement of things to assign meaning. Consciously or not, we're tapping into a powerful visual language to help us and others understand difficult concepts. But, what is this language we're using? And can it be taught?

In this session, speaker and author Stephen P. Anderson will share the fundamental elements behind every visual representation. Much like there’s a grammar behind the written word, there’s a grammar behind the visual display of information; once understood, you can easily create clear and concise visual representations of thought.

Best of all, this same approach extends into other kinds of external representations, such as custom data visualizations or novel interfaces. And, as we move into a connected world, where information is distributed into the physical environments around us, we can prepare now by having a fundamental vocabulary to describe this arrangement of information.

Whether on the page or screen, or in the physical space around us, understanding how to derive (and convey) meaning through the arrangement of information is and will become an essential skill for anyone designing information.

Publié dans : Design
  • Soyez le premier à commenter

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

  1. 1. IA SUMMIT 2016 @stephenanderson Stephen P. Anderson #IAS16 t presented by Place in Space AKA “How to Create A Concept Model”
  2. 2. “How do you create a concept model?”
  3. 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 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
  4. 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. 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. 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. 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. 8. Jesse James Garrett’s Elements of UX Models others create to reveal patterns:
  9. 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 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
  10. 10. Models others create to reveal patterns: Dan Roam explains health care in the US
  11. 11. Models others create to reveal patterns: Making sense of espresso drinks!
  12. 12. Models others create to reveal patterns: Chris Fahey, explaining whiskeys!
  13. 13. Other “models” that easily reveals patterns…
  14. 14. Medical Chart
  15. 15. Medical Chart
  16. 16. INFORMATION
  17. 17. INFORMATION UNDERSTANDING
  18. 18. External Visual Representations 
 are critical tools for making sense of complex information.
  19. 19. EXTERNAL VISUAL REPRESENTATIONS… WHY?
  20. 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 modified. • Can be rearranged (making it easier to explore many options) • Can be “reformulated” EXTERNAL VISUAL REPRESENTATIONS… WHY?
  21. 21. But, there’s a problem:
  22. 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 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!
  23. 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 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”
  24. 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 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
  25. 25. The good news:
  26. 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!
  27. 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! All of these models build upon a common set of underlying visual elements.
  28. 28. All of these models build upon a common set of underlying visual elements.
  29. 29. Using visual properties and spatial arrangement, to make sense of complex ideas. In a moment…
  30. 30. But first…
  31. 31. List some things you’re working with that could benefit 
 from a good visual model:
  32. 32. 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
  33. 33. Using visual properties and spatial arrangement, to make sense of complex ideas. HOW?
  34. 34. A visual model we’re all familiar with…
  35. 35. OBJECTS
  36. 36. OBJECTS
  37. 37. OBJECTS
  38. 38. OBJECTS
  39. 39. TIME TIME TIME TIME VALUE VALUE VALUE
  40. 40. TIME TIME TIME TIME VALUE VALUE VALUE OBJECTS
  41. 41. TIME TIME TIME TIME VALUE VALUE VALUE OBJECTS
  42. 42. OBJECTS
  43. 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.
  44. 44. 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.
  45. 45. 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.
  46. 46. 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.
  47. 47. 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. 48. Things arranged into territories. OBJECTS
  49. 49. Things arranged into territories. OBJECTS Spatial Positioning: Spatial Properties: Visual Encodings
  50. 50. Things arranged into territories. OBJECTS Visual Encodings Things
  51. 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. 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. 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 ! !
  54. 54. 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 ! !
  55. 55. 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. 56. Things arranged into territories. OBJECTS Visual Encodings Things CATEGORY PRECISE QUANTITATIVE INFO. GENERAL QUALITATIVE INFO SEQUENCE Visual Encodings
  57. 57. OBJECTS Things arranged into territories. Spatial Positioning: Spatial Properties: CATEGORY PRECISE QUANTITATIVE INFO. GENERAL QUALITATIVE INFO SEQUENCE Visual Encodings
  58. 58. 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!
  59. 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 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?!
  60. 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. 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. 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. 63. Things arranged into territories. OBJECTS Spatial Positioning: Things arranged
  64. 64. ARRANGEMENT (PROXIMITY)
  65. 65. 2003 2004 20062005 2007 2008 2009 20102002 2011 20
  66. 66. ARRANGEMENT (PROXIMITY)
  67. 67. SEQUENCE
  68. 68. 2003 2004 20062005 2007 2008 2009 20102002 2011 20
  69. 69. 2003 2004 2006 2005 2007 2008 2009
  70. 70. Things arranged into territories. OBJECTS Things arranged Spatial Positioning: ARRANGMENT
 PROXIMITY
  71. 71. Things arranged into territories. OBJECTS into territories. Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY
  72. 72. SHAPE
  73. 73. BOUNDARIES
  74. 74. Roger Caillois
  75. 75. RELATIONSHIPS
  76. 76. ATTRIBUTE INTENSITY
  77. 77. Things arranged into territories. OBJECTS into territories. Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY
  78. 78. Things arranged into territories. OBJECTS Spatial Positioning: ARRANGMENT
 PROXIMITY Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY
  79. 79. Useful as a ‘deconstruction’ tool…
  80. 80. Things arranged into territories. OBJECTS Spatial Positioning: ARRANGMENT
 PROXIMITY Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY
  81. 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. 82. Putting it all together…
  83. 83. 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.
  84. 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. 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 / filter Identify “the thing(s)”1.
  86. 86. Identify “the thing(s)”1.
  87. 87. Identify “the thing(s)”1. play, fun, and games,
  88. 88. 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
  89. 89. Chess Inspect the properties of each thing 2.
  90. 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. 91. 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) * * *
  92. 92. 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) * * *
  93. 93. AGON
 Competition ALEA
 Chance MIMESIS 
 Roleplay ILINX
 Vertigo PAIDIA
 unstructured and spontaneous activities (playfulness) LUDUS
 structured activities with explicit rules (games)
  94. 94. 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.
  95. 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. 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. 97. DESIGN FOR UNDERSTANDING
  98. 98. Thank you! getmentalnotes.com Design for Understanding StephenP.Anderson @stephenanderson www.poetpainter.com | www.slideshare.net/stephenpa

×