Guidelines for Designing Tables

in Visual Design

Post image for Guidelines for Designing Tables

Although no one single visual display is most effective for presenting quantitative data, tables are often an ideal choice when you need to present specific values. Information placed within a grid framework and aesthetically designed for ease of use provides an efficient way for people to look up and compare data.

Please note that data tables may present a problem for screen readers. See Creating Accessible Tables for web pages. Also, see PowerPoint Accessibility to see how to make data tables accessible in PowerPoint, which is more difficult.

Although we think of table data as typically numeric, values may also be presented as words.

What’s going on up there?

Step inside the mind of someone reading a table and you’ll find there’s a lot of processing going on. So prior to embarking on the design, consider some of the mental tasks people might engage in when reading a table.

  • Reading headings: To read a table, users skim or read the column and row headings.
  • Global scanning: Users might scan the whole table to get a sense of its structure, organization and complexity.
  • Visual search: To locate data, users scan across a row or down a column to the intersecting cell that holds the value. Visual search is faster when users are familiar with the tabular format, which provides a consistent structure for locating information.
  • Information extraction: Upon locating the target data, users draw out the single facts embedded in the table.
  • Comprehension: Users attempt to understand the values they extract from the table in light of their own knowledge.
  • Identifying groupings and trends: Users often mentally group data in similar categories and look for trends. (Note: if the main purpose of the table is to spot trends, a line graph might be more useful.)
  • Comparison: Users will compare data and seek patterns.
  • Inference: Users will attempt to understand the data on a deeper level by drawing conclusions.
  • Interpretation: Users may draw from their own body of knowledge to give meaning to the data.
  • Recall: Users may need to remember the information in the table and use this information when the table is not at hand.
  • Decisions: Users may need to make decisions from their interpretation of the data.

What affects table usability?

A person’s ability to quickly make use of table data is influenced by his or her familiarity with the tabular format, the complexity of the data and how well the table design matches its purpose.

According to a brilliant article from 1977, Rudiments of Numeracy, the author states that the criterion for a good table is that, “the patterns and exceptions should be obvious at a glance, at least once one knows what they are.” (Ehrenberg) The point being that reading a table is a repetitive task, and that an effective design allows people to clearly see the data as they become familiar with it. Understanding the data means a person is seeing how the numbers relate to each other.

Design Guidelines

Once you’ve identified the message that the data should communicate, the purpose of the table and the mental processes involved, consider which guidelines below will make your design most effective.

1. Meet the audience’s expectations

The more familiar users are with a table grid, the faster they can search it to extract the data. Meet the expectations of the audience by sticking to the conventions they expect, which are defined by the purpose of the table. For example, a table in a newspaper daily might include design flourishes one would never expect in a table for an annual report.

2. Order data to match the purpose of the table

Structure and arrange the data to facilitate how it will be used. If the purpose of a table is to compare the population centers in a country, then organize the data from largest to smallest rather than alphabetically by city. If the purpose is to show the increase in college costs over a decade, then arrange the data by time.

3. Remove clutter

To enable quick scanning, focus on the most important data and remove all extraneous information. Avoid clutter around the body of the table.

4. Create a visual hierarchy

Use typography to create emphasis and to guide the reader’s eye. For example, headings can be larger or in bold type and highlights can provide emphasis. Visual cues can make a table easier to read so readers know what’s most important.

5. Round the numbers in most cases

Populating a table with rounded integers makes it easier to read and to spot trends. Though this may not be appropriate for scientific data provided to experts, many tables are created for the general public who don’t need detailed accuracy. Consider how the numbers will be used to determine whether rounding makes sense. Statistician, Howard Wainer, recommends using no more than one decimal place in most cases.

6. Perform computations for users

When possible, don’t ask users to perform arithmetic computations or mental transformations with the data. Instead, do this for them by providing summary information in an additional row or column, such as total and averages. This facilitates quicker comprehension and interpretation.

7. Guarantee a consistent look

When searching for information in a table, users expect the information to be displayed in a consistent manner. You can ensure there is consistency in the typeface of similar elements, in the alignment of similar data and in the emphasis of elements, such as column headings.

8. Align with logic

Intelligent use of alignment makes a table easier to read. Align all numbers, commas and decimal points with each other. Structure the table so it is clear that the data is aligned with headings and the grid in general.

9. Use high contrast

To increase legibility, provide sufficient contrast between foreground and background. This can be an issue with table data if the rows or columns are shaded.

10. Reduce the number of columns

Due to the small size of visual memory and the difficulty of searching through complex information, reduce the number of columns when possible. If necessary, divide the table into two.

11. Make it easy to compare numbers

Side by side comparisons seem to be easier for people to make than above-below comparisons. In light of this, construct your tables so users will compare data between columns. In addition, the eye can run down a column rather quickly, but many people use their finger as a guide to read across rows.

12. Group similar data

If you can organize the data into subgroups and subcategories without altering the purpose of the table, this can improve search and make it easy to compare similar data.

13. Make effective use of the grid

Use the grid to guide the eye in the appropriate direction and to improve legibility. For an unobtrusive look, hide grid lines or display them as a subtle element. On the other hand, use strong grid lines when the information is complex. To draw the eye across the row, avoid vertical column lines or keep them subdued and use alternate bands of quiet color across rows to improve legibility.

14. Highlight the most important values

Consider highlighting specific values to emphasize your message by drawing a box around the data or highlighting in a contrasting color.

15. Provide a brief verbal commentary

If a subject matter expert is handy (or if you are the expert), provide one or two sentences to explain the main message of the table. This will hasten the reader’s understanding of the data.

16. Love that white space

Use white space between rows and columns, around headings, titles, labels and explanations. White space makes a table easier to read.

17. Use labels to provide meaning

Labels are your opportunity to improve comprehension. Think through how the table will be used and the audience’s familiarity with the content and choose labels accordingly.

18. Manage headings

To avoid using little known abbreviations and acronyms that readers won’t understand, you may have to work your headings into submission. Consider spreading them over two or three lines or include heading detail in a footnote.

Conclusion

The lowly table is actually quite remarkable. It takes unwieldy data and compacts it into an organized structure. The designer then transforms this data into something meaningful that people can read and use. Why, it’s almost magical.

Resources

Here are some resources you may find useful for table design.
Show Me The Numbers by Stephen Few
Picturing the Uncertain World by Howard Wainer
The Visual Display of Quantitative Information by Edward Tufte

References:
Ehrenberg, A.S.C. (1977). Rudiments of Numeracy. Journal of the Royal Statistical Society, Series A, 277-297.

Related Articles:
Visual Display Tips

{ 9 trackbacks }

links for 2010-08-24 « Köszönjük, Emese!
August 2010 at 7:12 am
Обзор свежих материалов, август 2010 « Юрий Ветров. Проектирование интерфейсов и управление проектами
September 2010 at 2:11 am
Обзор свежих материалов, август 2010 « UI Warehouse
September 2010 at 5:32 am
Эти пользовательские интерфейсы / Обзор свежих материалов, август 2010
September 2010 at 3:07 am
Обзор свежих материалов, август 2010 « UIFlow
February 2011 at 9:19 am
数据表格设计指南 | 标点符
March 2011 at 6:16 am
Which graphic should I use?: Instructional Design and eLearning: Tips, Advice and Reviews
April 2011 at 7:43 pm
WYSIWYM (what you see is what you map) » Dave's Whiteboard | Dave's Whiteboard
November 2012 at 8:21 am
Abstract Sequential - Flipping Tables
April 2016 at 12:50 pm

{ 10 comments… read them below or add one }

menz August 2010 at 8:25 am

Very good tips, thanks. It would be great if you had added some visuals to convey the tips clearly

cmalamed August 2010 at 8:32 am

You’re right, Menz. Roger Atrill was kind enough to illustrate these. Data Table Examples

Nige August 2010 at 6:48 am

Excellent Connie. Thanks for putting all that info down in a logical, cohesive manner, and easy to visualise – almost ‘Table-like’!

cmalamed August 2010 at 10:29 am

Thanks, Nigel. I like your analogy.

Di September 2010 at 1:44 pm

That’s really great, but can you show some examples of those perfect tables?

cmalamed September 2010 at 5:37 pm

You’re right, Di, it would be best to show examples. See the link above (or below).

Roger Attrill December 2010 at 4:25 am

I have created some examples of how to (and how not to) create effective tables and have written further accompanying text based on the 18 headings above.

You can view this here:
http://www.behance.net/gallery/Designing-Effective-Data-Tables/885004

I hope this helps someone create effective tables that improve their user’s experience.

Regards
Roger

Sally Bigwood March 2011 at 3:22 pm

This is a clear, useful summary of Ehrenberg’s principles and I am pleased someone is promoting his ideas.
One of the most common misconceptions is that graphs are the most effective way of displaying data. Amongst other place, see this DataViz webpage: http://www.improving-visualisation.org/visuals
Of course, it’s just tools for the job – sometimes graphs (particularly line graphs) communicate the data with ease. More often than not, a table does the job better.
Many thanks for the excellent article. Sally

cmalamed March 2011 at 4:04 pm

Thanks for your input, Sally. And for the resource. I hope everyone will check it out.
Connie

cmalamed December 2014 at 1:33 pm

These are beautiful, Lawrence. Thank you for the link.
Best,
Connie

Leave a Comment

Previous post:

Next post: