“Good information design works like a tour guide that tells the user what matters most and where to go from here.”
Every design system is the result of competition between different constraints, and a good design solution balances these competing influences to support a specific user task. For a chart, the primary task is analytical: a user must be able to read and understand the data. For this reason, data visualization design prioritizes quantitative accuracy and emphasizes clarity and legibility over other considerations. Let’s start with a typical default chart, and see how information design principles can make it better.
1. Data is legible.
In order for a user to complete an analytical task, they must first be able to read and understand the data. This requires appropriate use of scales and labels, and a clean and simple presentation that does not distort the data or create undue emphasis.
Information is clearly identified
In order to understand a chart, a user must be able to tell where the information is coming from and what it means. Labels, legends and other indicators are critical to helping the user establish a sense of context for the information displayed.
- All chart scales and axes should be clearly labeled, so that the user knows what they represent. At a minimum, axes must display a title and identify max and min values.
- The user should be able to easily read (or estimate) the data values.
- The chart legend defines what colors mean and what data the chart represents.
- Ideally, labels should be shown as close to the individual data point as possible, to reduce the mental load caused by repeated lookup.
The presentation is as simple as possible, but not simpler.
Charts are information-dense displays that can be overwhelming for a user to process. A clear and uncluttered display helps to keep the user focused on the task at hand and allows the real information content (the data) to stand out. Be careful not to oversimplify, though, because that reduces the value of the chart.
- All chart elements should have a purpose: remove any information that does not actively support the user task.
- Default gridlines, background colors, tick labels and other “chart junk” should not be used, unless they serve an important purpose. This keeps the chart display clean and uncluttered and puts the focus on the data, where it belongs.
- Removing all but the max and min axis labels would make it a lot harder to guess whether the fourth bar is closer to 40 or 50 units tall. Intermediate labels help to divide an axis up into manageable chunks, but too many make the chart feel cluttered. There should be enough labels to support the user task, and no more.
- Removing the extra labels also creates space to use a larger type size, resulting in numbers you can actually see (see the visual hierarchy chart version below).
- Using numbers that are easy to divide (multiples of 0.1, 0.5, 2, 5, 10, or 100) can also make things easier: guessing the bar lengths in the chart above would be a lot harder if the max axis label was at 72.3.
Data is not distorted or hidden by its visual representation.
Not all visualizations are created equal. Each visualization is based on a set of encodings that represent information in a particular way. Information presented in a chart should mean something, and it should be as simple as possible to estimate the values that the chart represents.
- The visual form of the data should make it as easy to read as possible. 3D bars add no new information, and they make it harder to estimate the bar height using the chart axis. Removing this distortion makes the data easier to see.
- Each chart has different strengths and weaknesses. It is much easier to read the data values in the bar chart above than it would be in a series of pie charts, because length is a more accurate encoding than angle or area. A series of pie charts could make it easier to see the proportion between green and blue, especially if there are only two data points to display, but it would be a lot harder to read the values. A grouped bar (with green and blue bars side by side) would make it harder to see the ratio of blue to green, but easier to compare the second and fourth green bar in the chart. In short, the best chart depends on the kind of information you need, and what kind of legibility you want to prioritize.
- Hidden or overlapping data points should be kept to a minimum at all times. Keep labels out of the chart area as much as possible, and reduce the use of 3D and other effects that block the user from seeing a data point. In a scatterplot, there is always a chance that two (or more) points will overlap. Depending on the specific use case, using transparency, insets/magnifiers, or other techniques can help to make sure that the user can still see the information that’s there.
- Creative application of style elements helps to make a chart more interesting, but it should not interfere with the interpretation or legibility of the chart. Using gradients, textures, non-mathematical smoothing functions, and other aesthetically-pleasing style elements should be avoided, unless they serve a specific purpose in the chart (or unless the chart is intended as an illustration rather than a data display). Charts use visual elements to encode meaning; it’s important not to add more than is really there.
2. Charts emphasize the most important aspects of the data.
The interface should direct a user’s attention and help them focus on an individual chart or task. A thoughtful UI hierarchy can go a long way toward clarifying a chart display. Many people find charts and graphs to be complicated and overwhelming; good information design works like a tour guide that tells the user what matters most and where to go from here.
Create strong visual hierarchy.
Visual hierarchy uses our brain’s natural processing tendencies to guide a user’s attention through an information display. In the same way that a great piece of art directs your attention, a well-designed chart should help you see what’s important, and what relates to what.
- Visual and typographic hierarchy can be used to push back chart data and labels that are less critical to the user’s initial task of understanding the context for the chart. This lets the chart and axis titles stand out a bit more, and helps the user get oriented faster. More detailed, secondary tasks can usually rely on more conscious focus to look up what the user needs. Secondary information should still be clear and legible, but it doesn’t need to shout; when the user is ready to look for it, it will be there.
- Reducing the visual weight of supplementary information can help to keep it from taking too much attention from the rest of the chart. In this case, the dotted percentile lines still draw a lot of attention. Depending on how important the percentile information is, it could be helpful to use a thinner solid line, or more closely spaced dots to quiet down that part of the display.
- The strong, bright colors in the bars pull in a lot of attention here, and create a very strong mapping between the chart data and the legend. If there are lots of visual elements or you need to show multiple layers of data in the same chart, it can help to reduce the intensity of the colors for a more balanced view. In this chart, the data bars will always be most important. Sometimes that’s what you need, and sometimes it isn’t. Color can be a very powerful tool for adjusting priority in a data display.
Chart interactions highlight information and support common user tasks.
Sometimes, it can be useful to add interactions that allow the user to adjust the visual hierarchy depending on different needs. This is especially helpful when a user might need to perform several different tasks with the same chart, or when they might want to see the same data across many charts on a page. The most important part of designing these interactions is to make sure that the visual changes support a specific user task.
- Interactions can be very helpful, but the user shouldn’t have to rely on them any more than necessary. Ideally, it should be possible to read the chart without interacting at all. Tooltips and other interactions are a good way to simplify a chart’s appearance, but they’re also a good way to hide data by mistake. This is especially true if the interaction is hard to discover, or challenging to use.
- Whenever possible, there should be more than one mechanism to select a chart item. This supports different user preferences, and also ensures that the interaction system continues to function when the data elements are very small. It would be nice to be able to click on a bar in the chart to select it and see a value for the data point, but that doesn’t work if the bar is a few pixels tall. If clicking on the legend shows labels for all of the bars in a series, then the chart is still usable when the data values are small.
3. Charts work within the broader design system
This post focuses mostly on the design considerations that are most important for data visualizations, but it’s worth remembering that charts are always displayed in a particular context, and need to match both the style and the interaction expectations of the rest of the application. It’s important to make sure that the chart interactions, style choices, and visual displays match with the rest of the design system, so that the user has a consistent and intuitive experience. Inconsistencies, incongruities and surprises reduce both the quality of the user’s experience and their trust in the application, which can diminish their trust in the data as well. Consistent, thoughtful, and functional design systems are built with a user’s needs in mind, and result in products that they can trust.