Design Better Data Tables
medium.com/mission-log/design-better-data-tables-430a30a00d8c
3/8/2016
Know your numerals
Not all numbers were created equal. Im not talking about and (though I often do, at parties); Im talking about
numbers that are either tabular or oldstyle, either lining or proportional.
Heres a quick illustration of the difference between oldstyle and lining figures.
<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-
1.medium.com/max/1000/1*xWe8Z0-KdRwoncgUtIWG7g.png">
Oldstyle vs. lining figures
Oldstyle figures look nice in sentences, where they better match the size and spacing of lower-case letters; lining
figures are more uniform, and reinforce the grid-like structure of the table.
The difference between proportional and tabular figures is not quite so obvious:
<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-
1.medium.com/max/1000/1*Xj1N2kM1uKC58kRYGxehag.png">
Proportional vs. tabular figures
Proportional figures are designed to match the colorthat is, the general sizing and spacingof the typeface.
Tabular figures, on the other hand, are all identically-sized, so that columns of numbers line up properly. While the
1/4
difference may not seem great on the scale of one or two lines, using tabular figures makes scanning large tables
significantly easier and less error-prone.
Alignment Matters
3 simple rules to follow:
1. Numerical data is right-aligned
2. Textual data is left-aligned
3. Headers are aligned with their data
3. Dont use center alignment.
<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-
1.medium.com/max/1000/1*ReTh9L-cl-QStJVAUVqejA.png">
List of U.S. states by historical populationWikipedia
Numerical data is read right-to-left; that is, we compare numbers by first looking at their ones digit, then their tens,
then their hundreds, and so on. This is also how most people learn arithmeticstart on the right and move left,
carrying digits as you go[1]. Therefore, tables should keep numerical data right-aligned.
Textual data is read (in English) from left-to-right. Comparing textual elements is typically done by sorting into
alphabetical order: if two entries start with the same letter, the second letter is used, and so on. Trying to quickly
scan text can be infuriating if its not left-aligned.
Headers, generally, should carry whatever alignment their data has. This keeps the vertical lines of the table clean,
and provides consistency and context.
Center alignment causes the lines of the table to become ragged, which makes it much harder to scan entries,
often necessitating extra dividers and graphical elements.
Consistent Significant Figures = Better alignment
One easy way to keep your tables properly aligned is to keep the same number of significant figuresusually the
number of digits after the decimalconsistent within each column. Significant figures is a whole rabbit hole of a
topic, so Ill keep my advice here brief: the fewer sig figs you can get by with, the better.
2/4
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.
<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-
1.medium.com/max/800/1*na9P5f323Pi8sI-kpvLs9w.png">
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, its 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 tables footprint
without losing structural fidelity. One of the ways you can accomplish this is by using as little ink as possiblethat
is, whenever possible, choose not to style an element.
3/4
<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-
1.medium.com/max/1000/1*71B5i6rZMMsryN0pDwuXzw.png">
2016 National League Batting StatisticsBaseballReference
Rules
If youve 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.
Horizontal rules are the most useful, as they allow you to significantly reduce the vertical space occupied by long
tables, making faster work of comparing lots of values or seeing trends over time.
One unsubstantiated opinion I have about rules is that zebra striping is bad. Really, really bad. Take it or leave it.
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 .
Additionally, tables should be monochromatic. Using colors to provide organizational context or added meaning
increases the likelihood of misinterpretation or error, and causes usability problems for those with impaired vision.
4/4
