Cleaner data visuals aren’t just more attractive. If done correctly, they are easier to read, as well, and help you to quash dreaded questions like, “Can you make this look better?” and “Can you make this more readable?” On our current project, my team is working to incorporate these straightforward steps to create visuals that are both appealing and help to embrace all our users’ needs.
1. 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 include 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 is using more than just red and green, there are multiple forms 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 some colleagues to tell you what they think the chart is communicating. Learn more about Double Encoding.
2. Remove Chart Junk and Increase White Space
Chart junk is any design element that doesn’t enhance the user’s ability to comprehend the presented information. 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 any area with nothing in it, also known as negative space. So, what’s the value in that? White space can help guide your user on what to look at, making chart’s easier to interpret. In the example below, 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.
3. Label Directly
Take another look at the chart above. See how the values have been added directly to the bar chart and the axis has been removed? Think about how it takes time to scan between charts and a legend, or how 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, a true win-win.
4. Alt Text
Sometimes charts can get complicated. 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.
5. 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. Instead, we were fighting off a migraine from such a visual assault. 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 a black font color. 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.