14

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.

Improve this question

4 Answers 4

Reset to default
13

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.

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.

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.

Improve this answer
6
  • Wow, thanks for this answer. It's really thorough and I appreciate it.
    – Kevin Burke
    Nov 9, 2010 at 22:03
  • 1
    Where did the military come up with those guidelines? How'd you know about that resource?
    – Kevin Burke
    Nov 9, 2010 at 22:04
  • I've actually tried the "decimal lineup" with a proportional font, it looked horrible for huge columns of data.
    – peterchen
    Nov 10, 2010 at 11:15
  • 2
    @Kevin The original 1472 was a consolidation of various other human factors standards. I assume they’re from both formal research and “lessons learned” from operational experience. Human factor engineering came into its own in the military in the 1940s when the armed forces had to contend with ordinary men using the new advanced and complicated technologies of the time (e.g., radar, analog artillery computers, high-performance aircraft) in high risk and high stress contexts. That’s still true today, so the military takes HF very seriously.
    – Michael Zuschlag
    Nov 10, 2010 at 14:36
  • 4
    You read some of the standards and think, “Why would anyone design otherwise?” Well, apparently someone did, and the consequences were ugly. So they added a standard for it. “MIL-STD 1472: Preventing dumb-ass designs since 1968.”
    – Michael Zuschlag
    Nov 10, 2010 at 14:37
1

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

Improve this answer
1

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

Improve this answer
1
  • Try also Tahoma, Myriad Pro, Source Sans, Lato, Bell Gothic, and good old Helvetica / Arial.
    – terrace
    Aug 8, 2012 at 15:42
1

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.

Improve this answer
5
  • Why is sans-serif cleaner than serif? Why is there no difference between zebra-stripe and plain table formatting? Which people like zebra-striped tables better? Define "nicer"?
    – Rahul
    Jan 17, 2012 at 18:25
  • Well... :) I thought it was enough to just look at a sans-serif and a serif font to see that there is a difference between how detailed they are. The zebra-stripe issue is described in the study which I added a link to in order to give a short and focused anwser. But ok. I've updated my answer. Hope it get you in a better mood...
    – Tony Bolero
    Jan 17, 2012 at 21:34
  • I wasn't in a bad mood :-) The thing is, we value answers that point to references over opinions. Imagine if this were your job and your boss/client asked the question. Would you just give her your opinion, or back it up with research/data? Another way to look at it is as a Wikipedia article. On Wikipedia, a lot of what you wrote would be edited with "citation needed" because there's no way to verify what you're saying is actually true. That's all we're trying to pursue.
    – Rahul
    Jan 17, 2012 at 23:47
  • Haha! Hope you didn't got offended. It's the fact thing I like with Stackexchange and as you can see now when I included the research behind my answer I was never throwing around opinions either.
    – Tony Bolero
    Jan 17, 2012 at 23:58
  • Zebra striped tables are better because it helps the eye to track the row across the page.
    – Yvonne Aburrow
    Dec 2, 2015 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.