Stop Hearing “Can you make that look clearer?” 6 Tips for simplifying your data visualizations
Cleaner data visuals aren’t just more attractive but if done correctly are easier to read. Helping you to quash off both dreaded questions of “Can you make this look better?” and “Can you make this more readable?” At the NRC, we are working on incorporating these straightforward steps to create visuals that are both appealing and help to embrace all our users.
Double/Visual Encoding
Are you a double agent? When it comes to making charts more accessible and easier to understand, displaying the same piece of information in at least two ways is key. This can be showing the bar size in the chart and having the value label on top. This approach is particularly important when using color. If something is color coded, be sure that the user can determine the value without being able to tell the colors apart. Even if your chart isn’t only using red and green (red-green color blindness 4.25% of the population), there are multiple types of color blindness and visual impairment so it’s important to use double encoding for all color-related visuals. A way to experiment with this is to remove the colors and ask a couple colleagues to see if they can tell you what the chart should be telling them.
Learn more about Double Encoding: https://www.oreilly.com/library/view/designing-data-visualizations/9781449314774/ch04.html
Remove Chart Junk and Increase White Space
Removing chart junk and increasing white space can make a visual look brighter and more inviting. Even better, it can make it easier to read. White space is the area with nothing in it or negative space. So what’s the value in that? It can also help guide your user on what to look at and more easily interpret what is being said. See below for an example. By removing hard-to-read guidelines and directly labeling the bars, the chart takes up less space while making it easier to get to a more accurate value.
Learn more about White Space: https://www.interaction-design.org/literature/article/the-power-of-white-space
Label Directly
Take another look at the image above. Think about how it takes time to scan between charts and a legend and seeing the exact value on an axis can be challenging. Additionally, if a user is color blind or if your visual is printed to grayscale, determining which colored line corresponds to which value becomes difficult. With direct labeling you can clear up this potential readability issue. By labeling directly while you are cleaning up chart junk, your visual becomes easier and faster to read. Win-win. Some additional tips for your labeling is to clearly label viz components instead of using abbreviations or acronyms
Learn more about Direct Labeling: https://depictdatastudio.com/directly-labeling-line-graphs/
Alt Text
Sometimes charts can get complicated, and when this happens adding a clear description can help guide users on what they are looking for. This can help with those who may have difficulty reading the chart or provide some needed context. In any case, it’s considered best practice to utilize alternative text options as fully as possible to help all your users best use your visuals. Options for alternative text can be places in the captions section of a chart or can be added text on the dashboard to help clarify what the user is looking at. Remember these captions will help all your users, as some will not have the as much background in the subject area and these helpful hints will support their usage. Additionally, avoid tooltips on hover for essential information as these are not compliant. Instead, focus on providing summary level detail with well-labeled data points, and drilldown detail on subsequent views.
Learn more about Alt Text: https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81
Color Contrast
We all remember the early 2000’s websites with the purple background and yellow text that was supposed to be cool and catchy and instead we were fighting off a migraine. While most of us have learned a lot since then about basic contrasting and readability, here is an additional tip to help ease reading strain just a bit more for your viewer: Don’t use true black on a true white background. What? Yes, you heard me correctly, don’t use black font. Black on a computer screen is 100% of all the colors and white is 0% of the colors. It is an extremely high contrast which can still lead to eye strain. Instead try using very dark grey (#434343), which can still pop off the white background but without the ultra-high contrast. Additionally, it can seem cool to have darker backgrounds with light text but for accessibility it is generally recommend to stay with the traditional white background and dark grey text. reasoning being it is harder for those with dyslexia (5–7 % of the population) to read and can aggravate halos for those with glaucoma-related issues (reference).
Learn More about Color contrast: https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/
Filtering in Tableau
When possible use native Tableau filters either with action filters or as the only filters. Action filters are not as compatible with screen readers which native filters are. It is worth noting that many users are familiar with clicking actions on visuals so utilizing action filters is still ideal as to not confuse user but when possible add in redundant native filtering options.
References:
