designing for visual efficiency (fitc09)

Ryan ColemanFITC Toronto

April 27, 2009

Ryan ColemanFITC Toronto

April 27, 2009

Exciting Data:Exciting Data:Designing for Visual EfficiencyDesigning for Visual Efficiency

INTRODUCTIONINTRODUCTION

AGENDAAGENDA

WHAT’SYOUR

STORY

HOW WE SEE

DESIGNING FOR VISUAL EFFICIENCY

SUMMARY

Community Evangelist for

VizThink

Community Evangelist for

VizThink

Freelance FacilitatorFreelance Facilitator

WHAT’S YOUR STORY?

WHAT’S YOUR STORY?

- Nancy DuarteSlide:ology

- Nancy DuarteSlide:ology

Data slides are not really about the data.

They are about the meaning of the data.

What are you trying to say?What are you trying to say?

What is your viewer looking for?

What is your viewer looking for?

Why are you saying it?

Why are you saying it?

What do you want them to

do?

What do you want them to

do?

Use Cases:Not just for SoftwareUse Cases:Not just for Software

?!

What? Why? Do?

You don’t have to use the data just because

it’s there*


it’s there*

Dogs Cats Birds Horses

Percent of households owning 37.20% 32.40% 3.90% 1.80%

Number of households owning 43,021,000 37,460,000 4,453,000 2,087,000

Average number owned per household

1.7 2.2 2.5 3.5

Total number in United States 72,114,000 81,721,000 11,199,000 7,295,000

Veterinary visits per household per year (mean)

2.6 1.7 0.3 2.2

Veterinary expenditure per household per year (mean)

$356 $190 $25 $360

Veterinary expenditure per animal (mean)

$200 $81 $9 $92

U.S. Pet Ownership — 2007

Source: American Veterinary Medical Association

Dogs Cats Birds Horses

Percent of households owning 37.20% 32.40% 3.90% 1.80%

Number of households owning 43,021,000 37,460,000 4,453,000 2,087,000

Average number owned per household

1.7 2.2 2.5 3.5

Total number in United States 72,114,000 81,721,000 11,199,000 7,295,000

Veterinary visits per household per year (mean)

2.6 1.7 0.3 2.2

Veterinary expenditure per household per year (mean)

$356 $190 $25 $360

Veterinary expenditure per animal (mean)

$200 $81 $9 $92

U.S. Pet Ownership (2007)

% o

f H

ouse

s O

wni

ng

U.S. Pet Ownership — 2007%

of

Hou

ses

Ow

ning

% of U.S. Houses With Dogs — 2007

37%37%of American Homes have a Dog

Photo: Digital_image_fan (Flickr)


it’s there*


it’s there** But you do have to be ethical.* But you do have to be ethical.

99% 99% of users reported no

serious side effects

of users reported no

serious side effects

Photo: Shoothead (Flickr)

% ExperiencedSerious Side Effects 1Moderate Side Effects 90Mild Side Effects 8No Side Effects 1

Know your story before starting to

design

Know your story before starting to

design

How We SeeHow We See

Approximate size of what’s in focus at any given time.

Let’s Try SomethingLet’s Try

Something

Represents Approx. 5% of our visual field…

… but uses HALF of our

visual processing

power.

incurable_hippie (flickr)

We can’t see everythingWe can’t see everything

Photo: VictoriaPeckham (Flickr)

Instead, we see through a series of

visual queries

Instead, we see through a series of

visual queries

Atten

tion

Dis

cove

ry

WHAT

WHERE

Problem Solving

Eye Movements

Pattern Testing

Based on illustration by Colin Ware, Visual Thinking for Design

Answering the WHAT

(Understanding What We See)

Answering the WHAT

(Understanding What We See)

- Features- FeaturesDis

cove

ry

- Patterns- Patterns

- Objects- Objects

Neurons are tuned for specific featuresNeurons are tuned

for specific features

We don’t focus on everything

We don’t focus on everything

Photo: VictoriaPeckham (Flickr)

Photo: Woodlywonderworks (Flickr)

Photo: Bucklava (Flickr)

= “Face”

Scott McCloudUnderstanding Comics

Scott McCloudUnderstanding Comics

Photo: Gaetan Lee, Clip_Works, BaylorBear78, Chidorian, (Flickr)

Source: http://www.opticalillusion.net/

Patterns are learned over time

Patterns are learned over time

Aoccdrnig to rscheearch at Cmabrigde uinervtisy, it deosn't mttaer waht oredr the

ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteres are at the rghit pclae. The rset can be a tatol mses and you

can sitll raed it wouthit a porbelm. Tihs is bcuseae we do not raed ervey lteter by it slef

but the wrod as a wlohe.

Aoccdrnig to rscheearch at Cmabrigde uinervtisy, it deosn't mttaer waht oredr the

ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteres are at the rghit pclae. The rset can be a tatol mses and you

can sitll raed it wouthit a porbelm. Tihs is bcuseae we do not raed ervey lteter by it slef

but the wrod as a wlohe.

Other Learned Patterns

Other Learned Patterns

Complex patterns will vary based on

the viewer’s experience

Complex patterns will vary based on

the viewer’s experience

Over time, higher level patterns are

combined

Over time, higher level patterns are

combined

Proxiesare created

Proxiesare created

Photo: thetruthabout, wootang01, dno1967, sylvar (Flickr)

Watch carefully…Watch carefully…

What station was it?What station was it?

What colour was the canopy?

What colour was the canopy?

What kind of trees?

What kind of trees?

We’re capable of rapidly accessing

complex patterns…

We’re capable of rapidly accessing

complex patterns…

… but to comprehend them we need to

process them deeper.

… but to comprehend them we need to

process them deeper.

Features

Pattern Processing

Objects

Photo: Bucklava (Flickr)

Visual Working Memory

Designing for Visual Efficiency

Designing for Visual Efficiency

... the goal of information design must be to design displays so that visual queries are processed both rapidly and correctly for every important cognitive task the display is intended to support.

Colin WareVisual Thinking for Design

Colin WareVisual Thinking for Design

Answering the WHERE

(Understanding how we search visually)

Answering the WHERE

(Understanding how we search visually)

Based on illustration by Colin Ware, Visual Thinking for Design

Pattern Testing

Eye Movement

Move and Scan

Visual Efficiency =

Reducing Visual Searches

Visual Efficiency =

Reducing Visual Searches

Cognitive Effortvs.

“At-a-glance”

Cognitive Effortvs.

“At-a-glance”

Where’s Waldo Example(Cognitively Difficult)

Where’s Waldo Example(Cognitively Difficult)

Make Your Graphics Pop

Make Your Graphics Pop

ColourColour ProximityProximity

MotionMotionShapeShape

4 Pop-out Channels4 Pop-out Channels

ColourColour

HUE LIGHTNESS

Photo: Woodlywonderworks (Flickr)

Photo: Pink Sherbet Photography (Flickr)

Luminance Contrast

Luminance Contrast

ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ

Ensure highest contrast goes to the emphasized

elements.

Ensure highest contrast goes to the emphasized

elements.

Use the strongest hues for the most frequently used

elements

Use the strongest hues for the most frequently used

elements

ShapeShape SIZE

ORIENTATION DISTORTION

ProximityProximity

SPATIAL GROUPING

SPATIAL GROUPING

ProximityProximity

MotionMotion

Subtlety is not effective.

Subtlety is not effective.

Avoid visual conjunctionsAvoid visual conjunctions

That said…That said…Channels can be layeredChannels can be layered

Be aware of visual interference

Be aware of visual interference

Word Word Word

Word Word Word

Word Word WordImage: Pink Sherbet Photography (Flickr)

Avoid Multi-Chunk

Queries

Avoid Multi-Chunk

Queries

Visual Search can be primed / tunedVisual Search can be primed / tuned

Don’t trust YOUR eyes.Don’t trust YOUR eyes.

In SummaryIn Summary

Plan Your NarrativePlan Your Narrative

Consider Your User’s Visual

Queries

Consider Your User’s Visual

Queries

Design to satisfy those queries as

efficiently as possible

Design to satisfy those queries as

efficiently as possible

Thanks!Thanks!

Web | http://ryancoleman.ca

Email | [email protected]

VizThink | http://vizthink.com

I’ll make the deck, as well as links to suggested follow-up reading available at:

http://ryancoleman.ca/fitc09

Twitter | @ryancoleman

designing for visual efficiency (fitc09)

Lifestyle