Common ailments of data table design include, but are not limited to:
- Overly thick lines—Reading numbers through a thick mesh is not easy.
- Overbearingly loud alternating fills, including header bars—At a glance, these look like stripes, which is distracting. Not at a glance, jumping from color to color can be visually exhausting.
- Ill-fitted cells—The data look hopelessly tiny in gigantic caves, or cramped in itty bitty pigeonholes, or the cells are sized inconsistently.
- Centered data—Sometimes this works, if the dataset is simple enough. But more often than not, in left-to-right reading languages, the data are more quickly navigable when left-aligned, or aligned on a comma or decimal point.
- Vertically positioned (like a crossword “down” column) or vertically rotated (like book spines) text—Unless we’re playing Scrabble or doing yoga, we neither want to assemble a word by individual letters, nor do we want to hold our heads at that angle. Exceptions exist, especially with languages that are traditionally vertically oriented.
The Creative Group’s 2018 Salary Guide offers a clean, modern table design. The header is separate from the following data, an uncommon technique, but it works in this booklet by providing continuity across pages.
The header is unobtrusive; in fact, my eye first goes to the data table, which is what the user would want to do in the first place, rather than being distracted by header bar information first.
It organizes the job titles in larger work environment categories, using color, white space, and typography to help create those distinctions. Within each category, the positions have lines (very thin, and quite pale) that guide your eye across the space probably without your conscious attention to them. Some design is best not noticed.
The color intensifies with the performance percentiles, which are explained on a preceding page. This isn’t a critical service, but a good plus (the header already conveys the increasing percentiles, and we only need to learn that once). Instead, the colors serve another important function here: they create space-efficient ribbons of white that eliminate the need for vertical lines to separate the data. The white, instead of any color of ink, is refreshing, especially when the data are so small and dense on the page. Without the four color blocks on each line, the numbers start to jumble together at a quick scan.
With a gradient of the same color (even red), it’s less likely you’ll create problems for color-blind viewers. There is still the risk of using a shade that lacks enough contrast with the black of the text, but in this spread, the contrast seems sufficiently high.