Wrong confirmation ID

Email
Favorite
Favorited ×
Download
Embed
Private Content
Copy and paste this code into your blog or website Copy Customize… Close
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.

Tweet

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Designing for Visual Efficiency [Ignite Format]

by Ryan Coleman | Freelance Information Designer & Facilitator on Nov 25, 2009

3,351 views

My presentation deck from #igniteto on November 25, 2009.

My presentation deck from #igniteto on November 25, 2009.

Accessibility

View text version

Categories

Tags

design visual efficiency toronto igniteto visualization perception colin ware

Upload Details

Uploaded via SlideShare as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

File a copyright complaint

11 Embeds 591

http://www.viznetwork.com	225
http://vizthink.com	200
http://ryancoleman.ca	112
http://viznetwork.com	26
http://work.ryancoleman.ca	16
http://www.slideshare.net	4
http://www.vizworkshops.com	4
http://feeds.feedburner.com	1
http://www.google.at	1
http://www.hanrss.com	1
http://webcache.googleusercontent.com	1

Statistics

Favorites: 8
Downloads: 73
Comments: 0
Embed Views: 591
Views on SlideShare: 2,760
Total Views: 3,351

Instead, we see through a series of visual queries http://www.flickr.com/photos/victoriapeckham/
Detail of pinhead in the centre > Fuzzy blobs on the outside edges
Generalities >>> SpecificsPROBLEM SOLVING: Brain generates a series of steps to solve a visual problem (VISUAL QUERIES) and executes themEYE MOVEMENTS: Visual searching stage > Scanning the scene for candidates. When it finds something it passes it to the PATTERN TESTING LOOP which validates it.
EYE MOVEMENTS!
Patterns become objects as they’re needed.Visual Working Memory = ~3 objects at a time
(REMOVE ALL COLOUR BUT RED)Colour search is much more efficient the fewer colours there are….http://www.flickr.com/photos/wwworks/2473052504/
Gaetan Lee http://www.flickr.com/photos/gaetanlee/421366255/ (Flickr)Clip Works http://www.flickr.com/photos/14947022@N06/2531389299/Chidorian http://www.flickr.com/photos/chidorian/14752550/BaylorBear78 http://www.flickr.com/photos/baylorbear78/3424910337/
Visual Queries can be primed / tunedStay consistent. Use the same highlight techniques across charts/graphics. If people know what element they’re seeking then they can find it faster. Colour receptors (or other receptors) will adjust to be more sensitive to the item being soughtPatterns are learned over time(Letters > Words, Charts, Signs, Etc.)Over time, higher level patterns are combinedMuch faster to process (2/10ths of a second)HAVE to be learned though…Much faster to process (2/10ths of a second)HAVE to be learned though…Proxies- Some of these learned patterns can be used as “proxies”… basically shortcuts to a bigger conceptsThetruthabout http://www.flickr.com/photos/thetruthabout/2666835568/Wootang01 http://www.flickr.com/photos/mckln/2894346353/Dno1967 http://www.flickr.com/photos/dno1967/3244178416/Sylvar http://www.flickr.com/photos/sylvar/3360734315/
Our eyes process colour from three perspectives > Red<>Green | Blue <> Yellow | Black <> WhiteThe extremes of each of these contrasts are the most unique/effectivecolours
Avoid visual conjunctionsOur low-level search can only be tuned for one element at a time. Not Both (Pg. 30 in Ware)Find Value a) then find b) among the a candidatesAt the lowest level we can search for only one criteria. We can search for the colour blue OR a square shape.
Channels can be layeredStill Takes additional cycles to process… but more efficient than multiple charts etc
Be aware of visual interferenceVisual Interference…. (like interferes w/like) http://www.flickr.com/photos/pinksherbet/

8 Favorites

Jeff Belden MD , Family Physician, healthcare informaticist at University of Missouri Health Care Tags colin ware visualization perception 4 months ago
dmireault 2 years ago
ariamax 2 years ago
xiaoxiao sun , PowerPoint Design Trainer at My own sweet home 2 years ago
rquit 2 years ago
Benjamin Wiederkehr , User Experience Design at Interactive Things 2 years ago
InsightNG Solutions Limited at InsightNG Solutions Limited Tags visual efficiency 2 years ago
pkbalyan 2 years ago

Designing for Visual Efficiency [Ignite Format] — Presentation Transcript

Why is Waldo
so !#@%!ng
hard to find?
At any one time,
most of the world is
FOCUS
out of
Photo: VictoriaPeckham (Flickr)
Represents Approx. 5% of our visual field…
… but uses HALF of our visual processing power.
Approximate size of what’s in focus at any given time.
Problem Solving
Eye Movements
Pattern Testing
Based on illustration by Colin Ware, Visual Thinking for Design
Visual Efficiency
=
Reducing
Visual Queries
Neurons are tuned for specific features
Features
Pattern Processing
Objects
Photo: Woodlywonderworks (Flickr)
= “Face”
Photo: Gaetan Lee, Clip_Works, BaylorBear78, Chidorian, (Flickr)
Photo: thetruthabout, wootang01, dno1967, sylvar (Flickr)
Make it Pop!
Colour
Proximity
Shape
Motion
Ensure highest contrast goes to the emphasized elements.
Ensure highest contrast goes to the emphasized elements.
Word
Word
Word
Word
Word
Word
Word
Word
Word
Image: Pink Sherbet Photography (Flickr)
Appeal to low-level features.
Make it POP!
Use one channel at a time.
Stay Consistent, train your viewer.
Where’s Waldo Example
(Cognitively Difficult)
THANKS!
I’ll post the deck at:
http://ryancoleman.ca/ignite