Note: Images may be inserted into your messages by uploading a file attachment (see "Manage Attachments"). Even though it doesn't appear when previewed, the image will appear at the end of your message once it is posted.
Register Latest Topics

  Author   Comment  

Posts: 2
Reply with quote  #1 

Are there any recommended practices for designing tables consisting primarily of words and sentences rather than consisting of numeric values?

Stephen Few's "Show Me the Numbers" and Tufte's "Envisioning Information" both provide sound treatment to the potential problems with numerical table design. However, I frequently build tables that do not fit that profile and I haven't found direct examples (within my library) to aid in designing these specific tables. So, are those same practices for designing numeric tables directly applicable to a table of words and sentences? Or, perhaps there are different design practices to reference. Specifically, I'm seeking advice in typography, spacing, alignment, white-space usage, etc.

I found the following tables in my archives and recreated them with MS Word. Both are representative of the typical Word tables we encounter in typical business documents. So, ignoring the fictitious content, here are some questions to seed any potential discussion:

1.) Remove the grids, leave them, modify them?
(If removed, how do we use the white-space effectively?)
2.) How do we best align the column headers and column body text for reading and scanning?
3.) Is the row height and spacing appropriate or can it be improved?
4.) What typography improvements can be made?
5.) Does this content belong in a table or is there a better visual structure to communicate it?

I'm happy to post my opinion of improvements, but I'm interested in the community discussion (or interest) before we pick apart my suggestions.




Attached Images
Name: Table_1.jpg, Views: 160, Size: 45.81 KB

Name: Table_2.jpg, Views: 159, Size: 24.92 KB


Posts: 69
Reply with quote  #2 
I almost always remove vertical grid lines and use the opportunity to left align text and right align numbers.  "Show Me The Numbers" explains the psychological theory (Gestalt theory) around why this works, making the alignment provide a better "line" than the actual grid lines.  I often stump colleagues when I ask them why they created thick grid lines and then centered their text and numbers to keep them away from the grid lines! Put that way, it does seem like strange behavior.

A column of left aligned text sometimes needs a little more white space to separate it from a preceding column of right aligned numbers.

I sometimes use horizontal grid lines, and sometimes light zebra stripes, but never both together.

Posts: 13
Reply with quote  #3 
Having formatted tables of text for a few years in a bureaucracy, I thought I would give a shot to this one as my first contribution to the discussions. The two tables being very different, I'll separate my advice in two.

Personnel Contact List

0) Organization. This depends a lot on the purpose of your table. If it’s a phone book, then the alphabetical order might be best, especially if you have more than 15-20 entries. If it is  a calling tree, arrange it according to the continuity plan. Here I have assumed it’s a sort of flat organizational chart and I have grouped the personnel by units, a familiar way to do in bureaucracies. It has the advantage of highlighting which team are spread across locations.

1) Grids. Keep only the lines that add to the clarity of the table. The vertical lines can almost always be removed because the eye can easily rely on the left alignment. The horizontal lines could emphasize the natural groupings, as long as there aren’t more than 5 people in a given group. Beyond that, it is hard for the eye to follow a single row. Dotted lines are enough, but use a full line to distinguish the title and mark the end of the table.

2) Alignment. Since this is text, align everything to the left, as we are used to read it. It will also automatically create your vertical lines in the tables. Also align your numbers to the left since they are not amounts.

3) Row height. Try to keep it regular, especially for a list with such short entries. It should always fit on one line.

4) Typography. Use the same font throughout. Serif is good for print and sanserif for screen, but at small sizes and for tables, I personally prefer sanserif. I’m using Arial here. Size 8 is plenty. It sounds small, but in print, it resembles newspapers. I used bold both for the main role in each section, so as to create a title for the section without having to create another row.

4) Width. Make each column as narrow as possible. Don’t try to use the entire width of the page just because you can. I used abbreviations (“Tech.”) to avoid having a wide column because of a single entry. Note that I did not cut the longest people name, which would not be appropriate.

5) Format. This belongs in a table. You could ask whether all columns are really needed. If it’s a calling tree, you don’t need the titles and maybe not the office address. Note that I removed the street number, since the full address belongs elsewhere, staff must be familiar with it, and this simplified display stresses the differences.

Product List

1) Grid. Again, take out the vertical lines, use full lines to separate the title and mark the end, and use dotted lines to separate the products. In this case, the text length may vary greatly and the row height with it, so it is likely better to use a line between every product.

2) Alignment. All to the left. Remove the bullets; they add indentation that only creates more vertical lines.

3) Spacing. Increase the interior margins (I used 0.03”) for a clearer and more elegant format. This works well more often with text than numbers.

4) Typography. Again, Arial 8 should work well.

5) Format. Your current format suggests that it is very important to compare products between them, which does not happen so often. If it is more important that a reader understand the nature of each product, then describe them separately. You might be better serve with separate paragraphs that would give you the space to describe your products better. See the example below. Note that I used a serif font (Baskerville 10) since this is not a table.

Hope this helps.

Attached Images
Name: product-list-fg.png, Views: 0, Size: 109.75 KB

Name: product-list-fg.png, Views: 0, Size: 109.75 KB

Name: personnel-contact-list-fg.png, Views: 73, Size: 97.72 KB

Name: product-list-fg.png, Views: 71, Size: 109.75 KB

Previous Topic | Next Topic

Quick Navigation:

Easily create a Forum Website with Website Toolbox.