Table usability/Readable font for a data table

Question

What's the best font for a data table? Monospace is good but takes up more room, so you can't have as much whitespace between the items. Similarly, what are some good usability principles for data tables? Things like zebra striping, etc. I've tried searching Alertbox but haven't found anything.

Answer 1

MIL-STD 1472F Section 5.14.3.5 has a pretty good section on displaying tables in a user interface, although it could stand some updating for modern GUIs. Here are some of the standards, along with my interpretation marked with a bullet for GUIs:

5.14.3.5.4 Titles. For a table that takes up multiple pages, column headers shall be on every page for table.

• By extension, if the user must scroll to see all the items in the table, headers shall always remain in view (e.g., by putting them in a non-scrolling div or repeating them).

5.14.3.5.5 Horizontal extension. Tables shall not be split up horizontally across pages.

• It’s better to have horizontal scrolling, as long as the row header (record identifier) is fixed so it doesn’t scroll out of view.

5.14.3.5.6 Lists. Items in lists shall be arranged in a recognizable order, such as chronological, alphabetical, sequential, functional, or importance.

• Note that there are alternatives to alphabetical that may be superior depending on the task.

5.14.3.5.6.2 Vertical extension. Where lists extend over more than one display page, the last line of one page should be the first line on the succeeding page.

• By extension, when scrolling a table a frame-full at a time by clicking the scrollbar track, the last line of one frame-full should be the first line on the succeeding frame-full.

5.14.3.5.6.5 Vertical ordering in multiple columns. Where items in a list are displayed in multiple columns, items shall be ordered vertically within each column.

• This should only apply if the list is fully in view without the need to scroll.

5.14.3.5.10 Justification of numeric entry. Users shall be allowed to make numeric entries in tables without concern for justification; the computer shall right-justify integers, or justify with respect to a decimal point if present.

• That is, the decimal place of all your numbers should line up to allow easy comparisons.

5.14.3.5.11 Labeling units of measurement. The units of displayed data shall be consistently included in the displayed column labels.

5.14.3.5.13 Column scanning cues. A column separation not less than three spaces shall be maintained.

• That translates into about 12 pixels, using 12 point Arial as the standard

5.14.3.5.14 Row scanning cues. In dense tables with many rows, a blank line shall be inserted after a group of rows at regular intervals. No more than five lines should be displayed without a blank line being inserted.

• However, these days, zebra-striping is probably a better alternative to inserting a blank line.

Font readability for a table is pretty much the same as anywhere else, so you probably should use the same font as the rest of your content. Monospace font like Courier New should be avoided: it is slower to read and there’s really no reason for it in tables with modern markup. Beyond that, the readability of font is complicated, but if you choose a common “regular” font like Tahoma, you’ll probably do okay.

Answer 2

I think Segoe UI is a good font which can be read at a lower size also.

Answer 3

Verdana is good IMO. It is meant to be read on low-resolution screens. It is easy to read, even at small sizes.

Answer 4

It's best to use a sans serif font (such as Helvetica or Verdana) because it's cleaner than a serif font (such as Times New Roman) and therefore doesn't make the table seems cluttered. Why? A serif uses decorative "feets" or curls while sans serif don't. There have been various studies to measure which font type has the highest readability onscreen such as "The Effects of Font Type and Size on the Legibility and Reading Time of Online Text by Older Adults" or "The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention" and sans-serifs are more effective. When the interface gets cluttered it affect our cognitive load which makes it harder for us to understand the table.

Even though I haven't done a statistically significant study about it myself, people I have asked seem to think that sans-serifs in tables are more visually pleasing. (You need to ask (or do a brainscan to be extrasure) your target group to be sure they will have the same experience to.)

If something is visually pleasing it is going to affect the percieved usability of the table. There is also a strong correlation between aesthetics and user's satisfaction and pleasure. This has been studied in for example "A neuropsychological theory of positive affect and its influence on cognition. Psychological Review, 106, 529-550." Why? - Because some of the cognitive influences of positive mood are due to increased levels of dopamin in frontal cortical areas that result from the events eliciting the elevation in mood. You could also check out the study "Assessing dimensions of perceived visual aesthetics of web sites".

I've only found one study that tries to measure the reading speed and accuracy between plain tables and zebra-striped tables and there seems to be almost no difference at all between these two. See the full study here

However people tend to like zebra-striped tables better probably because it looks nicer. (See the paragraphs above for reasons why this is important)

If you are generating very long tables with a lot of columns that people need to scroll - use a fixed table header so that people could see what the numbers means without being dependent on their short (very short) term memory.