Formatting usable tables

Luke Wroblewski of Functioning Form offers some thoughts on formatting tables that are easy for the eye to scan. In a November 2005 article for UX Matters (“So the Necessary May Speak”) he redesigned a table and made it more user-friendly by doing two things:

  1. eliminating redundant content (every row started with “Number of …”);
  2. arranging numbers in one bolded vertical column, eliminating the need for users to scan both horizontally and vertically (which is common in most data tables).

Before:

After:

He also lightens the lines around the table cells — what Edward Tufte would call “reducing chartjunk”.

I’m intrigued by the discussion of a single-direction eye scan: the less the user has to study the presentation of the data (“hmm, I wonder what this column means…and why are some numbers red…”), the more she can think about what the data actually means.

Good data presentation should be invisible: despite the fact that we as user interface designers do a lot of thinking to pick the perfect font, color, placement, etc., the user shouldn’t really notice these efforts at all. The ultimate goal is a data table that functions like a lens, allowing the readers to look through the numbers to see the real story more clearly.


Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>