Guidelines and examples for the understanding and improving the user’s experience when viewing data tables. It is well worth noting that many of the considerations outlined below are very much relevant to many aspects of UI design – not just to data tables.
We hope that for many of our readers, the content below will come across as just common sense, but as Steve Krug says in his book ‘Don’t Make Me Think': Like a lot of common sense, though, it’s not necessarily obvious until after someone’s pointed it out to you.
The two tables shown below contain identical sets of information based on the 2010 annual report of the Bank of England, however, for many reasons which we will come back to later one clearly does the job of conveying the information better than the other.
The critical factor regarding the reader’s expectations is that someone reading an annual report will very likely have read many annual reports and will have an idea of how the information is expected to be presented to them. Indeed, the table in question may contain the most useful and important figures in the publication, and may often be read completely out of context of any other content.
For this reason, the format needs to convey it’s information in as clear and concise way as possible while in an entirely expected format that the reader will find, and be used to finding in other similar publications from any other company.
Note the clearer of the formats below is based very closely on the actual format used by the Bank of England in their 2010 annual report and is an excellent example of clear representation of data.
Items in a table should be ordered in such a way as to promote the purpose for which the table is being used.
Consider the two tables below. The table on the left is intended to convey the heights of the worlds top ten highest mountains and as the height of the mountain is the value of interest, the rows of the table are ordered according to that value – i.e. in descending order of height. This allows the item that is most likely to be of interest to appear in priority position at the top of the table.
However, if the reader was actually interested in the date of first ascent of the mountain, then the reader has to work hard in order to find which one of the ten was climbed first, and the table on the right would be a better way of displaying the data.
Note how the column that is of most interest (the ordered column) appears to the left of any unordered columns. The further left a column, the more important it is perceived, although the first column is usually reserved for the object names or keys and all subsequent columns for the object data or values.
In order for the information in the table to speak for itself it needs not to be swamped by the surrounding decoration and other content.
In the black and white table below, the table shows each cell with it’s own border. This used to be a default representation of a table in HTML, but immediately carries with it an inordinate amount of clutter for every single item of information in the table.
Clutter should be removed from cells, rows, columns, headers and also the surrounding content, in order to reduce the table to it’s bare minimum. After stripping back, the importance of sections of the table can be promoted, for example in table 1b, the column for the current year’s results have been quietly but clearly highlighted as the column of interest, and the totals have been slightly emboldened.
Table 3a is a good example of lack of differentiation of figure and ground and due to the excessive strength of the cell borders, reduces the signal to noise ratio tremendously.
In the table below, a single set of information for the 2010 annual report of the Bank of England is split into two combined tables but still form a single entity. The overall header in purple clearly indicates the title, and states the headers (2010 and 2009) and the units (£m) just once. The two tables are titled clearly and independently using bold font of the same colour as the overall header. The same colour is used to draw a line under the final row of each half of the table.
The two tables are physically connected only by the background colour of the 2010 column, not only linking the data but further promoting the 2010 column as being of most importance.
The header and the rows which total the values use heavier weight font and row decoration lines in order to guide and draw the eye to these items of information. The total figures for 2010 are intended as the key values in the table.
The reader has no extra work to do to see what the critical items of information are, and the paths below show the movement of the eye visually scanning the table in three quick separate movements, analysing relevant headers & labels (purple) and values (black and grey). The paths show swells where items are regarded of interest.
Extra digits are another example of clutter. Where the reader is unlikely to have an interest in absolute accuracy, there is no need to include the extra detail as it prevents the reader from visually scanning the content quickly.
For example – finding the mountain closest to 8500m is a lot easier in the second table than the first.
The need to know the height of a mountain to the nearest hundredth of a millimetre is certainly absent, and it’s presentation misleading suggests that this is real measured and accurate data – which it is not.
Present only the accuracy the user needs and that does not bring into question the validity of the data being presented. Few would have reason to question the truth of the data shown in the second table, but many would doubt whether mountains can really be measured with such precision, (mountains move more than this every year) and a hint of doubt seeds questioning of the validity and outdatedness of the set of data as a whole.
In the table for the 2010 annual report for the Bank of England, while it would not fit the expectation of the audience to modify it in any way, a useful extension in any other situation where the same information is presented wouldd be to add a column which prevents the reader from having to calculate the year on year change for each value and to determine whether the change has been an increase or a decrease.
The first table 6a already performs the totalling of the assets and liabilities, but Table 6b below adds a new column to the table, making it much easier to analyse the results and see where the most significant changes have been.
Consider the table below representing the same information found in table 1b for the 2010 annual report for the Bank of England.
The variation on typefaces for headers, labels and totals; the centralised nature of the headers compared to the values; the mis-alignment of the totals compared to the individual values; the use of different colours in order to try and represent the difference between assets and liabilities, and the use of different line thicknesses to separate the two tables from the single header all go to actually provide the impression of a badly thought out and disjointed appearance which makes it much harder for the reader to visually scan the content and pick out the areas of interest.
Compare this with the clarity of table 1b.
Consider the alternative presentation below in table 8a for the 2010 annual report for the Bank of England, compared to the original in table 1b.
In table 8a, values are horizontally centred; labels are misaligned; labels are not aligned with headers. This all reduces the cohesive nature of the data – marking out each element as an individual item to be processed, rather than a single entity which can be quickly scanned. The figures are hard to compare not just between 2009 and 2010, but also from one row to the next, due to the non-alignment of the digits.
The big picture as well as the detail of the data is much better presented in table 8b where lines have been drawn to highlight the alignments in use.
The greater the number of different horizontal and vertical lines that can be drawn marking out the extents of the data contained, the harder it is to process.
Contrasting the foreground and background of the table is important to allow the reader to process the data quickly. A common practice is to colour the rows or the colums, but choose poor colours to do this and the background starts to mix with the foreground reducing the separation between figure and ground.
Compare tables 9a and 9b below. Table 9a uses a relatively low contrast between the text of the foreground (figure) and the blues of the background (ground), whereas table 9b has very high contrast between the two making it much easier to read, because the eye is better able to seperate the important date.
The shading of rows or columns should be just enough as to guide the eye along a row or column and no more. Headers should be just different enough from the main body of the table content that they are distinguishable as headers, but not so different that they become the figure and start pushing the main data into the ground.
In order not to make the user have to store and recall too much information, it is recommended not to have too many columns of information. For each column, the reader is going to have to remember the context of the column as they scan across the rows. Readers can scan quickly down a single row, but find it harder to scan across many columns to relate connected data. For this reason it is usually rows that are highlighted rather than columns – to guide the eye across.
At the time of writing the entry for Trafford on Wikipedia has a table of population growth from 1801 to 1991. (see table 10a below). It has two rows and 20 columns. It is next to impossible to make sense of this without the reader having to process the data and keep referring between the header and the value to see how it relates.
In table 10b, the exact same information is presented using more rows instead of columns and it is clear that the reader can much more quickly get an impression of trends by scaning down the columns. Extraordinary values are picked out much faster – for example, the population explosion that happened after the middle of the nineteenth century.
Also note how table 10b attempts to group the rows by century via discreet side decoration and slightly breaking each group away from the previous without interrupting the ability to scan the entire column.
In tables 10a and 10b we saw that the user can much more easily determine trends and compare numbers when they are in the same column – allowing for the eye to scan down the column very quickly in table 10b as compared with the great difficulty of comparing the same numbers in a long row as in table 10a.
And yet we see that in table 11a, below which has all table decoration removed, when we compare the 2009 and 2010 figures, this is done very easily when shown side by side, as compared to table 11b where 2010 figures are shown below 2009 figures.
So when do we use columns and rows for comparison? Well first we apply rule 10 – reduce the number of columns. Because of the way that columns are more distinctly recognized and processed as separate entities, table 11a appears as two groups of information, where as table 11b appears as 8 groups of information.
In order for the brain to better manage the presented data in short term memory, a smaller number of apparant groups is preferable than a larger number. Therefore the two sets of information for the 2009 and 2010 figures are more easily compared when the apparant number of groups of information is also two.
As another example, say we have an equal number of rows and columns as in 11c which shows a simple multiplication table with no headers and with equal spacing between rows as with columns. In table 11d we decrease the row spacing and increase column spacing. In table 11e we instead decrease column spacing and increase row spacing. This forces the brain to process in groups. In 11d and 11e we still have the same number of groups of data to process – 6 columns or 6 rows. It is in 11d, however that the grouping is stronger and therefore more easily processed as a separate entity.
As a priority, reduce the number of columns, but when all else is equal, patterns and trends within a group of items are better processed when in a single column, but multiple groups are themselves compared better side by side. Organise the data to benefit from this – do not rely solely on alternately shaded rows to do all the work.
In complex tables it is advisable to try to organize the data into subgroups and subcategories. This can be done in many different ways, but as indicated in section 11 it is desirable to reduce the number of groups of data in to a more easily processed quantity.
Consider for example the tables below, showing temperature, humidity and pressure values in Cambridge (UK) during the 12 months of 2010. The tables show minimum and maximum values.
Table 12a has an identical spacing between each column and the table is perceived as 6 columns of data excluding the row headers. Table 12b draws together the minimum and maximum columns in order to relate them, and separates the temperature, humidity and pressure values. This creates the perception of only 3 groups of data, each of which can be sub-processed in terms of the minimum group and the maximum group.
This natural grouping of similar information reduces the need to process the table as a whole – breaking it up into more manageable and easily processed chunks.
Since the eye is better able to quickly scan up and down columns, it is the rows which benefit most from shaded rows or guiding lines. For this reason, vertical shaded columns and vertical lines serve to break up any horizontal connectedness and are best avoided.
Effective use of the grid does not mean the grid has to be drawn. If the data itself defines the grid, then the absence of grid lines is more effective than their presence.
maximum pressure in August. Which table is easist to navigate?
If the table is intended to make a point, then emphasize the message by highlighting the relevant items in the table.
The mockup table below (not part of the report) highlights the related figures, reducing the relative importance of the rest of the table with respect to the specific topic being discussed.
Night time temperatures are low throughout the year – frequently below freezing during the winter months. Daytime temperatures peak from May to August at around 30 degrees when the humidity is also at it’s lowest and the pressure least likely to drop very low.
In this case it is the trends that are important – not the specific values. The text above allows the user to ensure that they have viewed the table and extracted the general trend information that was intended by the creator. The reader may then be interested to additionally see the min and max values throughout the year athough this was not part of the underlying message.
Accompanying text helps clarify and strengthen the message and boosts user confidence that there is no further important detail ‘hidden’ in the table which should have been extracted.
Using what are know as the ‘gestalt laws’ of closure, proximity, symmetry, continuity, we can use white space and simple alignment to make the appearance of the data table more appealing and more easily processed by the reader without trying to force grouping, connectedness (or lack thereof) by using lines, boxes, borders and other elements that become clutter – upsetting the figure and ground relationship.
For example – in table 16a, the removal of all lines and shaded rows, and the absence of any bold or differently represented text combined with reduced white space around some elements to promote connectedness and increase whitespace between other areas to separate groups and differntiate headings, allows the table to really work quite well with absolutely no decoration needed whatsoever. The white space does the job for us.
In this instance, where white space is the defining tool, it would be important to leave a further significant whitespace between the table itself and any surrounding text.
In order not to break the readers processing of the data it is important not to interrupt that process by virture of not making the labels easily understood.
The headers and labels play an extremely important part in putting the data into context.
For example in table 17a below, Even assuming the reader can work out that the data relates to weather variations, the user may have questions about whether the values are averaged over many years, and what the units are – a critical feature of any table providing technical data, not to mention where the measurements took place.
Table 17b, below, does a much better job of specifying the context through appropriate labels, headings, units and also showing that titles and illustration labels also play a part in further contextualizing the data.
Be sure to appropriately balance the information presented according to the likely needs of the reader and avoid abbreviations. If necessary use footnotes to clarify more detailed or technical information that would otherwise clutter the table.
We’d like to thank Connie Malamed for insipiring the initial list of topics.