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

More Related Content

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

What's hot

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

Viewers also liked

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

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

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

More from Stephen Anderson

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

Recently uploaded

PPTX
CleanMyMac X v5.2.8 Crack for MacOS Full Version [Latest] pptx
PPTX
coverpage for acr on professional code of ethics.pptx
PDF
Morgenbooster_Drakonheart_Designing_for_creative_kids.pdf
PDF
Criminal record certificate: no registration - College graduation Certified b...
PPTX
WinRAR Crack 7.13 Final Mac Keygen 2026 Download [Latest] Software.pptx
PPTX
Driver Easy Pro Key 7.1.0.2641 Full Mac Crack Free Activated Download [2026]....
PDF
Creating Magical CSS-Only Image Tilt Effects No JavaScript Required.pdf
PPTX
SoundSource 6.0.0 Crack for MacOS Full Version Download
PDF
International Journal of Information Technology, Modeling and Computing (IJITMC)
PPTX
Become a Professional UI/UX Designer by Learning How to Create Beautiful, Use...
PPTX
Test Powerpoint with embedded video.pptx
PPSX
Gas Turbine simulation in thermoflow software PRO Overview.ppsx
PPTX
Moho Pro 14.4 Crack for MacOS Works Until 2050 [Latest] pptx
PPTX
block chain and their importance in real life.pptx
PDF
WEDDING STYLING / INTERIOR DESIGN PORTFOLIO 2025 SK
PPTX
Presentation - The First Christmas Story.pptx
PPTX
Construction area photographs site visit
PPTX
Chapter4_Initiation_of_Sediment_Motion_v2[1].pptx
PPTX
Artificial Intelligence basic notes for engineering.pptx
PDF
Casual Winter Collection 2024-25 Style Guid
 
CleanMyMac X v5.2.8 Crack for MacOS Full Version [Latest] pptx
coverpage for acr on professional code of ethics.pptx
Morgenbooster_Drakonheart_Designing_for_creative_kids.pdf
Criminal record certificate: no registration - College graduation Certified b...
WinRAR Crack 7.13 Final Mac Keygen 2026 Download [Latest] Software.pptx
Driver Easy Pro Key 7.1.0.2641 Full Mac Crack Free Activated Download [2026]....
Creating Magical CSS-Only Image Tilt Effects No JavaScript Required.pdf
SoundSource 6.0.0 Crack for MacOS Full Version Download
International Journal of Information Technology, Modeling and Computing (IJITMC)
Become a Professional UI/UX Designer by Learning How to Create Beautiful, Use...
Test Powerpoint with embedded video.pptx
Gas Turbine simulation in thermoflow software PRO Overview.ppsx
Moho Pro 14.4 Crack for MacOS Works Until 2050 [Latest] pptx
block chain and their importance in real life.pptx
WEDDING STYLING / INTERIOR DESIGN PORTFOLIO 2025 SK
Presentation - The First Christmas Story.pptx
Construction area photographs site visit
Chapter4_Initiation_of_Sediment_Motion_v2[1].pptx
Artificial Intelligence basic notes for engineering.pptx
Casual Winter Collection 2024-25 Style Guid
 

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