• 10 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 11/28/19

Decide on an approach to present information

There are many types of charts and graphs. Depending on your data set, and the type of information you want to display, some formats are better for certain uses than others. Throughout this chapter, we'll explore different types of graphs. We'll look at creating your own in the final chapter.

Different types of graphs and data visualizations.

Different types of graphs illustrated by Graphic Digital Agency for The Guardian

Line graphs

Months on the x access, and millions earned on the Y. There are three lines on the graph depicting growth over three different years.
Line graph depicting company growth over three years. Notice how each line is labeled on the right rather than using a legend or key to denote what each color represents. 

Line graphs are a valuable tool for showing continuous variables, such as change over time. They are a useful way to show company growth (or decline). Through peaks and low points, trends become more visible.  You can share multiple levels of information on one graph, but try to limit yourself to five lines per graph because otherwise it's hard for the viewer to know what's going on.

Viewers also need to know what each line represents. Are they different years? Different departments? Different countries? You'll always need to include a key or labels so that viewers know what they're looking at.

Bar graphs

Bar graphs (also known as column graphs) can have horizontal or vertical bars, and are good for examining comparisons across categories. The length of each bar represents the value of what is being plotted. Each bar graph should have a scale that starts at zero to ensure you are not manipulating the length of each line.

Simple bar graph. Hours are on the vertical axis, and month is on the x axis. The bars alternate color for variation, but it is not necessary.
This bar chart looks at the amount of time spent on a website month by month. Numbers were used to represent months in order to save space, but you could also write Jan, Feb, Mar, etc.

Bar graphs are the most common when graphing usability data. If you're tracking task completion rates, you could include the time required to complete a task on the Y-axis (vertical axis), and the task on the X-axis (horizontal axis). Labeling each specific task is more effective than naming them task 1, task 2, task 3. (We'll look this in action in the next chapter.)

Pie and donut charts

Pie and donut charts are good for representing parts of a whole, where the parts add up to 100%. In Google Analytics top referral sources (channels), new vs. returning users and gender demographics are three types of information that are presented as pie charts to give a quick visual breakdown of the information.

Pie chart with 4 sections, one is visibly larger than the others. The colors are clear.
Pie chart from Google Analytics. Consider if you think the segments would be more effective if the labels touched the color rather than using a key. 

A donut chart is a pie graph with its center cut out. In a donut chart, the lengths of the arches become more obvious, while in a pie chart, the proportion to the whole is more prominent.

Comparison of three pie charts for early, mid and late stage companies.

Donut charts show early, mid, and late stage companies in relation to product initiatives from the NEA Future of Design report (2017). Note that the typography was designed for full screen presentations, not to be embedded in blog posts. Consider these factors when designing and selecting type faces. Also consider how you may need to adapt labels for different contexts.

When using pie and donut charts, avoid having too many segments because it will be hard for the viewer to make sense of it. It's best to use a flat view. As soon as you make a pie graph 3D, it starts to distort the information.

3D pie chart with too many categories makes it impossible to get much valuable information from it.

This 3D pie chart from wtfviz.net is an example of what NOT to do. This collection of data visualizations makes no sense. There are so many small slivers of information that it's better to see if there is a way to group them in a different category title. The site can can be entertaining to look at, but is also a good reminder of what to avoid.

Stacked bar graph

A stacked bar graph is essentially a combination of bar graphs and pie charts. They're a way to show multiple pie charts in column form, which is helpful when you’re looking at a series of data sets. One way they could be used is to show task completion status for various tasks.

Stacked bar graph of expenses.

Expenses by month in a stacked bar graph by Smartsheet. (Note: there is not enough contrast between the green and blue colors for those with reduced vision.)

Charts and other graphs

This chapter covered the basics of graphs, but there are numerous other styles and variations that you may encounter or want to attempt yourself. The website datavizcatalogue.com is a helpful tool for examining different types of graphs. They also have a section that allows you to search by function, so depending on whether you're looking to show comparisons between values,  distribution that displays frequency, relationships between data, or some other aspect, they'll give you a good idea of which types of graph you will want to consider, as well as alternatives.

Often showing a chart or table can be just as effective as presenting a graph. Once again, make sure it's clear what you're showing on the graph. Using bold headings will make it easier for the viewer to interpret. Consider your word choice too, so there is less room for confusion.

Declutter and keep it simple

Cole Nussbaumer Knaflic shares tips for creating strong data visualizations in her book Storytelling with DataHer approach involves critical thinking about data (and the audience and context), as well as a simplification or decluttering of data visualizations. 

Declutter Your Data Visualizations [28:46 min]

The five steps to decluttering data visualizations are:

  1. Leverage how people see

  2. Employ visual order

  3. Create clear contrast

  4. Strip down and build up

  5. Don't over-complicate

Let's recap!

  • Select the type of graph you use based on the goals of your visual representation.

  • Simplicity is best when determining graph types (flat, not 3D!).

  • Consider your labels and placement in order to communicate the information to the viewer.

  • Bar graphs are the most common type of graph you'll use when charting usability test results. 

Example of certificate of achievement
Example of certificate of achievement