Designing for Visual Efficiency [Ignite Format]
•Télécharger en tant que PPTX, PDF•
8 j'aime•1,520 vues
My presentation deck from #igniteto on November 25, 2009.
Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
Designing for Visual Efficiency [Ignite Format]
- 1. Why is Waldo so !#@%!ng hard to find?
- 2. At any one time, most of the world is FOCUS out of Photo: VictoriaPeckham (Flickr)
- 3. 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.
- 4. Problem Solving Eye Movements Pattern Testing Based on illustration by Colin Ware, Visual Thinking for Design
- 5. Visual Efficiency = Reducing Visual Queries
- 6. Neurons are tuned for specific features
- 7. Features Pattern Processing Objects
- 9. = “Face”
- 10. Photo: Gaetan Lee, Clip_Works, BaylorBear78, Chidorian, (Flickr)
- 11. Photo: thetruthabout, wootang01, dno1967, sylvar (Flickr)
- 12. Make it Pop! Colour Proximity Shape Motion
- 14. Ensure highest contrast goes to the emphasized elements. Ensure highest contrast goes to the emphasized elements.
- 17. Word Word Word Word Word Word Word Word Word Image: Pink Sherbet Photography (Flickr)
- 18. Appeal to low-level features. Make it POP! Use one channel at a time. Stay Consistent, train your viewer.
- 19. Where’s Waldo Example (Cognitively Difficult)
- 20. THANKS! I’ll post the deck at: http://ryancoleman.ca/ignite
Notes de l'éditeur
- 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/