Designing Data Tables

7/28/2019 Designing Data Tables

1/10

12-11-18 10signing Data Tables

Page tp://understandinggraphics.com/design/data-table-design/

Understanding Graphics

Design For The Human Mind

Home

BookAbout

Contact

Guidelines for Designing Tables

in Visual Design

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 place

within a grid framework and aesthetically designed for ease of use provides an efficient wafor people to look up and compare data. Although we think of table data as typically

numeric, values may also be presented as words.

Whats going on up there?

Step inside the mind of someone reading a table and youll find theres a lot of processing

going on. So prior to embarking on the design, consider some of the mental tasks people
http://understandinggraphics.com/http://understandinggraphics.com/http://understandinggraphics.com/category/design/http://understandinggraphics.com/contact/http://understandinggraphics.com/about-2/http://understandinggraphics.com/visual-language-for-designers/http://understandinggraphics.com/http://understandinggraphics.com/


2/10



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 familiarwith the tabular format, which provides a consistent structure for locating informatio

Information extraction: Upon locating the target data, users draw out the single fac

embedded in the table.

Comprehension: Users attempt to understand the values they extract from the table

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 trend

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 persons 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 it

purpose.

According to a brilliant article from 1977,Rudiments of Numeracy, the author states that th

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

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


3/10



Once youve 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 audiences 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 includ

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 smallestrather than alphabetically by city. If the purpose is to show the increase in college costs ove

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 readers eye. For example, headings ca

be larger or in bold type and highlights can provide emphasis. Visual cues can make a table

easier to read so readers know whats most important.

5. Round the numbers in most cases

Populating a table with rounded integers makes it easier to read and to spot trends. Thoughthis may not be appropriate for scientific data provided to experts, many tables are created

for the general public who dont need detailed accuracy. Consider how the numbers will be

used to determine whether rounding makes sense. Statistician, Howard Wainer, recommend

using no more than one decimal place in most cases.

6. Perform computations for users


4/10



When possible, dont ask users to perform arithmetic computations or mental

transformations with the data. Instead, do this for them by providing summary information

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,

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 withheadings and the grid in general.

9. Use high contrast

To increase legibility, provide sufficient contrast between foreground and background. Thi

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 in

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 betweencolumns. 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

the table, this can improve search and make it easy to compare similar data.


5/10



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 t

explain the main message of the table. This will hasten the readers understanding of the

data.

16. Love that white space

Use white space between rows and columns, around headings, titles, labels and explanation

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 b

used and the audiences familiarity with the content and choose labels accordingly.

18. Manage headings

To avoid using little known abbreviations and acronyms that readers wont understand, you

may have to work your headings into submission. Consider spreading them over two or thr

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


6/10



organized structure. The designer then transforms this data into something meaningful that

people can read and use. Why, its 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

106

106

Tagged as: tables

{ 8 trackbacks }

links for 2010-08-24 Ksznjk, Emese!

August 2010 at 7:12 am

!"#$%&'()*+,-.(%*-/$', -'01&. 2010 2%*34(.%$'. 5%$(6.*%$'-7*(*7.(%8(3&$'

19%-'/(7*(9%$(6.-,*

September 2010 at 2:11 am

!"#$%&'()*+,-.(%*-/$', -'01&. 2010 UI Warehouse

September 2010 at 5:32 am

:.*9$/;#$'-.(/;&6*(*7.(%8(3&< / !"#$%&'()*+,-.(%*-/$', -'01&. 2010September 2010 at 3:07 am

!"#$%&'()*+,-.(%*-/$', -'01&. 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 Review

April 2011 at 7:43 pm
http://theelearningcoach.com/media/graphics/which-graphic-should-i-use/http://www.biaodianfu.com/guidelines-for-designing-tables.htmlhttp://uiflow.ru/2010/09/13/%d0%be%d0%b1%d0%b7%d0%be%d1%80-%d1%81%d0%b2%d0%b5%d0%b6%d0%b8%d1%85-%d0%bc%d0%b0%d1%82%d0%b5%d1%80%d0%b8%d0%b0%d0%bb%d0%be%d0%b2-%d0%b0%d0%b2%d0%b3%d1%83%d1%81%d1%82-2010/http://tuti.tam.ru/2010/09/14/%d1%8d%d1%82%d0%b8-%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d1%82%d0%b5%d0%bb%d1%8c%d1%81%d0%ba%d0%b8%d0%b5-%d0%b8%d0%bd%d1%82%d0%b5%d1%80%d1%84%d0%b5%d0%b9%d1%81http://uiwarehouse.wordpress.com/2010/09/13/%d0%be%d0%b1%d0%b7%d0%be%d1%80-%d1%81%d0%b2%d0%b5%d0%b6%d0%b8%d1%85-%d0%bc%d0%b0%d1%82%d0%b5%d1%80%d0%b8%d0%b0%d0%bb%d0%be%d0%b2-%d0%b0%d0%b2%d0%b3%d1%83%d1http://www.jvetrau.com/2010/09/13/digest-2010-august/http://koszonjukemese.wordpress.com/2010/08/24/links-for-2010-08-24/http://understandinggraphics.com/tag/tables/http://understandinggraphics.com/visualizations/information-display-tips/http://understandinggraphics.com/recs/visual-display.htmlhttp://understandinggraphics.com/recs/picturing-uncertain-world.htmlhttp://understandinggraphics.com/recs/show-me-the-numbers.html


7/10



WYSIWYM (what you see is what you map) Dave's Whiteboard | Dave's Whiteboard

November 2012 at 8:21 am

{ 9 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 th

tips clearly

cmalamed August 2010 at 8:32 am

Youre right, Menz. Roger Atrill was kind enough to illustrate these. Data TableExamples

Nige August 2010 at 6:48 am

Excellent Connie. Thanks for putting all that info down in a logical, cohesive manne

and easy to visualise almost Table-like!

cmalamed August 2010 at 10:29 am

Thanks, Nigel. I like your analogy.

DiSeptember 2010 at 1:44 pm

Thats really great, but can you show some examples of those perfect tables?

cmalamed September 2010 at 5:37 pm

Youre right, Di, it would be best to show examples. See the link above (or below).
http://understandinggraphics.com/design/data-table-design/#comment-509http://understandinggraphics.com/design/data-table-design/#comment-508http://sky2high.net/http://sky2high.net/http://understandinggraphics.com/design/data-table-design/#comment-481http://understandinggraphics.com/design/data-table-design/#comment-480http://www.behance.net/gallery/Designing-Effective-Data-Tables/885004http://understandinggraphics.com/design/data-table-design/#comment-473http://understandinggraphics.com/design/data-table-design/#comment-472http://understandinggraphics.com/design/data-table-design/#respondhttp://www.daveswhiteboard.com/archives/5268


8/10



Roger AttrillDecember 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 users experience

Regards

Roger

Sally BigwoodMarch 2011 at 3:22 pm

This is a clear, useful summary of Ehrenbergs principles and I am pleased someone

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, its 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

Leave a Comment

Name *

E-mail *

Website
http://understandinggraphics.com/design/data-table-design/#comment-581http://www.improving-visualisation.org/visualshttp://understandinggraphics.com/design/data-table-design/#comment-580http://www.plainfigures.com/http://www.plainfigures.com/http://www.behance.net/gallery/Designing-Effective-Data-Tables/885004http://understandinggraphics.com/design/data-table-design/#comment-555http://www.behance.net/digital-ehttp://www.behance.net/digital-e


9/10



Submit

Previous post: How to Improve the Appeal of Your Graphics

Next post: Understanding Presentation Graphics

Search this site

When you know how people understand graphics, yours will be more effective. That's why I wrote

Visual Language For Designers. This website is an extension of my book. Hope you enjoy it! --

Connie Malamed

Now in paperback!

And available on Kindle

GROW YOUR BRAIN

Get Understanding Graphics delivered to your Inbox.

Name:

Email:
http://understandinggraphics.com/kindle/http://understandinggraphics.com/vlfd/http://understandinggraphics.com/vlfd/http://understandinggraphics.com/visual-language-for-designers/http://understandinggraphics.com/brainy/presentation-graphics/http://understandinggraphics.com/brainy/improve-graphic-appeal/


10/10


P 1// d di hi /d i /d bl d i /

Your email address will never be shared.

Submit

TOP READS LAST MONTH

10 Reasons to Use Color

Guidelines for Designing Tables

Visual Language of Timelines

Information Display TipsCommunicating with Animated Infographics

BROWSE BY TOPIC

Brainy Stuff(12)

Graphic Analysis (5)

Visual Design (15)

Visualizations (7)

Copyright 2012 Connie Malamed. All Rights Reserved.
http://understandinggraphics.com/category/visualizations/http://understandinggraphics.com/category/design/http://understandinggraphics.com/category/graphic-analysis/http://understandinggraphics.com/category/brainy/http://understandinggraphics.com/graphic-analysis/animated-infographics/http://understandinggraphics.com/visualizations/information-display-tips/http://understandinggraphics.com/visualizations/visual-language-of-timelines/http://understandinggraphics.com/design/data-table-design/http://understandinggraphics.com/design/10-reasons-to-use-color/

Documents

Designing Data Tables