Increase chart readability by reducing its cognitive load
Increase chart readability by reducing its cognitive load
1. Use a neutral shade like gray or beige from your corporate palette as the main color for the data in the visualization.
If multiple colors are required to represent multiple categories or series, avoid bright, vibrant colors.
2. Selectively use brighter colors from your corporate palette only to highlight key data points.
Highlight individual data points or bars if they are the key takeaway for the visualization. This will automatically guide people to focus on what is most important.
3. Remove any unnecessary lines on or around charts.
You can remove: The chart border. The border around the legend (if there is one). The y-axis line if the chart is a vertical column chart or a line chart. The x-axis line if the chart is a horizontal bar chart. Vertical and/or horizontal grid lines.
4. Make remaining grid lines that are not representing data a light gray.
After you’ve lightened the grid lines, lighten them a bit more. The brain will register very light gray lines, and they need to be registered as “reference only” rather than “data.”
5. Make the axis labels a lighter color like medium gray (or lighter), rather than black.
The labels on the axes are often necessary, but they are secondary to the data itself. The axis that is representing categories of data or time can have slightly darker/heavier text than the axis that is representing metric values. Achieve differentiation by making the lighter value lighter rather than making the heavier value darker.
6. Make all text horizontal, where possible, and avoid vertical or angled text.
People need to rotate non-horizontal text to interpret it, which slows down processing. If the text has to be vertical or slanted to fit the chart, consider another chart type. For example, if the text needs to be vertical on a vertical column chart, consider a horizontal bar chart instead. Using abbreviations for dates. For example, use “Feb” instead of “February”. Abbreviate only to the point of being clear what the text is representing.
7. Remove trailing zeroes in numeric axis labels to minimize the precision.
For example, use “0, 1, 2, 3” instead of “0.00, 1.00, 2.00, 3.00” and represent larger numbers as “thousands (000s)” or “millions” (referenced in the axis title) so that extra 0s can be removed in the axis labels themselves.
8. Remove unnecessary axis titles.
For example, if the axis labels are months, then Jan, Feb, Mar are clearly months, so the viewer doesn’t need an axis title of Month. If the chart title includes the metric being displayed, such as Revenue for [Year], then you don’t need to include the axis title for the metric.
9. Remove the legend, if possible, and directly label each data series instead.
When a legend is used, a person has to memorize the legend and then look at the data itself, which adds additional cognitive processing requirements. For line charts, add the data labels next to the last point on each line.