Movatterモバイル変換

[0]ホーム
URL:

Stephen Anderson, profile picture
Uploaded byStephen Anderson
PDF, PPTX50,303 views

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

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.

Embed presentation

Download as PDF, PPTX
IA SUMMIT 2016@stephenandersonStephen P. Anderson#IAS16tpresented byPlace in SpaceAKA “How to Create A Concept Model”
“How do you create a concept model?”
Write down the numbers 1 through 9 on a sheet of paper.You will each take turns selecting numbers from the list(crossing off each number once it has been selected). 
The winner is the first person to have chosen exactlythree numbers which add up to 15.For example if I selected 9, 6, 2 and you selected 3, 8, 4 thenyou would win because 3 + 8 + 4 = 15.Let’s play a game…123456789
Let’s play a (different) game…Consider a 3 x 3 magic square:The rows, columns, and diagonals all addup to 15, and moreover every way ofwriting 15 as the sum of three numbersfrom 1 to 9 is represented.When you choose a number, draw an Xover it; when I choose a number, circle it.4 9 23 5 78 1 6
1234567894 9 23 5 78 1 6Why is Tic-tac-toe so much simpler?VS
1234567894 9 23 5 78 1 6Tic tac toe is a model that more easily reveals patternsVS
Customer JourneysBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:9 GridsCharts & Diagrams Data Visualizations Abstract PatternsModels, Templates & FrameworksX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line Graph
Jesse James Garrett’sElements of UXModels others create to reveal patterns:
Models others create to reveal patterns:Stephen P. Anderson’sUX Hierarchy of NeedsMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | pSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that weproducts that function, tunderstandable and usabwe also need to build prodthat bring joy and excitepleasure and fun, and ybeauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSS
Models others create to reveal patterns:Dan Roam explains health care in the US
Models others create to reveal patterns:Making sense of espresso drinks!
Models others create to reveal patterns:Chris Fahey, explaining whiskeys!
Other “models” that easily reveals patterns…
Medical Chart
Medical Chart
INFORMATION
INFORMATION UNDERSTANDING
External Visual Representations 
are critical tools for making sense ofcomplex information.
EXTERNAL VISUAL REPRESENTATIONS…WHY?
…create Persistent,Shareable Structures:•Are persistent structures.• Can be shared with others• Can represent literal as we! as 
conceptual ideas.…provide Perceptual,Computational Benefits:• Relieve our short term memory• Help us to spot patterns•Are powerful as mental construction tools.…allow us to more EasilyInteract with Information:• Can be modified.• Can be rearranged (making it easier toexplore many options)• Can be “reformulated”EXTERNAL VISUAL REPRESENTATIONS…WHY?
But, there’s a problem:
Abstract PatternsCharts & DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!
Abstract PatternsCharts & DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!The Visual Models we’re handedaren’t always a good “fit”
Abstract PatternsCharts & DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!The Visual Models we’re handedaren’t always a good “fit”Few people know exactly HOW to usevisuals to explore difficult subjects
The good news:
Abstract PatternsCharts & DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!
Abstract PatternsCharts & DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!All of these models buildupon a common set ofunderlying visual elements.
All of these models buildupon a common set ofunderlying visual elements.
Using visual properties and spatial arrangement,to make sense of complex ideas.In a moment…
But first…
List some things you’re working with that could benefit 
from a good visual model:
The world ofWhiskeys, Bourbons,Rye, Cocktails,etc.List some things you’re working with that could benefit 
from a good visual model: Choosing whichboard games doI want to buy!The world ofartisan cheesesGah! I enjoy theMarvel movies. Howdo I make sense ofall the differentcomic book titlesand storylines!shopping for agood VPN servicehow public keyencryption worksa way to assessthe presidentialcandidatesmaking sense ofmedical billshow to preparethe perfect cupof coffee!comparing AndroidPhonesUX PrototypingtoolsunderstandingLegal Proceedings
Using visual properties and spatial arrangement,to make sense of complex ideas.HOW?
A visual model we’re all familiar with…
OBJECTS
OBJECTS
OBJECTS
OBJECTS
TIME TIME TIME TIMEVALUEVALUEVALUE
TIME TIME TIME TIMEVALUEVALUEVALUEOBJECTS
TIME TIME TIME TIMEVALUEVALUEVALUEOBJECTS
OBJECTS
WHICH DATAWHERE?- 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.
WHICH DATAWHERE?- 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.
WHICH DATAWHERE?- 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.
WHICH DATAWHERE?- 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.
WHICH DATAWHERE?- 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.
Things arranged into territories.OBJECTS
Things arranged into territories.OBJECTSSpatial Positioning: Spatial Properties:Visual Encodings
Things arranged into territories.OBJECTSVisual EncodingsThings
SHAPE COLOR: INTENSITY ICONOGRAPHY PERSPECTIVECOLOR: HUE OPACITY OVERLAY OUTLINE OR SOLIDSPATIAL POSITION TEXTURE OVERLAP ASPECT RATIOFORM: SIZE/AREA ROTATION JOIN FORM: ENCLOSURELINE LENGTH LINE TREATMENTETC!IF OUTLINE,THICKNESS OF STROKEVisual Encodings
Example Encoding Ordered Useful values Quantitative Ordinal Categorical Relationalposition, placement yes infinite Good Good Good Good1, 2, 3; A, B, C text labels optional(alphabeticalor numbered)infinite Good Good Good Goodlength yes many Good Goodsize, area yes many Good Goodangle yes medium/few Good Goodpattern density yes few Good Goodweight, boldness yes few Goodsaturation, brightness yes few Goodcolor no few (< 20) Goodshape, icon no medium Goodpattern texture no medium Goodenclosure, connection no infinite Good Goodline pattern no few Goodline endings no few Goodline weight yes few GoodProperties and Best Uses of Visual EncodingsNoah Iliinsky • ComplexDiagrams.com/properties • 2012-06Example Encoding Ordered Useful values Quantitative Ordinal Categorical Relationalposition, placement yes infinite Good Good Good Good1, 2, 3; A, B, C text labels optional(alphabeticalor numbered)infinite Good Good Good Goodlength yes many Good Goodsize, area yes many Good Goodangle yes medium/few Good Goodpattern density yes few Good Goodweight, boldness yes few Goodsaturation, brightness yes few Goodcolor no few (< 20) Goodshape, icon no medium Goodpattern texture no medium Goodenclosure, connection no infinite Good Goodline pattern no few Goodline endings no few GoodProperties and Best Uses of Visual Encodings⋆RepresentingCategoriesRepresentingPrecise QuantitativePerceptionRepresentingGeneral QuantitativePerceptionShowingSequenceForm: Orientation! ! !Form: Line Length!Form: Line Width! ! limitedForm: Size / Area! !Form: Enclosure!Form: Shape! limitedForm: Curvature!Form: Proximity!* !*Form: Added Marks! limitedPattern Density! limited ! limitedLine Pattern!Line Endings! !Color: Hue! !Color: Intensity(Saturation, Brightness, Opacity) ! !Spatial Position: 2-D Position! ! !Motionlimited !*Texture! limitedRotation! limited limitedPerspective! limitedIconography! !
Encoding Ordered Useful values Quantitative OrdinalProperties and Best Uses of Visual EncodingRepresentingCategoriesRepresentingPrecise QuantitativePerceptionRepresentingGeneral QuantitativePerceptionShowingSequence! ! !!! ! limited! !
Encoding Ordered Useful values Quantitative OrdinalProperties and Best Uses of Visual EncodingRepresentingCategoriesRepresentingPrecise QuantitativePerceptionRepresentingGeneral QuantitativePerceptionShowingSequence! ! !!! ! limited! !
Encoding Ordered Useful values Quantitative OrdinalProperties and Best Uses of Visual EncodingRepresentingCategoriesRepresentingPrecise QuantitativePerceptionRepresentingGeneral QuantitativePerceptionShowingSequence! ! !!! ! limited! !
Things arranged into territories.OBJECTSVisual EncodingsThingsCATEGORYPRECISE QUANTITATIVE INFO.GENERAL QUALITATIVE INFOSEQUENCEVisual Encodings
OBJECTSThings arranged into territories.Spatial Positioning: Spatial Properties:CATEGORYPRECISE QUANTITATIVE INFO.GENERAL QUALITATIVE INFOSEQUENCEVisual Encodings
Abstract PatternsCharts & DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!
Abstract PatternsCharts & DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!JUST SCREENS & PAPER?!
Before the page, there was space itself.Perhaps the simplest way to use spaceto communicate is to arrange orrearrange things in it.”“%om “Visualizing Thought” Barbara Tversky
“Close’’ family members and friends sit nearer to oneanother than strangers.The flatware tray in a drawer of most kitchens allowsarranging the knives together in one pile and separatingthem from the pile of forks and the pile of spoons.Written text is spatially arranged to reflect the organizationof thought, spaces between words and sentences, largerspaces between paragraphs.[We put] the letters to be mailed by the door or the bills tobe paid on the top of the desk[We line] up the ingredients for a recipe in order of use%om “Visualizing Thought” Barbara Tversky
“Close’’ family members and friends sit nearer to oneanother than strangers.The flatware tray in a drawer of most kitchens allowsarranging the knives together in one pile and separatingthem from the pile of forks and the pile of spoons.Written text is spatially arranged to reflect the organizationof thought, spaces between words and sentences, largerspaces between paragraphs.[We put] the letters to be mailed by the door or the bills tobe paid on the top of the desk[We line] up the ingredients for a recipe in order of use%om “Visualizing Thought” Barbara TverskyLITERAL MODELS—VS—CONCEPTUAL MODELS(IT’S THE SAME VISUAL LANGUAGE)
Things arranged into territories.OBJECTSSpatial Positioning:Things arranged
ARRANGEMENT (PROXIMITY)
2003 2004 20062005 2007 2008 2009 20102002 2011 20
ARRANGEMENT (PROXIMITY)
SEQUENCE
2003 2004 20062005 2007 2008 2009 20102002 2011 20
2003200420062005200720082009
Things arranged into territories.OBJECTSThings arrangedSpatial Positioning:ARRANGMENT
PROXIMITY
Things arranged into territories.OBJECTSinto territories.Spatial Properties:SHAPEBOUNDARIESRELATIONSHIPSATTRIBUTE INTENSITY
SHAPE
BOUNDARIES
Roger Caillois
RELATIONSHIPS
ATTRIBUTE INTENSITY
Things arranged into territories.OBJECTSinto territories.Spatial Properties:SHAPEBOUNDARIESRELATIONSHIPSATTRIBUTE INTENSITY
Things arranged into territories.OBJECTSSpatial Positioning:ARRANGMENT
PROXIMITYSpatial Properties:SHAPEBOUNDARIESRELATIONSHIPSATTRIBUTE INTENSITY
Useful as a ‘deconstruction’ tool…
Things arranged into territories.OBJECTSSpatial Positioning:ARRANGMENT
PROXIMITYSpatial Properties:SHAPEBOUNDARIESRELATIONSHIPSATTRIBUTE INTENSITY
Things arranged into territories.OBJECTSSpatial Positioning:ARRANGMENT
PROXIMITYSpatial Properties:SHAPEBOUNDARIESRELATIONSHIPSATTRIBUTE INTENSITYCATEGORYPRECISE QUANTITATIVE INFO.GENERAL QUALITATIVE INFOSEQUENCEVisual Encodings
Putting it all together…
Identify “the thing(s)”1.Inspect the propertiesof each thing2.Arrange the things(based on identified properties)3.Clarify the territories4.Keep (or remove) the things,as appropriate5.
comparing AndroidPhonesSamsung Galaxy S6Samsung Galaxy S7Samsung Galaxy S6 EdgeSamsung Galaxy S7 EdgeSamsung Galaxy Note 5Google Nexus 6PSony Xperia Z5 CompactLG V10Alcatel OneTouch Idol 3 (5.5)Motorola Moto G Late 2015etc.Identify “the thing(s)”1.
how to preparethe perfect cupof coffee!comparing AndroidPhonesSamsung Galaxy S6Samsung Galaxy S7Samsung Galaxy S6 EdgeSamsung Galaxy S7 EdgeSamsung Galaxy Note 5Google Nexus 6PSony Xperia Z5 CompactLG V10Alcatel OneTouch Idol 3 (5.5)Motorola Moto G Late 2015etc.beans:water ratiowater temperaturebrew timesugar?cream?- Chemex- Aeropress- French Press- Syphon- Hario V60- Moka pot- Percolatorbeansgrind sizebrew method / filterIdentify “the thing(s)”1.
Identify “the thing(s)”1.
Identify “the thing(s)”1.play, fun, andgames,
Identify “the thing(s)”1.play, fun, andgames,Kite-flyingSolitaireCrossword puzzlesRacingWrestlingAthleticsBoxingBilliardsFencingCheckersFootballChessContests, Sports ingeneralCounting-outrhymesHeads or tailsBettingRouletteLotteriesChildren’sinitiationsGames of illusionTagDisguisesMasksChildren“whirling”Horseback ridingSwingingWaltzingSkiingMountainclimbing Tightrope walkingTravelingcarnivalsTheater
ChessInspect the propertiesof each thing2.
Chess2 playerscompetitivestrategicturn-basedplayed on a board,with piecesno chancenot simpleInspect the propertiesof each thing2.
Kite-flyingSolitaireRacingWrestlingAthleticsBoxingBilliardsFencingFootballContests, Sports ingeneralCounting-outrhymesHeads or tailsBettingRouletteLotteriesChildren’sinitiationsGames of illusionTagDisguisesMasksChildren“whirling”Horseback ridingSwingingWaltzingSkiingMountainclimbingTightrope walkingTravelingcarnivalsTheaterArrange the things(based on identified properties)3.CheckersChessCrossword puzzlesTumultAgitationImmoderateLaughterludusstructured activities withexplicit rules (games)paidiaunstructured and spontaneousactivities (playfulness)(not regulated)***
Kite-flyingSolitaireRacingWrestlingAthleticsBoxingBilliardsFencingFootballContests, Sports ingeneralCounting-outrhymesHeads or tailsBettingRouletteLotteriesChildren’sinitiationsGames of illusionTagDisguisesMasksChildren“whirling”Horseback ridingSwingingWaltzingSkiingMountainclimbingTightrope walkingTravelingcarnivalsTheaterChanceClarify the territories4.CheckersChessCrossword puzzlesTumultAgitationImmoderateLaughterMimicry VertigoCompetitionludusstructured activities withexplicit rules (games)paidiaunstructured and spontaneousactivities (playfulness)(not regulated)***
AGON
CompetitionALEA
ChanceMIMESIS 
RoleplayILINX
VertigoPAIDIA
unstructured and spontaneousactivities (playfulness)LUDUS
structured activities withexplicit rules (games)
Identify “the thing”1.Inspect the propertiesof each thing2.Arrange the things(based on identified properties)3.Clarify the territories4.Keep (or remove) the things,as appropriate5.
Things arranged into territories.OBJECTSSpatial Positioning:ARRANGMENT
PROXIMITYSpatial Properties:SHAPEBOUNDARIESRELATIONSHIPSATTRIBUTE INTENSITYCATEGORYPRECISE QUANTITATIVE INFO.GENERAL QUALITATIVE INFOSEQUENCEVisual Encodings
poetpainter.com/tilesExample EncodingOrdered Useful values Quantitative Ordinal Categorical Relationalposition, placement yesinfinite Good Good Good Good1, 2, 3; A, B, C text labelsoptional(alphabeticalor numbered)infinite Good Good Good Goodlengthyesmany Good Goodsize, areayesmany Good Goodangleyesmedium/few Good Goodpattern density yesfew Good Goodweight, boldness yesfewGoodsaturation, brightness yesfewGoodcolornofew (< 20)Goodshape, iconnomediumGoodpattern texture nomediumGoodenclosure, connection noinfiniteGood Goodline patternnofewGoodline endingsnofewGoodline weightyesfewGoodProperties and Best Uses of Visual EncodingsNoah Iliinsky • ComplexDiagrams.com/properties • 2012-06Example EncodingOrdered Useful values Quantitative Ordinal Categorical Relationalposition, placement yesinfinite Good Good Good Good1, 2, 3; A, B, C text labelsoptional(alphabeticalor numbered)infinite Good Good Good Goodlengthyesmany Good Goodsize, areayesmany Good Goodangleyesmedium/few Good Goodpattern density yesfew Good Goodweight, boldness yesfewGoodsaturation, brightness yesfewGoodcolornofew (< 20)Goodshape, iconnomediumGoodpattern texture nomediumGoodenclosure, connection noinfiniteGood Goodline patternnofewGoodline endingsnofewGoodline weightyesfewGoodProperties and Best Uses of Visual EncodingsNoah Iliinsky • ComplexDiagrams.com/properties • 2012-06⋆1, 2, 3; A, B ,CRepresentingCategoriesRepresentingPrecise QuantitativePerceptionRepresentingGeneral QuantitativePerceptionShowingSequenceForm: Orientation! !!Form: Line Length!Form: Line Width!! limitedForm: Size / Area! !Form: Enclosure!Form: Shape! limitedForm: Curvature!Form: Proximity!*!*Form: Added Marks! limitedPattern Density! limited ! limitedLine Pattern!Line Endings!!Color: Hue!!Color: Intensity(Saturation, Brightness, Opacity)! !Spatial Position: 2-D Position! !!Motionlimited !*Texture! limitedRotation! limitedlimitedPerspective! limitedIconography!!Outline or SolidlimitedOverlaylimited !Overlap!limitedJoinlimited !Aspect RatiolimitedlimitedLabels! ! ! !Transformation!limited !Quantitylimited !
DESIGN FORUNDERSTANDING
Thank you!getmentalnotes.comDesign forUnderstandingStephenP.Anderson@stephenandersonwww.poetpainter.com | www.slideshare.net/stephenpa

Recommended

PDF
Design Sprints for Innovation
PDF
Typography for [Digital] Humanists
PPTX
Designing the Future: When Fact Meets Fiction
PDF
Prototyping is an attitude
PDF
Design in Tech Report 2017
PDF
The Shift: UX Designer as Business Consultant (2016)
PDF
Which font should I use?
PDF
THE PRESENTATION DESIGN CRASH COURSE
PDF
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
PDF
Design Thinking - Bootcamp
PDF
Boring to Bold: Presentation Design Ideas for Non-Designers
PDF
Design System & Atomic Design
PDF
How To Create Presentation Slides That Are Out Of This World by @slidecomet @...
PDF
Building a Design System: A Practitioner's Case Study
 
PDF
Design System & Atomic Design
PDF
How to Create a Great Product Storyboard in 8 Steps
PDF
Design System 101
PDF
Design system presentation - How to sell it internally
PDF
Design Systems at Scale
PDF
The Sketchnote Mini-Workshop
PDF
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)
PDF
IDEO - Design thinking workshop 2016
PDF
The Startup Design Toolkit - a design-thinking approach to startups and produ...
PDF
Design Systems
PPTX
15 Quotes To Nurture Your Creative Soul!
PDF
Design Thinking 101 - An Introduction to Design Thinking for Developers
PDF
Design Thinking 101
PPTX
Introduction to Design Thinking
PPT
Complete Business Frameworks Toolkit - Strategy, Marketing, Operations, Consu...
PDF
Management Consultant Toolkit in powerpoint & Excel

More Related Content

PDF
Design Sprints for Innovation
PDF
Typography for [Digital] Humanists
PPTX
Designing the Future: When Fact Meets Fiction
PDF
Prototyping is an attitude
PDF
Design in Tech Report 2017
PDF
The Shift: UX Designer as Business Consultant (2016)
PDF
Which font should I use?
PDF
THE PRESENTATION DESIGN CRASH COURSE
Design Sprints for Innovation
Typography for [Digital] Humanists
Designing the Future: When Fact Meets Fiction
Prototyping is an attitude
Design in Tech Report 2017
The Shift: UX Designer as Business Consultant (2016)
Which font should I use?
THE PRESENTATION DESIGN CRASH COURSE

What's hot

PDF
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
PDF
Design Thinking - Bootcamp
PDF
Boring to Bold: Presentation Design Ideas for Non-Designers
PDF
Design System & Atomic Design
PDF
How To Create Presentation Slides That Are Out Of This World by @slidecomet @...
PDF
Building a Design System: A Practitioner's Case Study
 
PDF
Design System & Atomic Design
PDF
How to Create a Great Product Storyboard in 8 Steps
PDF
Design System 101
PDF
Design system presentation - How to sell it internally
PDF
Design Systems at Scale
PDF
The Sketchnote Mini-Workshop
PDF
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)
PDF
IDEO - Design thinking workshop 2016
PDF
The Startup Design Toolkit - a design-thinking approach to startups and produ...
PDF
Design Systems
PPTX
15 Quotes To Nurture Your Creative Soul!
PDF
Design Thinking 101 - An Introduction to Design Thinking for Developers
PDF
Design Thinking 101
PPTX
Introduction to Design Thinking
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
Design Thinking - Bootcamp
Boring to Bold: Presentation Design Ideas for Non-Designers
Design System & Atomic Design
How To Create Presentation Slides That Are Out Of This World by @slidecomet @...
Building a Design System: A Practitioner's Case Study
 
Design System & Atomic Design
How to Create a Great Product Storyboard in 8 Steps
Design System 101
Design system presentation - How to sell it internally
Design Systems at Scale
The Sketchnote Mini-Workshop
How I got 2.5 Million views on Slideshare (by @nickdemey - Board of Innovation)
IDEO - Design thinking workshop 2016
The Startup Design Toolkit - a design-thinking approach to startups and produ...
Design Systems
15 Quotes To Nurture Your Creative Soul!
Design Thinking 101 - An Introduction to Design Thinking for Developers
Design Thinking 101
Introduction to Design Thinking

Viewers also liked

PPT
Complete Business Frameworks Toolkit - Strategy, Marketing, Operations, Consu...
PDF
Management Consultant Toolkit in powerpoint & Excel
PPTX
Visual Data Representation Techniques Combining Art and Design
PDF
Bridging business analysis and business architecture - The Open Group webinar
PDF
Net Promoter Score Pitfalls to Avoid
PPTX
Introduction to Enterprise Architecture
PDF
Aula 3. frameworks front end
PPT
Togaf 9 template solution concept diagram
PDF
Integrating It Frameworks, Methodologies And Best Practices Into It Delivery ...
PDF
Beyond Measure, Erika Hall
PDF
Social Business: Frameworks for Next-Gen Organizational Structure | Enterpris...
PDF
Aula 5. frameworks mobile
PDF
Aula 6. trabalho da disciplina
PDF
Data Stream Processing - Concepts and Frameworks
PDF
5 Factors Impacting Your Big Data Project's Performance
 
PDF
IQ Crash Course - Big Data Analytics
Complete Business Frameworks Toolkit - Strategy, Marketing, Operations, Consu...
Management Consultant Toolkit in powerpoint & Excel
Visual Data Representation Techniques Combining Art and Design
Bridging business analysis and business architecture - The Open Group webinar
Net Promoter Score Pitfalls to Avoid
Introduction to Enterprise Architecture
Aula 3. frameworks front end
Togaf 9 template solution concept diagram
Integrating It Frameworks, Methodologies And Best Practices Into It Delivery ...
Beyond Measure, Erika Hall
Social Business: Frameworks for Next-Gen Organizational Structure | Enterpris...
Aula 5. frameworks mobile
Aula 6. trabalho da disciplina
Data Stream Processing - Concepts and Frameworks
5 Factors Impacting Your Big Data Project's Performance
 
IQ Crash Course - Big Data Analytics

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

PDF
UX Patterns & Design Systems
PDF
UX crash course - part 1
PDF
UX Workshop at Startit@KBC
PDF
UX Fundamentals
PDF
User Experience 2: Talk@Stabilo
PDF
Eason ux design_portfolio
PDF
Pixel Envy
PDF
What is this UX thing 11-24-15
PDF
What is User Experience?
PDF
What is this UX thing?
PDF
Ni week no designer, no problem
PDF
What is this UX thing?
PDF
SummitUp Opening Keynote 2016
PPTX
Trends & Tools in UX
PPTX
Introduction to User Experience Design 2/16/19
PPTX
Introduction to User Experience Design 06/22/19
PDF
UX for Business Analysts
PDF
Why UX?
PDF
Practical Conceptual Modeling at UX Detroit Feb 2015
PDF
Modelling the User Interface
UX Patterns & Design Systems
UX crash course - part 1
UX Workshop at Startit@KBC
UX Fundamentals
User Experience 2: Talk@Stabilo
Eason ux design_portfolio
Pixel Envy
What is this UX thing 11-24-15
What is User Experience?
What is this UX thing?
Ni week no designer, no problem
What is this UX thing?
SummitUp Opening Keynote 2016
Trends & Tools in UX
Introduction to User Experience Design 2/16/19
Introduction to User Experience Design 06/22/19
UX for Business Analysts
Why UX?
Practical Conceptual Modeling at UX Detroit Feb 2015
Modelling the User Interface

More from Stephen Anderson

PDF
From Paths to Sandboxes
PDF
(Design) Principles To Build By
PDF
What Board Games can Teach Us about Designing Experiences
PDF
Stop Doing What Youre Told
PDF
Critical Thinking forUX Designers (Workshop)
PDF
Hooked on a Feeling
PDF
Euro IA Closing Plenary - What I'm Curious About…
PDF
The Subtle Art of Seduction
PDF
The Architecture of Understanding (World IA Day Chicago Keynote)
PDF
Playing Games with Your Career
PDF
Long After the Thrill: Sustaining Passionate Users
PDF
The Stories We Construct
PDF
Sweating the UX Details
PDF
Long after the Thrill: Sustaining Passionate Users (SxSW Version)
PDF
Ideas You Can Play With
PDF
Speaking up for Experiences
PDF
When Data Gets Up Close and Personal
PDF
What's Your Perception Strategy? (Why It's NOT All About Content)
PDF
Quest for Emotional Engagement: Information Visualization (v1.5)
PDF
To Boldly Go… From Information to Understanding
From Paths to Sandboxes
(Design) Principles To Build By
What Board Games can Teach Us about Designing Experiences
Stop Doing What Youre Told
Critical Thinking forUX Designers (Workshop)
Hooked on a Feeling
Euro IA Closing Plenary - What I'm Curious About…
The Subtle Art of Seduction
The Architecture of Understanding (World IA Day Chicago Keynote)
Playing Games with Your Career
Long After the Thrill: Sustaining Passionate Users
The Stories We Construct
Sweating the UX Details
Long after the Thrill: Sustaining Passionate Users (SxSW Version)
Ideas You Can Play With
Speaking up for Experiences
When Data Gets Up Close and Personal
What's Your Perception Strategy? (Why It's NOT All About Content)
Quest for Emotional Engagement: Information Visualization (v1.5)
To Boldly Go… From Information to Understanding

Recently uploaded

PPTX
Construction area photographs site visit
PPTX
Become a Professional UI/UX Designer by Learning How to Create Beautiful, Use...
PDF
Art and Visual Perception: A PSYCHOLOGY OF THE CREATIVE EYE
PDF
Creating Magical CSS-Only Image Tilt Effects No JavaScript Required.pdf
PPTX
Soundtoys Mac v5.5.5.0 Crack for MacOS Full Version [Latest] pptx
PPTX
SoundSource 6.0.0 Crack for MacOS Full Version Download
PPTX
iStat Menus 7.20 Crack for MacOS 2026 Full Version [Latest] pptx
PPTX
AnyTrans for iOS 8.9.14.20251127 With Crack for MacOS [Latest] pptx
PPTX
Dropshare 6.8.0 Crack for macOS Download
PPTX
iTools 4.5.1.9 Crack for macOS 100% Working 2026 Fully Unlocked pptx
PPTX
Wondershare Filmora 15.0.11 Crack for Mac Key Full Download [Latest] pptx
PPTX
CH 12 FASHION DESIGN AND MERCHANDIZING.pptx
PPSX
Gas Turbine simulation in thermoflow software PRO Overview.ppsx
PDF
induction and two in one event with party
PPTX
Staffing Board - MICU1111111111111111111
PPTX
Presentation - The First Christmas Story.pptx
PDF
WEDDING STYLING / INTERIOR DESIGN PORTFOLIO 2025 SK
PDF
Criminal record certificate: no registration - College graduation Certified b...
PPTX
block chain and their importance in real life.pptx
PPTX
Chapt_4[1].ppt very interseting and important
Construction area photographs site visit
Become a Professional UI/UX Designer by Learning How to Create Beautiful, Use...
Art and Visual Perception: A PSYCHOLOGY OF THE CREATIVE EYE
Creating Magical CSS-Only Image Tilt Effects No JavaScript Required.pdf
Soundtoys Mac v5.5.5.0 Crack for MacOS Full Version [Latest] pptx
SoundSource 6.0.0 Crack for MacOS Full Version Download
iStat Menus 7.20 Crack for MacOS 2026 Full Version [Latest] pptx
AnyTrans for iOS 8.9.14.20251127 With Crack for MacOS [Latest] pptx
Dropshare 6.8.0 Crack for macOS Download
iTools 4.5.1.9 Crack for macOS 100% Working 2026 Fully Unlocked pptx
Wondershare Filmora 15.0.11 Crack for Mac Key Full Download [Latest] pptx
CH 12 FASHION DESIGN AND MERCHANDIZING.pptx
Gas Turbine simulation in thermoflow software PRO Overview.ppsx
induction and two in one event with party
Staffing Board - MICU1111111111111111111
Presentation - The First Christmas Story.pptx
WEDDING STYLING / INTERIOR DESIGN PORTFOLIO 2025 SK
Criminal record certificate: no registration - College graduation Certified b...
block chain and their importance in real life.pptx
Chapt_4[1].ppt very interseting and important

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

  • 1.
    IA SUMMIT 2016@stephenandersonStephenP. Anderson#IAS16tpresented byPlace in SpaceAKA “How to Create A Concept Model”
  • 3.
    “How do youcreate a concept model?”
  • 4.
    Write down thenumbers 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 exactlythree numbers which add up to 15.For example if I selected 9, 6, 2 and you selected 3, 8, 4 thenyou would win because 3 + 8 + 4 = 15.Let’s play a game…123456789
  • 5.
    Let’s play a(different) game…Consider a 3 x 3 magic square:The rows, columns, and diagonals all addup to 15, and moreover every way ofwriting 15 as the sum of three numbersfrom 1 to 9 is represented.When you choose a number, draw an Xover it; when I choose a number, circle it.4 9 23 5 78 1 6
  • 6.
    1234567894 9 235 78 1 6Why is Tic-tac-toe so much simpler?VS
  • 7.
    1234567894 9 235 78 1 6Tic tac toe is a model that more easily reveals patternsVS
  • 8.
    Customer JourneysBusiness ModelCanvas Gantt charts Site MapsModels we use that reveal patterns:9 GridsCharts & Diagrams Data Visualizations Abstract PatternsModels, Templates & FrameworksX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line Graph
  • 9.
    Jesse James Garrett’sElementsof UXModels others create to reveal patterns:
  • 10.
    Models others createto reveal patterns:Stephen P. Anderson’sUX Hierarchy of NeedsMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | pSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that weproducts that function, tunderstandable and usabwe also need to build prodthat bring joy and excitepleasure and fun, and ybeauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSS
  • 11.
    Models others createto reveal patterns:Dan Roam explains health care in the US
  • 12.
    Models others createto reveal patterns:Making sense of espresso drinks!
  • 13.
    Models others createto reveal patterns:Chris Fahey, explaining whiskeys!
  • 14.
    Other “models” thateasily reveals patterns…
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
    External Visual Representations
are critical tools for making sense ofcomplex information.
  • 22.
  • 23.
    …create Persistent,Shareable Structures:•Arepersistent 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 EasilyInteract with Information:• Can be modified.• Can be rearranged (making it easier toexplore many options)• Can be “reformulated”EXTERNAL VISUAL REPRESENTATIONS…WHY?
  • 24.
  • 25.
    Abstract PatternsCharts &DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!
  • 26.
    Abstract PatternsCharts &DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!The Visual Models we’re handedaren’t always a good “fit”
  • 27.
    Abstract PatternsCharts &DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!The Visual Models we’re handedaren’t always a good “fit”Few people know exactly HOW to usevisuals to explore difficult subjects
  • 28.
  • 29.
    Abstract PatternsCharts &DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!
  • 30.
    Abstract PatternsCharts &DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!All of these models buildupon a common set ofunderlying visual elements.
  • 33.
    All of thesemodels buildupon a common set ofunderlying visual elements.
  • 34.
    Using visual propertiesand spatial arrangement,to make sense of complex ideas.In a moment…
  • 35.
  • 36.
    List some thingsyou’re working with that could benefit 
from a good visual model:
  • 37.
    The world ofWhiskeys,Bourbons,Rye, Cocktails,etc.List some things you’re working with that could benefit 
from a good visual model: Choosing whichboard games doI want to buy!The world ofartisan cheesesGah! I enjoy theMarvel movies. Howdo I make sense ofall the differentcomic book titlesand storylines!shopping for agood VPN servicehow public keyencryption worksa way to assessthe presidentialcandidatesmaking sense ofmedical billshow to preparethe perfect cupof coffee!comparing AndroidPhonesUX PrototypingtoolsunderstandingLegal Proceedings
  • 38.
    Using visual propertiesand spatial arrangement,to make sense of complex ideas.HOW?
  • 39.
    A visual modelwe’re all familiar with…
  • 43.
  • 44.
  • 48.
  • 49.
  • 57.
    TIME TIME TIMETIMEVALUEVALUEVALUE
  • 58.
    TIME TIME TIMETIMEVALUEVALUEVALUEOBJECTS
  • 59.
    TIME TIME TIMETIMEVALUEVALUEVALUEOBJECTS
  • 60.
  • 62.
    WHICH DATAWHERE?- 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 DATAWHERE?- 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 DATAWHERE?- 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 DATAWHERE?- 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 DATAWHERE?- 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 intoterritories.OBJECTS
  • 69.
    Things arranged intoterritories.OBJECTSSpatial Positioning: Spatial Properties:Visual Encodings
  • 70.
    Things arranged intoterritories.OBJECTSVisual EncodingsThings
  • 71.
    SHAPE COLOR: INTENSITYICONOGRAPHY PERSPECTIVECOLOR: HUE OPACITY OVERLAY OUTLINE OR SOLIDSPATIAL POSITION TEXTURE OVERLAP ASPECT RATIOFORM: SIZE/AREA ROTATION JOIN FORM: ENCLOSURELINE LENGTH LINE TREATMENTETC!IF OUTLINE,THICKNESS OF STROKEVisual Encodings
  • 75.
    Example Encoding OrderedUseful values Quantitative Ordinal Categorical Relationalposition, placement yes infinite Good Good Good Good1, 2, 3; A, B, C text labels optional(alphabeticalor numbered)infinite Good Good Good Goodlength yes many Good Goodsize, area yes many Good Goodangle yes medium/few Good Goodpattern density yes few Good Goodweight, boldness yes few Goodsaturation, brightness yes few Goodcolor no few (< 20) Goodshape, icon no medium Goodpattern texture no medium Goodenclosure, connection no infinite Good Goodline pattern no few Goodline endings no few Goodline weight yes few GoodProperties and Best Uses of Visual EncodingsNoah Iliinsky • ComplexDiagrams.com/properties • 2012-06Example Encoding Ordered Useful values Quantitative Ordinal Categorical Relationalposition, placement yes infinite Good Good Good Good1, 2, 3; A, B, C text labels optional(alphabeticalor numbered)infinite Good Good Good Goodlength yes many Good Goodsize, area yes many Good Goodangle yes medium/few Good Goodpattern density yes few Good Goodweight, boldness yes few Goodsaturation, brightness yes few Goodcolor no few (< 20) Goodshape, icon no medium Goodpattern texture no medium Goodenclosure, connection no infinite Good Goodline pattern no few Goodline endings no few GoodProperties and Best Uses of Visual Encodings⋆RepresentingCategoriesRepresentingPrecise QuantitativePerceptionRepresentingGeneral QuantitativePerceptionShowingSequenceForm: Orientation! ! !Form: Line Length!Form: Line Width! ! limitedForm: Size / Area! !Form: Enclosure!Form: Shape! limitedForm: Curvature!Form: Proximity!* !*Form: Added Marks! limitedPattern Density! limited ! limitedLine Pattern!Line Endings! !Color: Hue! !Color: Intensity(Saturation, Brightness, Opacity) ! !Spatial Position: 2-D Position! ! !Motionlimited !*Texture! limitedRotation! limited limitedPerspective! limitedIconography! !
  • 76.
    Encoding Ordered Usefulvalues Quantitative OrdinalProperties and Best Uses of Visual EncodingRepresentingCategoriesRepresentingPrecise QuantitativePerceptionRepresentingGeneral QuantitativePerceptionShowingSequence! ! !!! ! limited! !
  • 77.
    Encoding Ordered Usefulvalues Quantitative OrdinalProperties and Best Uses of Visual EncodingRepresentingCategoriesRepresentingPrecise QuantitativePerceptionRepresentingGeneral QuantitativePerceptionShowingSequence! ! !!! ! limited! !
  • 78.
    Encoding Ordered Usefulvalues Quantitative OrdinalProperties and Best Uses of Visual EncodingRepresentingCategoriesRepresentingPrecise QuantitativePerceptionRepresentingGeneral QuantitativePerceptionShowingSequence! ! !!! ! limited! !
  • 79.
    Things arranged intoterritories.OBJECTSVisual EncodingsThingsCATEGORYPRECISE QUANTITATIVE INFO.GENERAL QUALITATIVE INFOSEQUENCEVisual Encodings
  • 80.
    OBJECTSThings arranged intoterritories.Spatial Positioning: Spatial Properties:CATEGORYPRECISE QUANTITATIVE INFO.GENERAL QUALITATIVE INFOSEQUENCEVisual Encodings
  • 81.
    Abstract PatternsCharts &DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!
  • 82.
    Abstract PatternsCharts &DiagramsCustomer JourneysModels, Templates & FrameworksData VisualizationsBusiness Model Canvas Gantt charts Site MapsModels we use that reveal patterns:Models others create to reveal patterns:Jesse James Garrett’sElements of UXStephen P. Anderson’sUX Hierarchy of NeedsDan Roam explainingHealth Care9 GridsX Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line GraphMeaningfulPleasurableConvenientUsableReliableFunctional (Useful)Focused onExperiences(People, Activities, Context)Focused onTasks(Products, Features)© 2006 Stephen P. Anderson | poetpainter.comSUBJECTIVE / QUALITATIVEOBJECTIVE / QUANTIFIABLEHas personal significanceMemorable experience worth sharingSuper easy to use, works like I thinkCan be used without difficultyIs available and accurateWorks as programmedPrioritize Aesthetics (no, not Graphic Design)(visual, behaviors, sounds, psychology)Design for FLOW (boredom vs anxiety)Leverage Game Mechanics/Learning Theory(completeness)Have a PersonalityCreate conversational and context awareinteractions(“Adaptive Interfaces”; narrative IA structures)Elicit Desire(Limited availability, limited access, curious andseductive experiences)Simplify, organize, and clarifyDisplay information visuallyReduce features and complexityUse language for more naturalAdd features that support desiredine browsing)Have a believable storyCo-create value with customersConnect people in communityAre part of a bigger systemAppeal to emotional, spiritual, andCreate a tolerance for faults atAre tied to a person’s self-image,highly personalCreating Pleasurable Interfaces:Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006“It is not enough that we buildproducts that function, that areunderstandable and usable -we also need to build productsthat bring joy and excitement,pleasure and fun, and yes,beauty, to people’s lives.”THIS IS THE“CHASM”THAT IS REALLY, REALLYHARD FOR ORGANIZATIONS TO CROSSMaking sense ofespresso drinks!JUST SCREENS & PAPER?!
  • 84.
    Before the page,there was space itself.Perhaps the simplest way to use spaceto communicate is to arrange orrearrange things in it.”“%om “Visualizing Thought” Barbara Tversky
  • 85.
    “Close’’ family membersand friends sit nearer to oneanother than strangers.The flatware tray in a drawer of most kitchens allowsarranging the knives together in one pile and separatingthem from the pile of forks and the pile of spoons.Written text is spatially arranged to reflect the organizationof thought, spaces between words and sentences, largerspaces between paragraphs.[We put] the letters to be mailed by the door or the bills tobe 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 membersand friends sit nearer to oneanother than strangers.The flatware tray in a drawer of most kitchens allowsarranging the knives together in one pile and separatingthem from the pile of forks and the pile of spoons.Written text is spatially arranged to reflect the organizationof thought, spaces between words and sentences, largerspaces between paragraphs.[We put] the letters to be mailed by the door or the bills tobe paid on the top of the desk[We line] up the ingredients for a recipe in order of use%om “Visualizing Thought” Barbara TverskyLITERAL MODELS—VS—CONCEPTUAL MODELS(IT’S THE SAME VISUAL LANGUAGE)
  • 88.
    Things arranged intoterritories.OBJECTSSpatial Positioning:Things arranged
  • 90.
  • 94.
    2003 2004 200620052007 2008 2009 20102002 2011 20
  • 95.
  • 96.
  • 97.
    2003 2004 200620052007 2008 2009 20102002 2011 20
  • 98.
  • 102.
    Things arranged intoterritories.OBJECTSThings arrangedSpatial Positioning:ARRANGMENT
PROXIMITY
  • 103.
    Things arranged intoterritories.OBJECTSinto territories.Spatial Properties:SHAPEBOUNDARIESRELATIONSHIPSATTRIBUTE INTENSITY
  • 105.
  • 110.
  • 113.
  • 114.
  • 115.
  • 116.
    Things arranged intoterritories.OBJECTSinto territories.Spatial Properties:SHAPEBOUNDARIESRELATIONSHIPSATTRIBUTE INTENSITY
  • 117.
    Things arranged intoterritories.OBJECTSSpatial Positioning:ARRANGMENT
PROXIMITYSpatial Properties:SHAPEBOUNDARIESRELATIONSHIPSATTRIBUTE INTENSITY
  • 119.
    Useful as a‘deconstruction’ tool…
  • 135.
    Things arranged intoterritories.OBJECTSSpatial Positioning:ARRANGMENT
PROXIMITYSpatial Properties:SHAPEBOUNDARIESRELATIONSHIPSATTRIBUTE INTENSITY
  • 136.
    Things arranged intoterritories.OBJECTSSpatial Positioning:ARRANGMENT
PROXIMITYSpatial Properties:SHAPEBOUNDARIESRELATIONSHIPSATTRIBUTE INTENSITYCATEGORYPRECISE QUANTITATIVE INFO.GENERAL QUALITATIVE INFOSEQUENCEVisual Encodings
  • 137.
    Putting it alltogether…
  • 138.
    Identify “the thing(s)”1.Inspectthe propertiesof each thing2.Arrange the things(based on identified properties)3.Clarify the territories4.Keep (or remove) the things,as appropriate5.
  • 139.
    comparing AndroidPhonesSamsung GalaxyS6Samsung Galaxy S7Samsung Galaxy S6 EdgeSamsung Galaxy S7 EdgeSamsung Galaxy Note 5Google Nexus 6PSony Xperia Z5 CompactLG V10Alcatel OneTouch Idol 3 (5.5)Motorola Moto G Late 2015etc.Identify “the thing(s)”1.
  • 140.
    how to preparetheperfect cupof coffee!comparing AndroidPhonesSamsung Galaxy S6Samsung Galaxy S7Samsung Galaxy S6 EdgeSamsung Galaxy S7 EdgeSamsung Galaxy Note 5Google Nexus 6PSony Xperia Z5 CompactLG V10Alcatel OneTouch Idol 3 (5.5)Motorola Moto G Late 2015etc.beans:water ratiowater temperaturebrew timesugar?cream?- Chemex- Aeropress- French Press- Syphon- Hario V60- Moka pot- Percolatorbeansgrind sizebrew method / filterIdentify “the thing(s)”1.
  • 141.
  • 142.
  • 143.
    Identify “the thing(s)”1.play,fun, andgames,Kite-flyingSolitaireCrossword puzzlesRacingWrestlingAthleticsBoxingBilliardsFencingCheckersFootballChessContests, Sports ingeneralCounting-outrhymesHeads or tailsBettingRouletteLotteriesChildren’sinitiationsGames of illusionTagDisguisesMasksChildren“whirling”Horseback ridingSwingingWaltzingSkiingMountainclimbing Tightrope walkingTravelingcarnivalsTheater
  • 144.
  • 145.
    Chess2 playerscompetitivestrategicturn-basedplayed ona board,with piecesno chancenot simpleInspect the propertiesof each thing2.
  • 146.
    Kite-flyingSolitaireRacingWrestlingAthleticsBoxingBilliardsFencingFootballContests, Sports ingeneralCounting-outrhymesHeadsor tailsBettingRouletteLotteriesChildren’sinitiationsGames of illusionTagDisguisesMasksChildren“whirling”Horseback ridingSwingingWaltzingSkiingMountainclimbingTightrope walkingTravelingcarnivalsTheaterArrange the things(based on identified properties)3.CheckersChessCrossword puzzlesTumultAgitationImmoderateLaughterludusstructured activities withexplicit rules (games)paidiaunstructured and spontaneousactivities (playfulness)(not regulated)***
  • 147.
    Kite-flyingSolitaireRacingWrestlingAthleticsBoxingBilliardsFencingFootballContests, Sports ingeneralCounting-outrhymesHeadsor tailsBettingRouletteLotteriesChildren’sinitiationsGames of illusionTagDisguisesMasksChildren“whirling”Horseback ridingSwingingWaltzingSkiingMountainclimbingTightrope walkingTravelingcarnivalsTheaterChanceClarify the territories4.CheckersChessCrossword puzzlesTumultAgitationImmoderateLaughterMimicry VertigoCompetitionludusstructured activities withexplicit rules (games)paidiaunstructured and spontaneousactivities (playfulness)(not regulated)***
  • 149.
    AGON
CompetitionALEA
ChanceMIMESIS 
RoleplayILINX
VertigoPAIDIA
unstructured andspontaneousactivities (playfulness)LUDUS
structured activities withexplicit rules (games)
  • 150.
    Identify “the thing”1.Inspectthe propertiesof each thing2.Arrange the things(based on identified properties)3.Clarify the territories4.Keep (or remove) the things,as appropriate5.
  • 151.
    Things arranged intoterritories.OBJECTSSpatial Positioning:ARRANGMENT
PROXIMITYSpatial Properties:SHAPEBOUNDARIESRELATIONSHIPSATTRIBUTE INTENSITYCATEGORYPRECISE QUANTITATIVE INFO.GENERAL QUALITATIVE INFOSEQUENCEVisual Encodings
  • 152.
    poetpainter.com/tilesExample EncodingOrdered Usefulvalues Quantitative Ordinal Categorical Relationalposition, placement yesinfinite Good Good Good Good1, 2, 3; A, B, C text labelsoptional(alphabeticalor numbered)infinite Good Good Good Goodlengthyesmany Good Goodsize, areayesmany Good Goodangleyesmedium/few Good Goodpattern density yesfew Good Goodweight, boldness yesfewGoodsaturation, brightness yesfewGoodcolornofew (< 20)Goodshape, iconnomediumGoodpattern texture nomediumGoodenclosure, connection noinfiniteGood Goodline patternnofewGoodline endingsnofewGoodline weightyesfewGoodProperties and Best Uses of Visual EncodingsNoah Iliinsky • ComplexDiagrams.com/properties • 2012-06Example EncodingOrdered Useful values Quantitative Ordinal Categorical Relationalposition, placement yesinfinite Good Good Good Good1, 2, 3; A, B, C text labelsoptional(alphabeticalor numbered)infinite Good Good Good Goodlengthyesmany Good Goodsize, areayesmany Good Goodangleyesmedium/few Good Goodpattern density yesfew Good Goodweight, boldness yesfewGoodsaturation, brightness yesfewGoodcolornofew (< 20)Goodshape, iconnomediumGoodpattern texture nomediumGoodenclosure, connection noinfiniteGood Goodline patternnofewGoodline endingsnofewGoodline weightyesfewGoodProperties and Best Uses of Visual EncodingsNoah Iliinsky • ComplexDiagrams.com/properties • 2012-06⋆1, 2, 3; A, B ,CRepresentingCategoriesRepresentingPrecise QuantitativePerceptionRepresentingGeneral QuantitativePerceptionShowingSequenceForm: Orientation! !!Form: Line Length!Form: Line Width!! limitedForm: Size / Area! !Form: Enclosure!Form: Shape! limitedForm: Curvature!Form: Proximity!*!*Form: Added Marks! limitedPattern Density! limited ! limitedLine Pattern!Line Endings!!Color: Hue!!Color: Intensity(Saturation, Brightness, Opacity)! !Spatial Position: 2-D Position! !!Motionlimited !*Texture! limitedRotation! limitedlimitedPerspective! limitedIconography!!Outline or SolidlimitedOverlaylimited !Overlap!limitedJoinlimited !Aspect RatiolimitedlimitedLabels! ! ! !Transformation!limited !Quantitylimited !
  • 153.
  • 154.
[8]ページ先頭
©2009-2025 Movatter.jp