Content Connection and Chart Legitibility
Content connection
Giving meaning to dataviz and the numbers that comprise them requires a shift from facts to emotional connection. The key here is a sufficient use of contrast which can be used to make quick connections with our audiences. Where there is contrast present on a page, it is where our attention goes.
Contrast can be introduced in 4 primary ways: size, colour, shape, contrived contrast
Size contrast: It's having elements of two different size, and the difference is striking enough to attract our audience's attention.
Example:
David McCandless's work demonstrating the difference between the amount of time US adults spend watching television every year - 200 billion hours - to the amount of time required to create a wonderful resource like Wikipedia – 100 million hours.
Colour contrast: Color can be used very effectively to make elements of our chart pop. It can also be used if we're designing in a more muted color to send other elements to the background, so that our audience doesn't spend much time looking at them. We want to do that with distracting, or the unimportant content on our page.
Example:
Note: Colour blindness needs to be taken into account
Shape contrast: The best way to think of this is through iconography. When an icon takes on a shape to represent something that is different from another icon with another shape, audiences can clearly identify what the differences are there. Thus, we can use those effectively in our presentations.
Example:
Every icon has a different meaning and the image in its entirety is trying to represent some concept. Also, by changing the contrast of these icons, we can help reinforce the message to our audience.
Contrived contrast: Planned full application of contrast. This includes pre-attentive attributes like boxes, arrows, things that we design into our chart to draw attention to certain elements that we want our audience to see.
This is a famous data visualization called The Lumascape from Luma, an investment bank that works in the marketing technology space. They have categorized all the companies working in the space through their logo. They have also applied an excellent example of contrived contrast. They placed boxes around similar companies, or companies operating in the same space. Then they placed arrows around the infographic to show the flow of information, instead of a process.
In conclusion,
Notes:
Improving Chart Legibility
There are a few tests that we can apply to advance our data visualizations and help us make charts that are much better. They include things like direct labelling and annotations to make them much more effective.
The Spartan Test: Every single element of the chart is removed one by one and we check to see if the meaning of the chart changes. If it doesn’t, then the element did not have much impact on the meaning, and we can remove it permanently. This way, we ensure that we are including only those elements which are truly important and communicate some kind of meaning on the chart.
The Peek Test: Where is your eye drawn? When we open the chart for the first time, notice which part of the chart your eye is drawn to first. That is the most noticeable part of the chart and it is likely that the audience will notice that part first as well. Is this the part of the chart where you want them to look? If not, then alter the contrast or colour or shape in order to draw attention to the chart element you want to be noticed.
The Colleague Test: Think your visual is perfect? Have a colleague take a look. Give them minimal context and 10-15 seconds to process and ask what they would take away.
Giving meaning to dataviz and the numbers that comprise them requires a shift from facts to emotional connection. The key here is a sufficient use of contrast which can be used to make quick connections with our audiences. Where there is contrast present on a page, it is where our attention goes.
Contrast can be introduced in 4 primary ways: size, colour, shape, contrived contrast
Size contrast: It's having elements of two different size, and the difference is striking enough to attract our audience's attention.
Example:
David McCandless's work demonstrating the difference between the amount of time US adults spend watching television every year - 200 billion hours - to the amount of time required to create a wonderful resource like Wikipedia – 100 million hours.
Colour contrast: Color can be used very effectively to make elements of our chart pop. It can also be used if we're designing in a more muted color to send other elements to the background, so that our audience doesn't spend much time looking at them. We want to do that with distracting, or the unimportant content on our page.
Example:
Note: Colour blindness needs to be taken into account
Shape contrast: The best way to think of this is through iconography. When an icon takes on a shape to represent something that is different from another icon with another shape, audiences can clearly identify what the differences are there. Thus, we can use those effectively in our presentations.
Example:
Every icon has a different meaning and the image in its entirety is trying to represent some concept. Also, by changing the contrast of these icons, we can help reinforce the message to our audience.
Contrived contrast: Planned full application of contrast. This includes pre-attentive attributes like boxes, arrows, things that we design into our chart to draw attention to certain elements that we want our audience to see.
This is a famous data visualization called The Lumascape from Luma, an investment bank that works in the marketing technology space. They have categorized all the companies working in the space through their logo. They have also applied an excellent example of contrived contrast. They placed boxes around similar companies, or companies operating in the same space. Then they placed arrows around the infographic to show the flow of information, instead of a process.
In conclusion,
- Contrast separates the important data from the unimportant data through visual context.
- Visual contrast comes in four primary shapes and forms – size, colour, shape and contrived.
- Each technique is effective at drawing the audience’s attention to elements of our charts.
Notes:
- Careful attention to detail will ensure dataviz is effective and efficient in communicating insight
- “Work product” graphics do not need to feature refined execution
- Effort – and two or more application – transforms visual discovery output into presentation worthy graphics
- Removal of clutter from a chart is the most impactful way to improve readability
Improving Chart Legibility
There are a few tests that we can apply to advance our data visualizations and help us make charts that are much better. They include things like direct labelling and annotations to make them much more effective.
The Spartan Test: Every single element of the chart is removed one by one and we check to see if the meaning of the chart changes. If it doesn’t, then the element did not have much impact on the meaning, and we can remove it permanently. This way, we ensure that we are including only those elements which are truly important and communicate some kind of meaning on the chart.
The Peek Test: Where is your eye drawn? When we open the chart for the first time, notice which part of the chart your eye is drawn to first. That is the most noticeable part of the chart and it is likely that the audience will notice that part first as well. Is this the part of the chart where you want them to look? If not, then alter the contrast or colour or shape in order to draw attention to the chart element you want to be noticed.
The Colleague Test: Think your visual is perfect? Have a colleague take a look. Give them minimal context and 10-15 seconds to process and ask what they would take away.
