place in space (aka "how to design a concept model")

IA SUMMIT 2016

@stephenandersonStephen P. Anderson

#IAS16t

presented by

Place 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 exactly three numbers which add up to 15.

For example if I selected 9, 6, 2 and you selected 3, 8, 4 then you would win because 3 + 8 + 4 = 15.

Lets play a game1 2 3 4 5 6 7 8 9

Lets play a (different) gameConsider a 3 x 3 magic square:

The rows, columns, and diagonals all add up to 15, and moreover every way of writing 15 as the sum of three numbers from 1 to 9 is represented.

When you choose a number, draw an X over it; when I choose a number, circle it.

4 9 2

3 5 7

8 1 6

1 2 3 4 5 6 7 8 9

4 9 2

3 5 7

8 1 6

Why is Tic-tac-toe so much simpler?

VS

1 2 3 4 5 6 7 8 9

4 9 2

3 5 7

8 1 6

Tic tac toe is a model that more easily reveals patterns

VS

Customer JourneysBusiness Model Canvas Gantt charts Site Maps

Models we use that reveal patterns:

9 Grids

Charts & Diagrams Data Visualizations Abstract Patterns

Models, Templates & Frameworks

X Y Matrices Venn Diagrams Cycles ComparisonsBubble ClustersStacked Bar Graph Line Graph

Jesse James Garretts Elements of UX

Models others create to reveal patterns:


Stephen P. Andersons UX Hierarchy of Needs

Meaningful

Pleasurable

Convenient

Usable

Reliable

Functional (Useful)

Focused on

Experiences(People, Activities, Context)

Focused on

Tasks(Products, Features)

2006 Stephen P. Anderson | poetpainter.com

SUBJECTIVE / QUALITATIVE

OBJECTIVE / QUANTIFIABLE

Has personal significance

Memorable experience worth sharing

Super easy to use, works like I think

Can be used without difficulty

Is available and accurate

Works as programmed

Prioritize Aesthetics (no, not Graphic Design) (visual, behaviors, sounds, psychology)

Design for FLOW (boredom vs anxiety)

Leverage Game Mechanics/Learning Theory (completeness)

Have a Personality

Create conversational and context aware interactions (Adaptive Interfaces; narrative IA structures)

Elicit Desire (Limited availability, limited access, curious and seductive experiences)Simplify, organize, and clarify

Display information visually

Reduce features and complexity

Use language for more natural

Add features that support desired ine browsing)

Have a believable story

Co-create value with customers

Connect people in community

Are part of a bigger system

Appeal to emotional, spiritual, and

Create a tolerance for faults at

Are tied to a persons self-image, highly personal

Creating Pleasurable Interfaces: Getting fom Tasks to Experiencespresented by Stephen P. Anderson | Nov 8, 2006

It is not enough that we build products that function, that are understandable and usable -we also need to build products that bring joy and excitement, pleasure and fun, and yes, beauty, to peoples lives.

THIS IS THE CHASM THAT IS REALLY, REALLY HARD FOR ORGANIZATIONS TO CROSS


Dan Roam explains health care in the US


Making sense of espresso drinks!


Chris Fahey, explaining whiskeys!

Other models that easily reveals patterns

Medical Chart

INFORMATION

INFORMATION UNDERSTANDING

External Visual Representations are critical tools for making sense of complex 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 Easily Interact with Information:

Can be modified.

Can be rearranged (making it easier to explore many options)

Can be reformulated

EXTERNAL VISUAL REPRESENTATIONS

WHY?

But, theres a problem:

Abstract PatternsCharts & Diagrams

Customer Journeys


Data Visualizations

Business Model Canvas Gantt charts Site Maps





Dan Roam explaining Health Care

9 Grids


Meaningful

Pleasurable

Convenient

Usable

Reliable

Functional (Useful)

Focused on


Focused on










Works as programmed




Have a Personality



















Customer Journeys


Data Visualizations







9 Grids


Meaningful

Pleasurable

Convenient

Usable

Reliable

Functional (Useful)

Focused on


Focused on










Works as programmed




Have a Personality


















TheVisualModelswere handedarent always a good fit


Customer Journeys


Data Visualizations







9 Grids


Meaningful

Pleasurable

Convenient

Usable

Reliable

Functional (Useful)

Focused on


Focused on










Works as programmed




Have a Personality


















TheVisualModelswere handedarent always a good fit

Few people know exactlyHOW to usevisuals to explore difficult subjects

The good news:


Customer Journeys


Data Visualizations







9 Grids


Meaningful

Pleasurable

Convenient

Usable

Reliable

Functional (Useful)

Focused on


Focused on










Works as programmed




Have a Personality



















Customer Journeys


Data Visualizations







9 Grids


Meaningful

Pleasurable

Convenient

Usable

Reliable

Functional (Useful)

Focused on


Focused on










Works as programmed




Have a Personality


















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

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

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

In a moment

But first

List some things youre working with that could benefit from a good visual model:

The world of Whiskeys, Bourbons,

Rye, Cocktails, etc.

List some things youre working with that could benefit from a good visual model: Choosing which

board games do I want to buy!

The world of artisan cheeses

Gah! I enjoy the Marvel movies. How do I make sense of all the different comic book titles and storylines!

shopping for a

good VPN service

how public key encryption works

a way to assess the presidential

candidates

making sense of medical bills

how to prepare the perfect cup

of coffee!

comparing Android Phones

UX Prototyping tools

understanding Legal Proceedings

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

HOW?

A visual model were all familiar with

!!

!

OBJECTS

!!

!

SUBSTRATE

OBJECTS

OBJECTS

SUBSTRATE

OBJECTS

TIME TIME TIME TIME

VALUE

VALUE

VALUE

TIME TIME TIME TIME

VALUE

VALUE

VALUE

OBJECTS

TIME TIME TIME TIME

VALUE

VALUE

VALUE

SUBSTRATE

OBJECTS

!!

!

SUBSTRATE

OBJECTS

!!

!

WHICH DATA WHERE?

- Geolocation- Places Ive 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.

SUBSTRATE

OBJECTS!

!


SUBSTRATE

OBJECTS

Spatial Positioning: Spatial Properties:

Visual Encodings

!!


SUBSTRATE

OBJECTSVisual Encodings

!!

Things

SHAPE COLOR: INTENSITY ICONOGRAPHY PERSPECTIVE

COLOR: HUE OPACITY OVERLAY OUTLINE OR SOLID

SPATIAL POSITION TEXTURE OVERLAP ASPECT RATIO

FORM: SIZE/AREA ROTATION JOIN FORM: ENCLOSURE

LINE LENGTH LINE TREATMENT

ETC!IF OUTLINE,

THICKNESS OF STROKE

Visual Encodings

Example Encoding Ordered Useful values Quantitative Ordinal Categorical Relationalposition, placement yes infinite Good Good Good Good

1, 2, 3; A, B, C text labels optional (alphabeticalor numbered)

infinite Good Good Good Good

length yes many Good Good

size, area yes many Good Good

angle yes medium/few Good Good

pattern density yes few Good Good

weight, boldness yes few Good

saturation, brightness yes few Good

color no few (< 20) Good

shape, icon no medium Good

pattern texture no medium Good

enclosure, connection no infinite Good Good

line pattern no few Good

line endings no few Good

line weight yes few Good

Properties and Best Uses of Visual Encodings

Noah Iliinsky ComplexDiagrams.com/properties 2012-06

Example Encoding Ordered Useful values Quantitative Ordinal Categorical Relationalposition, placement yes infinite Good Good Good Good

1, 2, 3; A, B, C text labels optional (alphabeticalor numbered)

infinite Good Good Good Good

length yes many Good Good

size, area yes many Good Good

angle yes medium/few Good Good

pattern density yes few Good Good

weight, boldness yes few Good

saturation, brightness yes few Good

color no few (< 20) Good

shape, icon no medium Good

pattern texture no medium Good

enclosure, connection no infinite Good Good

line pattern no few Good

line endings no few Good

line weight yes few Good


Noah Iliinsky ComplexDiagrams.com/properties 2012-06

! #

1, 2, 3; A, B ,C

Representing Categories

RepresentingPrecise Quantitative

Perception

RepresentingGeneral Quantitative

Perception

ShowingSequence

Form: 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 ! ! !Motion

limited !*Texture ! limitedRotation ! limited limitedPerspective ! limitedIconography ! !Outline or Solid

limited

Overlaylimited !

Overlap ! limitedJoin

limited !Aspect Ratio

limited limited

Labels ! ! ! !Transformation ! limited !Quantity

limited !


SUBSTRATE

OBJECTSVisual Encodings

!!

Things

CATEGORY PRECISE QUANTITATIVE INFO. GENERAL QUALITATIVE INFO SEQUENCE Visual Encodings

SUBSTRATE

OBJECTS!

!Things arranged into territories.

Spatial Positioning: Spatial Properties:



Customer Journeys


Data Visualizations







9 Grids


Meaningful

Pleasurable

Convenient

Usable

Reliable

Functional (Useful)

Focused on


Focused on










Works as programmed




Have a Personality



















Customer Journeys


Data Visualizations







9 Grids


Meaningful

Pleasurable

Convenient

Usable

Reliable

Functional (Useful)

Focused on


Focused on










Works as programmed




Have a Personality


















JUST SCREENS & PAPER?!

Before the page, there was space itself. Perhaps the simplest way to use space to communicate is to arrange or rearrange things in it.

%om Visualizing Thought Barbara Tversky

Close family members and friends sit nearer to one another than strangers.

The flatware tray in a drawer of most kitchens allows arranging the knives together in one pile and separating

them from the pile of forks and the pile of spoons.

Written text is spatially arranged to reflect the organization of thought, spaces between words and sentences, larger

spaces between paragraphs.

[We put] the letters to be mailed by the door or the bills to be paid on the top of the desk

[We line] up the ingredients for a recipe in order of use


Close family members and friends sit nearer to one another than strangers.

The flatware tray in a drawer of most kitchens allows arranging the knives together in one pile and separating

them from the pile of forks and the pile of spoons.

Written text is spatially arranged to reflect the organization of thought, spaces between words and sentences, larger

spaces between paragraphs.

[We put] the letters to be mailed by the door or the bills to be paid on the top of the desk

[We line] up the ingredients for a recipe in order of use


LITERAL MODELS VS

CONCEPTUAL MODELS (ITS THE SAME VISUAL LANGUAGE)


SUBSTRATE

OBJECTS

Spatial Positioning:

!!

Things arranged

ARRANGEMENT (PROXIMITY)

2003 2004 20062005 2007 2008 2009 20102002 2011 2012

ARRANGEMENT (PROXIMITY)

SEQUENCE

2003 2004 20062005 2007 2008 2009 20102002 2011 2012

2003

2004

2006

2005

2007

2008

2009


SUBSTRATE

OBJECTS!

!Things arranged

Spatial Positioning: ARRANGMENT PROXIMITY


SUBSTRATE

OBJECTS!

!into territories.

Spatial Properties: SHAPE BOUNDARIES RELATIONSHIPS ATTRIBUTE INTENSITY

BOUNDARIES

Roger Caillois

RELATIONSHIPS

ATTRIBUTE INTENSITY


SUBSTRATE

OBJECTS!

!into territories.



SUBSTRATE

OBJECTS!

!



Useful as a deconstruction tool


SUBSTRATE

OBJECTS!

!



Putting it all together

Identify the thing(s)1.

Inspect the properties of each thing

2.

Arrange the things (based on identified properties)

3.

Clarify the territories4.

Keep (or remove) the things, as appropriate

5.


Samsung Galaxy S6

Samsung Galaxy S7

Samsung Galaxy S6 Edge


Samsung Galaxy Note 5

Google Nexus 6P

Sony Xperia Z5 Compact

LG V10

Alcatel OneTouch Idol 3 (5.5)

Motorola Moto G Late 2015

etc.


how to prepare the perfect cup

of coffee!


Samsung Galaxy S6

Samsung Galaxy S7



Samsung Galaxy Note 5

Google Nexus 6P

Sony Xperia Z5 Compact

LG V10

Alcatel OneTouch Idol 3 (5.5)

Motorola Moto G Late 2015

etc.

beans:water ratiowater temperaturebrew timesugar?cream?

- Chemex - Aeropress - French Press - Syphon - Hario V60 - Moka pot - Percolator

beansgrind sizebrew method / filter



play, fun, and games,


play, fun, and games,

Kite-flying

Solitaire

Crossword puzzles

Racing

Wrestling

Athletics

Boxing

Billiards

Fencing

CheckersFootball

Chess

Contests, Sports in general

Counting-out rhymes

Heads or tails

Betting

Roulette

Lotteries

Childrens initiations

Games of illusion

Tag

Disguises

Masks

Children whirling

Horseback riding

Swinging

Waltzing

Skiing

Mountain climbing Tightrope walking

Traveling carnivals

Theater

Chess


2.

Chess

2 players

competitive

strategicturn-based

played on a board,with pieces

no chancenot simple


2.

Kite-flying

Solitaire

Racing

Wrestling

Athletics

Boxing

Billiards

Fencing

Football


Counting-out rhymes

Heads or tails

Betting

Roulette

Lotteries


Games of illusion

Tag

Disguises

Masks

Children whirling

Horseback riding

Swinging

Waltzing

Skiing

Mountain climbing

Tightrope walking

Traveling carnivalsTheater


3.

Checkers

ChessCrossword puzzles

Tumult

Agitation

Immoderate Laughter

ludus structured activities with explicit rules (games)

paidia unstructured and spontaneous activities (playfulness)

(not regulated)

***

Kite-flying

Solitaire

Racing

Wrestling

Athletics

Boxing

Billiards

Fencing

Football


Counting-out rhymes

Heads or tails

Betting

Roulette

Lotteries


Games of illusion

Tag

Disguises

Masks

Children whirling

Horseback riding

Swinging

Waltzing

Skiing

Mountain climbing

Tightrope walking

Traveling carnivalsTheater

Chance


Checkers

ChessCrossword puzzles

Tumult

Agitation

Immoderate Laughter

Mimicry VertigoCompetition

ludus structured activities with explicit rules (games)

paidia unstructured and spontaneous activities (playfulness)

(not regulated)

***

AGONCompetition

ALEAChance

MIMESIS Roleplay

ILINXVertigo

PAIDIAunstructured and spontaneous

activities (playfulness)

LUDUSstructured activities with

explicit rules (games)

Identify the thing1.


2.


3.


Keep (or remove) the things, as appropriate

5.


SUBSTRATE

OBJECTS!

!




poetpainter.com/tiles

Example Encoding

Ordered Useful values Quantitativ

e Ordinal Categorical Relational

position, placementyes infinite

Good GoodGood Good

1, 2, 3; A, B, C text labels option

al (alphabeticalor numbered)

infinite GoodGood Good

Good

lengthyes many

Good Good

size, areayes many

Good Good

angleyes medium

/few Good Good

pattern densityyes few

Good Good

weight, boldnessyes few

Good

saturation, brightnessyes few

Good

colorno few (<

20)Good

shape, iconno medium

Good

pattern textureno medium

Good

enclosure, connectionno infinite

Good Good

line patternno few

Good

line endingsno few

Good

line weightyes few

Good


Noah Iliinsky ComplexDiagrams.com/prope

rties 2012-06

Example Encoding

Ordered Useful values Quantitativ

e Ordinal Categorical Relational

position, placementyes infinite

Good GoodGood Good

1, 2, 3; A, B, C text labels option

al (alphabeticalor numbered)

infinite GoodGood Good

Good

lengthyes many

Good Good

size, areayes many

Good Good

angleyes medium

/few Good Good

pattern densityyes few

Good Good

weight, boldnessyes few

Good

saturation, brightnessyes few

Good

colorno few (<

20)Good

shape, iconno medium

Good

pattern textureno medium

Good

enclosure, connectionno infinite

Good Good

line patternno few

Good

line endingsno few

Good

line weightyes few

Good


Noah Iliinsky ComplexDiagrams.com/prope

rties 2012-06

! #

1, 2, 3; A, B ,C

Representing

Categories

Representing

Precise Quantitative

Perception

Representing

General Quantitative

Perception

Showing

Sequence

Form: Orientation! !

!

Form: Line Length

!

Form: Line Width!

! limited

Form: Size / Area

! !

Form: Enclosure!

Form: Shape! limited

Form: Curvature

!

Form: Proximity!*

!*

Form: Added Marks

! limited

Pattern Density! limited

! limited

Line Pattern!

Line Endings!

!

Color: Hue!

!

Color: Intensity

(Saturation, Brightness, Opacity)

! !

Spatial Position: 2-D Position

! !!

Motion

limited !*

Texture! limited

Rotation! limited

limited

Perspective

! limited

Iconography!

!

Outline or Solidlimited

Overlay

limited !

Overlap!

limited

Join

limited !

Aspect Ratiolimited

limited

Labels! !

! !

Transformation!

limited !

Quantity

limited !

DESIGN FOR UNDERSTANDING

Thank you!

getmentalnotes.com

Design for

Understanding

Stephen P. Anderson @stephenanderson www.poetpainter.com | www.slideshare.net/stephenpa