Exploring Preattentive Attributes

When shown an image, there are some visual properties that we can detect effortlessly and almost instantaneously - they "pop out."

These are called preattentive attributes.

Knowing which attributes are preattentive can help in creating more effective visualizations.

Below are some interactive visualizations demonstrating some of these attributes - some "pop out" more than the others. They were all created with d3.js. These examples are primarily based on those in C.G. Healey's Perception in Visualization, C. Ware's book Visual Thinking: for Design, and S. Few's Tapping the Power of Visual Perception. Some of them are what seem to be preattentive, but this is my own subjective assessment - these have "subjective" in the subtitle.

In the examples below, links are provided to the source(s) that inspired or served as the source for the general design for the example. The routine to generate the star shapes with svg is from this blog post by Larry Spencer.

On larger screens, there is a navigation area on the right side of the screen to help move between the different examples.

Browser Note: It's been reported that there seem to be rendering/hanging issues with FireFox on Windows 8.1. Please let me know if you see oddities. It works fine for me on Chrome, Firefox, and Safari on a Mac, and on iPad and iPhone.

C. Ware, Visual Thinking: for Design	The features that pop out are hardwired in the brain, not learned. Colin Ware, in Visual Thinking: for Design (Kindle Location 750) Pop-out effects depend on the relationship of a visual search target to the other objects that surround it. If that target is distinct in some feature channel of the primary visual cortex we can program an eye movement so that it becomes the center of fixation. Colin Ware, in Visual Thinking: for Design (Kindle Location 682-684) What makes a feature distinct is that it differs from the surrounding feature in terms of the signal it provides to the low-level feature-processing mechanisms of the primary visual cortex. Colin Ware, in Visual Thinking: for Design (Kindle Location 712-714)
C.G. Healey, Perception in Visualization	Typically, tasks that can be performed on large multi-element displays in less than 200 to 250 milliseconds (msec) are considered preattentive. Eye movements take at least 200 msec to initiate, and random locations of the elements in the display ensure that attention cannot be prefocused on any particular location, yet viewers report that these tasks can be completed with very little effort. This suggests that certain information in the display is processed in parallel by the low-level visual system. C. Healey, in Perception in Visualization
A. Cairo, The Functional Art: An introduction to information graphics and visualization	If you know what tricks and shortcuts the brain uses to make sense of the information gathered from the senses, you can use that knowledge to your advantage. ...The ability to anticipate what the brain wants to do can greatly improve your information graphics and visualizations. Alberto Cairo, in The Functional Art: An introduction to information graphics and visualization (Voices That Matter) (Kindle Locations 1624-1626)
S. Few, Tapping the Power of Visual Perception	...if you want to visually encode information in a manner that can be perceived instantly and easily by your readers ... you should visually encode the data using preattentive attributes, and if you want some of the data to stand out from the rest, you should encode it using different preattentive attributes. S. Few
C. Nussbaumer, garage sale signs and data viz: the power of preattentive attributes	... if you use preattentive attributes well (especially color), your audience can't help but focus on the important part(s) of the message. By playing on their iconic memory, you're making it so they are seeing what you want them to see before they even know they are seeing it. Which is a crazy powerful thing. C. Nussbaumer
G. Odds, The science behind data visualisation	... to maximise the power and efficacy of a visualisation, we should seek to encode as much information as possible in the pre-attentive features perceived during bottom-up processing. G. Odds