In business, there’s a common saying that data is king. Whether your target audience is business professionals or general consumers, at some point you’ll need to present a message that relies on figures to generate sales or increase market share.
How can you do this effectively? Sure, infographics are a tried and true method. But often, this medium misses the mark because of cluttered designs and irrelevant or unsupported data.
In this scenario, it’s best to stick to a cleanly designed chart. If you’re planning to not just display data on your website, but leverage it to make effective CTAs, you need to focus on maintaining UX principles for a consistent user experience throughout your website.
Less is More
By default, charts require readers to process data and draw conclusions. And to make it easier for your audience, you’ll need to effectively label your chart, data points, and axes.
But if your design team goes overboard, your message will literally get lost within the chart. Common examples of good data gone wrong include:
- Irrelevant illustrations littering the chart: 3D renderings, or background patterns and shading that make it harder to interpret data
- Choosing colors that are at odds with your data: For example, choosing a green color to label a negative data point will have the opposite effect because collectively we associate green with “good” and red with “bad”.
- Using quirky or confusing titles and labels that don’t clearly describe the data for your audience
Avoid Overusing Callouts
Just like your labels need to be clear, you should also avoid overusing additional text on specific data points within the chart. Unless there’s a real concern that a critical piece of data might be overlooked, it’s unnecessary to clutter your chart with excessive notes on every data point.
Keep Your Design and Layout Clean
While similar to the first point, this one goes further and actually addresses your overall design scheme. Common mistakes include:
- Using too many colors for data: Too much color can actually cause confusion and lead to your audience reaching different conclusions from what your data actually reveals. Instead, select a color and then create a palette by playing with that hue's saturation. Or, opt for one pop of color to highlight the most important data point.
- Failing to present data in an organized manner: Unless you’re creating a chart that depicts fluctuating activity (i.e. sales, enrollment, etc.) over a period of time, your data should be presented in an orderly list from greatest to least—or the reverse. Otherwise, key findings may go overlooked because they’re disorganized.
- Using too many design elements in one chart: Pick an easy to read font and stay consistent with it throughout the chart. Likewise, avoid using bold and italic styles within the same label.
- Relying on animations: It can be tempting to force your data to come alive with animation, but often you end up increasing site load times and encouraging page abandonment. If you opt to use animation, make sure that it actually enhances the quality of your chart and UX rather than serving as a distraction.
Don’t Distort Your Data
Skewing aspect ratios or shifting your baseline to support your data goals can help you create a story, but it can cheapen your brand and present an untrustworthy image. Instead, set your baseline at zero to present your data in full.
Likewise, ensure that your x and y-axes are proportional so that data points aren’t distorted. This makes it easier for your audience to read and understand your chart. If you think you need to “play” with your chart to prove your case, then it’s time to go back to the drawing board.
Say No to Pie Charts
Most of us remember pie charts from our school days, but they’re scientifically proven as the hardest charts to understand. This is because pie charts require size recognition and comparison, which can be difficult when this chart is used for multiple data points that are similar in size. The only way to effectively use a pie chart like this is to include accurate labels with a legend. But this creates a cluttered user experience.
Instead, bar graphs and line charts offer clear comparisons, especially when that data is displayed in an organized manner with clearly labeled axes.
Visual Clutter Distorts Your Message
You might think that your charts need grid lines, additional shading, watermarks, and other add ons, but they don’t. American statistician Edward Tufte calls these elements “chartjunk” and for good reason. Most of the time, these features don’t enhance information on the chart or make it easier to read. Instead, they serve as distractions and could lead to incorrect conclusions that you didn’t intend.
Citations Equal Credibility
If you’re posting charts on your website, users will assume that you’re aligning your brand as an authority or expert source in a particular topic. But if you really want to drive that point home, cite your sources. Charts that don’t explain where the data was sourced can lead to audiences understandably doubting their reliability.
Gather Feedback Before you Publish
Think of this as a focus group for your design. Sometimes when you’re the one working on a project, you’re too close to it and won’t be able to recognize flaws. A fresh pair of eyes can highlight areas that need improvement or places where you can remove design elements to improve the user experience. In other words, always get a second opinion before you publish new content.
So, now that you know what not to do when focusing on data visualization, what’s an example of good data design? We think that Brand Love Score’s Black Friday Brand Love chart is the perfect example of how to take complex data and craft a user-friendly chart. What do they do right?
- Clean color palette: Instead of picking a wide array of shades, Brand Love opts for a simple selection of red, hot pink and purple. They’re complimentary yet allow you to clearly understand the overall story this data shows.
- The data is organized: Brands listed at the top of the chart have the highest scores and are displayed in red, and as you scroll through to the bottom of the bell chart, the scores sequentially drop and the color transitions to hot pink and ultimately purple for the lowest scores.
- The animation is relevant: Because Brand Love is creating a graph with 50 data points, this animation makes sense and serves for functionality and interactivity. As you scroll through the bell chart, labels appear and identify each particular brand line. And if you click on a particular line, specific data about that brand appears.
- Easy navigation: Brand Love has incorporated two data sets on one page, but allows users to toggle between them for clarity. Likewise, users can switch between a graph and list view, depending on which is easier for them to review.
Designing a chart that compliments your website’s overall user experience isn’t necessarily a native skill that everyone has. If you have raw data that you need to turn into a functional chart, The Creative Momentum is here to bring your data to life.
