Preattentive Attributes
Preattentive processing is the subconscious gathering of information from our environment. It is the first thing that viewers are likely to nitice about a visualization. There are a number of visual properties that are preattentively processed. They are grouped into four categories: color, form, movement, and spatial position.
Color
There are two preattentive attributes associated with color: hue and intensity.
As you can see in the above images, the center bar sticks out from the others because of the use of a preattentive attribute of hue (top) and intensity (bottom).
Form
The preattentive attributes of form are: orientation and collinearity, length, width, size, curvature, spatial grouping, added marks, shape, and numerosity.
Orientation and collinearity is shown above by having a line with a different orientation than the others.
Length is shown above by having one line shorter than the other lines.
Width is shown above by having one line with a larger width than the other lines.
Size is shown above by having one circle larger than the other circles.
Curvature is shown above by having one line straight among other curved lines.
Spatial grouping is shown above by having a grouping or cluster of objects.
Added marks is shown above by having one line with an added mark to highlight that object.
Shape is shown above by having a square in a group of circles.
Numerosity is shown above by having countability in groups of objects.
Movement
The preattentive attributes of movement are flicker and motion.
Spatial Position
The preattentive attributes of spatial position are as follows:
- 2D position refers to the placement of the image.
- Stereoscopic depth is the combination of images received by the left and right eyes.
- Concavity/convexity is created in data visualizations through the effect of shading.
Accessibility
Building your data visualizations with accessibility in mind enables you to reach the widest population possible with your data. Here are a few tips for improving accessibility of your data visualizations:
- Choose visualizations that best represent your data
- Always provide ALT text for your visualizations
- Be cognizant of your color contrast and color choices
- Ensure that dynamic visualizations can be used without a mouse
Resources on data visualization accessibility:
U.S. Web Design System Data Visualization General Guidance
Harvard University Digital Accessibility
Web Content Accessibility Guidelines (WCAG) 2
Dataviz Accessibility Resources
Chartability Workbook for Auditing Visualizations
A11Y Project WCAG Compliance Checklist
References
Mazza, R. (2009). Introduction to information visualization. Springer Science & Business Media.