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:
- eliminating redundant content (every row started with “Number of …”);
- 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.