Design of complex tables

Table design is an interesting field of information design. This is painstaking work. Very few designers in the world can design readable, convenient, and concise tables.

Many articles have been written on the topic of table design. All of them are limited to simple advice: for instance, do not make a zebra-style table. This material goes far beyond the standard approach and focuses on really complex tables that are used in financial systems.

Font selection. Monospaced fonts

A table is a set of numeric and textual data, therefore table design starts with selecting a font.

Generally speaking, all rules can be reduced to one: font must be monospaced. If a proportional font is used, cell values have different lengths even if they consist of the same number of digits. This is not a problem if the table only contains text.

As soon as figures appear in a table, it becomes impossible to compare them by digits, because each digit has its own width.

Many fonts include monospaced figures that are set on automatically in most browsers and graphic editors.

Such fonts can be used if a table does not mix figures and text. This will not work, for example, if a table specifies the unit next to the number.

Therefore, tables should use a monospaced font in which all characters have the same width.

Author prefers Ubuntu Mono for its excellent readability together with stunning compactness.

Alignment

The figures to be compared are right-aligned in tables. Usually, the column name is also right-aligned, following the figures.

This alignment works well as long as there is little data. In complex tables with column groups, group names will hang in the air and labels will leap between columns.

Right-aligned title is a common mistake in table design. Only figures can be aligned to the right. Column names should always be aligned to the left.

In simple tables without hierarchy, no difference exists between the two alignment methods. Sometimes it is even hard to tell how the data is aligned.

The differences show up when a table gets more complex. It is enough to split long column names into two lines, to discover that although the gaps between the columns have disappeared, the column names are positioned unevenly.

The table is balanced when the column names are aligned to the left.

To achieve even better readability, the visual boundaries of the columns can be emphasized by breaking the separator line.

Separators

In Europe, the decimal part is separated by a comma, and the thousands are separated by a space. This is a convenient format, but if two columns are side by side, the space between the columns merges with the space between the thousands.

This problem can be solved by separating the thousands with one of the thin spaces, for instance, the “thin space“ character (U+2009). As an exception, thin spaces have smaller widths even in monospaced fonts.

In the United Kingdom and the United States, the decimal part is separated by a period, and the thousands are separated by a comma. This format looks unusual for a European but is the standard in finance.

Units of measurement

For people, it is more convenient to see the unit of measurement next to the number. However, if a table has lots of data, the units are repeated on each line and affect readability.

In this case, the unit of measurement should be specified in the column name. There are many ways to do this. Most often, the unit is written with a comma after the column name. The column becomes wider in this case.

Another solution is to specify the unit under the name on a separate line and highlight it with a color.

Sorting

Many designers think that the arrow and triangle are bad symbols for sorting. This is true. Let us look at the interface of file managers in operating systems.

The left picture is MacOS, where sorting is indicated by an arrow. The right picture is how the same folder would look in Windows, which uses the triangle icon.

Reader is asked to guess, which variant is real: A or B?

The bad news: almost no one answers correctly. The correct variant is A for MacOS and B for Windows.

The good news is that users do not need to know this. They tell the direction by looking at the contents of the column; the icon is ignored. Users see that the data is not sorted as expected and click on the column to reverse the sorting.

Choosing the “right” type of arrow and playing with captions is unlikely to improve the interface because users do not read them when working with the system. Therefore, any neat icon can be used.

Column groups

Parameters can have subtypes. For instance, investments can be denominated in dollars, euros, and pounds. In this case, it is convenient to use column groups.

The table below uses three column groups: “Current investments”, “Yield”, and “Duration”. Current investments are divided into dollars, euros, and pounds. Yield is calculated for Call and Put options, as well as for maturity. Duration can be of three types.

In this example, the group name is highlighted with bold. Column names within a group have default weight.

Sometimes it is useful to fold groups. First, to save space. Second, to display a resulting column. For instance, it could be useful to add up current investments denominated in three different currencies and convert the sum into dollars.

Let us call the resulting column “Total” and add a button next to it that would unfold this column into three components.

Click on the button will unfold three currency columns, from which the amount in the “Total” column is calculated. To make these columns more distinctive, let us highlight their names with a gray background.

Totals and folders

Not only columns it is useful to group, but rows also. For instance, a list of companies can be divided into folders by type of business activity.

We will use the triangle icon to designate folders. As soon as a table is divided into folders, the question arises: what should be in empty cells?

Obviously it must be the sum of the values. For those columns where it makes no sense to calculate the sum (price, duration, spread), it is common for finance to use the average values. There are also columns (date) for which it makes no sense to calculate either the sum or the average. They remain empty.

Since the sum of the individual folders has already appeared in the table, it is useful to display the sum of all values as well. It is not necessary to make a second-level global folder for this. It is enough to have a classic total row.

This row can be named simply: “Total or average”. Which value is the sum and which is the average should be clear from the meaning of the columns themselves.

A wide indent is necessary to highlight hierarchy when a folder is opened.

Infographics

A basic table of figures can be enriched with infographics, colors, charts, and even interactive elements.

The first thing to do is to introduce double lines. For instance, investors would like to see not only bond prices but also the share of the portfolio it takes.

It is much more important to see the price change over the period than the initial and final prices. Price fluctuations can be represented in many ways: as a percentage, as a small chart, etc.

A tick icon can indicate whether the bond was in the portfolio at the beginning and the end of the period; it is useful to highlight the credit rating with color; the contribution of a bond to the overall portfolio growth is indicated well with tones of green and red.

A complex financial table with all features looks like a piece of design art.