Design Better Data Tables

Matthew Ström
Aug 3, 2016 · 7 min read
What is a carcoat, anyway?

Know your numerals

Not all numbers were created equal. I’m not talking about π and ∞ (though I often do, at parties); I’m talking about numbers that are either tabular or oldstyle, either lining or proportional.

Oldstyle vs. lining figures
Proportional vs. tabular figures

A technical note on using tabular lining figures

When designing, you’ll need to do a bit of work to ensure the numerals you’re using are the correct ones (tabular lining figures aren’t typically the default). Adobe Products have an “opentype” panel that can be used to set the figures properly, and CSS provides a slightly-cryptic syntax for enabling this feature. Beyond that, some basic googling should lead you down the right path.

Alignment Matters

3½ simple rules to follow:

List of U.S. states by historical population — Wikipedia

Consistent Significant Figures = Better alignment

One easy way to keep your tables properly aligned is to keep the same number of significant figures — usually the number of digits after the decimal — consistent within each column. Significant figures is a whole rabbit hole of a topic, so I’ll keep my advice here brief: the fewer sig figs you can get by with, the better.

Fewer, Clearer Labels

Providing labels to accompany your data is crucial. These pieces of accompanying context allow a data table to be read by a wider audience, in a broader set of circumstances.

Mississippi River Flood Stage Forecast — NOAA

Title

It might sound like conventional wisdom, but giving your data table a clear and succinct title is as important as any other design decision you make. With a good title, tables are portable: they can be used in a number of different contexts, as well as cited from external sources.

Units

The most common label used in tables is the unit of measurement for the data; often, it’s repeated along with every single data point. Instead of repeating the label, only include it with the first data point in each column.

Headers

Keep headers as short as possible; the design of the data table should be focused around the data itself, and long header labels can occupy a lot of visual space.

As little ink as possible

When deciding how to style the graphic elements of a table, the goal should always be to reduce the table’s footprint without losing structural fidelity. One of the ways you can accomplish this is by using as little “ink” as possible — that is, whenever possible, choose not to style an element.

2016 National League Batting Statistics — BaseballReference

Rules

If you’ve properly aligned the data points in your table, rules become redundant. The primary benefit they provide is in allowing you to reduce the space between elements, while still being able to differentiate between elements. Even when used, rules should be extremely light to not interfere with quick scanning.

Backgrounds

Backgrounds are most useful when indicating differences in the domain of data: switching between single values and sums or averages, for example.
Highlighting values, providing additional context to data, or indicating changes in values from previous periods can be done without backgrounds, using graphical elements like ✻, † (one of my faves), or ▵.

In conclusion

Tables might be boring, but they are such a major element of any data-rich document that they’re worth every ounce of design thinking we can apply to them. By designing more efficient, clearer, and easier-to-use tables, you can vastly improve the often-painful experience of analyzing and understanding large sets of data.

Further Reading & Inspiration

FiveThirtyEight has always been a great source of inspiration— they set their numerical data in a typeface called Decima Mono, which is specifically designed to fit lots of data in a small space.



Mission Log

Explorations of product strategy, design, and development. Visit us at planetary.co!

Thanks to Azy Groth.

Matthew Ström

Written by

Design Lead at Bitly. https://matthewstrom.com

Mission Log

Explorations of product strategy, design, and development. Visit us at planetary.co!