Do tooltips reduce the need for precision in graphs?

This blog entry was written by Nick Desbarats of Perceptual Edge.

Should you include grid lines in your graph? If so, how many? Is it O.K. to add another variable to your graph by encoding it using size (for example, by varying the size of points in a scatterplot) or color intensity (for example, by representing lower values as a lighter shade of blue and higher ones as darker)? How small can you make your graph before it becomes problematic from a perceptual perspective? These and many other important graph design decisions depend, in part, on the degree of precision that we think that our audience will require. In other words, they depend on how precisely we think that our audience will need to be able to “eyeball” (i.e., visually estimate) the numerical values of bars, lines, points, etc. in our graph. If we think that our audience will require no more than approximate precision for our graph to be useful to them, then we can probably safely do away with the gridlines and add that other variable as color intensity or size. If we have limited space in which to include our graph on a page or screen, we could safely make it quite small since we know that, in this particular case, the reduction in precision that occurs when reducing a graph’s size wouldn’t be a problem.

Small Graph

Our audience won’t be able to eyeball values all that precisely (what exactly are Gross Sales or Profit for the South region?), though such a design would provide enough precision for our audience to see that, for example, the West had the highest Gross Sales, and that it was about four times greater than the East, which had relatively low Profit, etc. Despite its lack of high precision, this graph contains many useful insights and may be sufficient for our audience’s needs.

If, on the other hand, we’ve spoken to members of our audience and have realized that they’ll need to visually estimate values in the graph much more precisely in order for the graph to be useful to them, then we’re going to have to make some design changes to increase the precision of this graph. We might need to add gridlines, break the quantitative scale into smaller intervals, find a more precise way to represent Profit (for example, by encoding it using the varying lengths of bars or the 2D positions of points), and perhaps make our graph larger on the screen or page.

Side-by-side graphs

As you probably noticed, adding gridlines, making the graph larger, and breaking the quantitative scale into smaller intervals all came at a cost. While these changes did increase the precision of our graph, they also made it busier and bigger. Being forced to make these types of design trade-offs is, of course, very common. In nearly every graph that we design, we must struggle to balance the goal of providing the required level of precision with other, competing goals such as producing a clean, compact, uncluttered, and quick-to-read design.

What if we know, however, that our graph will only ever be viewed in a software application that supports tooltips, i.e., that allows our audience to hover their mouse cursor or finger over any bar, line, point, etc. to see its exact textual value(s) in a small popup box?

Small graph with tooltip

In this case, perfect precision is always available if the audience ever needs to know the exact value of any bar, point, etc. via what researcher Ben Shneiderman termed a “details-on-demand” feature. In the 1990’s, Shneiderman noted that suppressing details from a visualization and showing specific details only when the user requests them enables the user to see a potentially large amount of information without being overwhelmed by an overly detailed display. A well-designed visualization enables users to see where interesting details may lie and the details-on-demand feature then enables them to see those details when they’re needed, but then quickly hide them again so that they can return to an uncluttered view and look for other potentially interesting details.

So, does the availability of details-on-demand tooltips mean that we can stop worrying about precision when making design decisions and optimize solely for other considerations such as cleanness? Can we set the “precision vs. other design considerations” trade-off aside in this case? I think that the answer to this question is a conditional “yes.” We can worry less about precision if we know all of the following:

  1. Our graph will only be viewed in a software application that supports tooltips (which most data visualization products now support and enable by default). If we think that there’s anything more than a small risk that our audience will, for example, share the graph with others by taking a screenshot of it or printing it (thereby disabling the tooltips), then precision must become one of our primary design considerations again.
  2. Our audience is aware of the tooltips feature.
  3. Our audience will only need to know precise values of the bars, points, lines, etc. in our graph occasionally. If we think that our audience will frequently need to know the precise values, giving them a lower-precision graph with tooltips will force them to hover over elements too often, which would obviously be far from ideal. In my experience, however, it’s rare that audiences really do need to know the precise values of elements in a graph very often—although they may claim that they do.

If we don’t know if all three of these conditions will be true for a given graph, we don’t necessarily have to ramp up its size, add gridlines, etc. in order to increase its precision, though. If we have a little more screen or page real estate with which to work, another solution is to show a clean, compact, lower-precision version of our graph, but then add the textual values just below or to the side of it. If the audience requires a precise value for a given bar, point, etc. in our graph, it’s available just below or beside the graph.

Small graph and table
Graph with columns of text

If we think that, for example, our audience is going to be embedding this graph into a PDF for a management meeting (thus disabling the tooltips) and that higher precision will be required by the meeting attendees, this would be a reasonable solution. For some graphs, however, the set of textual values may end up being bigger than a higher-precision of version of the graph, in which case the higher-precision graph may actually be more compact.

As with so many other data visualization design decisions, knowing how to balance precision versus other design considerations requires knowing your audience, what they’re going to be using your visualizations for, and—particularly in this case—what devices, applications or media they’ll be using to view the visualization.

Nick Desbarats

9 Comments on “Do tooltips reduce the need for precision in graphs?”

By Daryl Orts. April 19th, 2017 at 3:31 am

Nick – very good article and I agree with nearly all of it. I would, however, add a 4th condition: “Our audience will only need to know precise data values in our graph one at a time.”

For example, if I wanted to answer “Which region had the highest profit?” or “Did South or Central have higher sales?”, I would need to get the tool tip for multiple data values and remember them while I checked others. That’s a hindrance to data understanding.

By Jonathon Carrell. April 19th, 2017 at 4:55 am

Nice article Nick. I would add as a side bar to your main point that when combining color intensity with a bar chart we should also understand which metric is more important to the audience (in your example sales or profit). I say this because the bar chart is a stronger method of encoding quantitative values than color intensity. As such, if profit were more important to the audience than gross sales we should consider swapping the methods of displaying their values.

By Nick Desbarats. April 19th, 2017 at 5:58 am

Thanks, Jonathan. While I agree that one should try to encode the most important variable(s) in a graph as graphical objects that leverage the preattentive attributes of length (e.g., bars) or 2D position, I’m not sure that it’s necessary to mention that principle in the post since the thesis of the post doesn’t depend on knowing it, and I try to make blog posts as short as possible for quick consumption.

By Julien. April 19th, 2017 at 6:12 am

Tooltip could also be used to include additional information like responsible person or values converted to %. For instance, North has a Profit of nearly 30%, when West only has 17%. To me, this is more important for decision making than the absolute value.

By Nick Desbarats. April 19th, 2017 at 6:25 am

Thanks, Daryl. While I agree that the audience may need to keep several exact values in their working memory when viewing graphs where there are several values that are too close to each other to be compared visually, I think that this issue is probably rare in practice. Even among the example questions you that provided, one of the questions (“Did South or Central have higher sales?”) can be answered visually, i.e., without having to look at tooltips (the bars are slightly different lengths and the regions are sorted from highest to lowest sales). In order for this to be an issue, not only do there have to be multiple values that are quite close to one another, but it also has to be important for the audience to know if similar values are higher or lower than one another, and not just that they’re similar. While this combination of conditions will undoubtedly occur, my take is that it’s a rare enough corner case to omit it from the list.

By Nick Desbarats. April 19th, 2017 at 6:38 am

Thanks, Julien. Yes, additional information such as re-expressed values or values not shown in the graph can be useful to include in tooltips, although I don’t think that they’re more or less important or useful than the exact values of the graphical objects in the graph; that will depend on what questions the audience is trying to answer or what decisions they’re trying to make based on the graph. Ultimately, though, this post is about precision so I didn’t feel that it was necessary to discuss other uses of tooltips. Your comment and some others are suggesting to me, however, that I should write a post that discusses the various uses of tooltips. I’ve added the topic to my list of ideas for future posts.

By Jonathon Carrell. April 20th, 2017 at 4:36 am

@Nick Perhaps not to support your central theme and I agree that it’s important to be concise, but as the practice is featured repeatedly in the article I don’t think a sentence or two regarding the point would be out of place or unappreciated by readers that may be unfamiliar with the principle. It is certainly a side bar, but a valuable one for those newer be the field of data visualization.

By Christopher Utman. April 28th, 2017 at 1:51 pm

Nick-An excellent and useful article. One technical solution is offered in Tableau where you can right-click on a tab (visualization) and duplicate, say a bar chart, as a crosstab table. The user can then take a screenshot, turn into PDF, etc. and still have great precision. Another possibility is a choose-a-view option where you can, on the same tab, flip from bar chart to table (even heatmap so you keep color encoding for pattern spotting). Then, user can take screen shot, save as PDF. As always, the value of these technical fixes depends on whether they are appropriate for the users’ needs.

By Nick Desbarats. April 28th, 2017 at 4:14 pm

Thanks, Christopher. There are indeed several ways of enabling users to see exact values; perhaps I should have listed some of the others in the post. The guidelines that I proposed would apply when using those methods, as well.

Leave a Reply