Designing for Visual Efficiency (FITC09)

Ryan Coleman FITC Toronto April 27, 2009 Exciting Data: Designing for Visual Efficiency

INTRODUCTION

AGENDA WHAT’S YOUR STORY HOW WE SEE DESIGNING FOR VISUAL EFFICIENCY SUMMARY

Community Evangelist for VizThink

Freelance Facilitator

WHAT’S YOUR STORY?

- Nancy Duarte Slide:ology Data slides are not really about the data. They are about the meaning of the data.

What are you trying to say ?

What is your viewer looking for ?

Why are you saying it ?

What do you want them to do ?

Use Cases: Not just for Software ? ! What? Why? Do?

You don’t have to use the data just because it’s there *

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) % of Houses Owning 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 % of Houses Owning

% of U.S. Houses With Dogs — 2007

37% of American Homes have a Dog Photo: Digital_image_fan (Flickr)

You don’t have to use the data just because it’s there * * But you do have to be ethical.

99% of users reported no serious side effects Photo: Shoothead (Flickr)

% Experienced Serious Side Effects 1 Moderate Side Effects 90 Mild Side Effects 8 No Side Effects 1

Know your story before starting to design

How We See

Approximate size of what’s in focus at any given time. Let’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 everything Photo: VictoriaPeckham (Flickr)

Instead, we see through a series of visual queries

Attention Discovery 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)

- Features Discovery - Patterns - Objects

Neurons are tuned for specific features

We don’t focus on everything Photo: VictoriaPeckham (Flickr)

Photo: Woodlywonderworks (Flickr)

Photo: Bucklava (Flickr)

= “Face”

Scott McCloud Understanding Comics

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

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

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.

Other Learned Patterns

Complex patterns will vary based on the viewer’s experience

Over time, higher level patterns are combined

Proxies are created

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

Watch carefully…

What station was it?

What colour was the canopy?

What kind of trees?

We’re capable of rapidly accessing complex patterns…

… but to comprehend them we need to process them deeper.

Features Pattern Processing Objects

Photo: Bucklava (Flickr)

Visual Working Memory

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 Ware Visual Thinking for Design

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

Cognitive Effort vs. “ At-a-glance”

Where’s Waldo Example (Cognitively Difficult)

Make Your Graphics Pop

4 Pop-out Channels Colour Proximity Motion Shape

Colour HUE LIGHTNESS

Photo: Woodlywonderworks (Flickr)

Photo: Pink Sherbet Photography (Flickr)

Luminance Contrast ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ

Ensure highest contrast goes to the emphasized elements .

Use the strongest hues for the most frequently used elements

Image: Wikipedia Commons

Shape SIZE ORIENTATION DISTORTION

Proximity SPATIAL GROUPING

SPATIAL GROUPING Proximity

Motion

Subtlety is not effective.

Avoid visual conjunctions

That said… Channels can be layered

Be aware of visual interference

Word Word Word Word Word Word Word Word Word Image: Pink Sherbet Photography (Flickr)

Avoid Multi-Chunk Queries

Visual Search can be primed / tuned

Don’t trust YOUR eyes.

In Summary

Plan Your Narrative

Consider Your User’s Visual Queries

Design to satisfy those queries as efficiently as possible

Thanks! Web | http://ryancoleman.ca Email | [email_address] 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

http://ryancoleman.ca	290
http://www.rte.ca	149
http://tumblr.ryancoleman.ca	31
http://www.slideshare.net	13
http://work.ryancoleman.ca	12
http://www.visionjar.com	6
http://www.imagemgr.com	4
http://www.linkedin.com	2
http://imagemgr.com	1
http://translate.googleusercontent.com	1
http://webcache.googleusercontent.com	1

Designing for Visual Efficiency (FITC09)

by Ryan Coleman | Freelance Information Designer & Facilitator

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 510

Statistics

Designing for Visual Efficiency (FITC09) Presentation Transcript