Charts, graphs, and other visuals are often necessary for bringing certain facts and statistics to life on a website. Different data representations can be extremely effective for getting your message across, often even more effective than words when done correctly. The brain processes visuals 60,000 times faster than text, according to a blog post from Hubspot, which means that you can gain leads more quickly through a visual representation of data than through a lengthy explanation.
However, if you don’t plan carefully, your visual data can easily take away from the effectiveness of your message. There’s a right and wrong way to represent your data, and you don’t want to fall victim to poorly constructed information. Here are the right and wrong ways to include some of the most common visualizations on your website.
1. Tables
The purpose of a table is to show us the numbers, and that’s basically it. But that doesn’t mean the numbers have to be the only element of the chart.
Bad: Many table creators believe that it’s okay to offer a simple black and white table with the bare minimum, like this chart from Heritage.org. However, that’s the quickest way to bore your readers. It’s also not very easy to read, and the conclusion isn’t clear.
Good: Provide some visual interest. When appropriate, include a faded graphic in the background to help represent the purpose of the table. Two different shades of a color within the boxes can also help to make it more visually appealing and distinguish between the different rows.
It’s also a great idea to provide some kind of benchmark to show the change in numbers. For example, if your table is depicting the increase of page views from month to month, include a column that shows the positive change in green and the negative in red, kind of like this chart from Chandoo.org.
2. Bar Graphs
Bar graphs aren’t nearly as common as they used to be, probably because they aren’t very visually stimulating. Still, they can be used to show changes across a large period of time.
Bad: Using graphics to represent the bars in a graph meant to represent sales, like in this graph from Eager Eyes, can be confusing. The graphics make it difficult to see exactly how much is being in made in sales, not to mention, the graphics are grossly out of proportion.
Good: Show comparisons on a smaller scale. Bar graphs are extremely simple, and they can’t depict a lot of the variables that come throughout the years. Try doing year on year comparisons, such a this graph from Qlik.
3. Charts
You have a lot of flexibility when creating charts for your website. You can choose from pie charts, motion charts, pivot charts, linear charts, and more. These charts are very popular, and can be very effective at showing data representation. However, they are often poorly used.
Bad: A chart should never confuse the viewer, like this chart from The Global Mail that’s used to depict gun control across America. The information is tiny and hard to read, and the color coding within the circular chart doesn’t make much sense either. This chart makes the viewer work a little too hard to decipher the information.
Good: Try separating the information from the chart, like in this linear chart from 42 Floors. It gives clear information within the chart, and then offers useful material to enhance the chart on the bottom. It’s easy to read and visually appealing, which are two elements that many charts have a difficult time marrying.
4. Graphic Representations
Infographics are a current trend in data representation. However, the line seems to be a little fuzzy for many companies on what makes a good infographic and what makes a bad one.
Bad: Some infographics try to stuff way too much information into a small space, using tiny fonts, lots of color, and very few words, like this infographic showed on KlientBoost. It’s very difficult to see the overall message due to the tiny information and colors.
Good: Check out this infographic from Creative Bloq. It uses just a few colors for contrast, and the information is presented in a simple, linear pattern that’s easy to follow. The graphic is filled with information, but it’s well spaced and follows a logical pattern, making it easy to read.
As you work to visually represent data on your website, keep these tips in mind. It’s easy to create a bad graphic, so it’s important to do your research and stick to what works in order to keep consumers engaged with your information.
