Best Practices for Data Tables

Image credit: http://a.kabachnik.info/ajax-data-tables-for-jquery-mobile.html

At work, after planning and running a round of Usability Observations, I volunteered to sketch out some possibilities for improving the usability of a couple of data tables. Here’s the research I did on best practices.

Web Typography: Designing Tables to be Read, Not Looked At

Fantastic article that covers not only the what and why, but the how of tables, focusing on typography and CSS styling.

Design Better Data Tables, Andrew Coyle

Beautifully crafted article with animated examples of several best practices for visual and interaction design of data tables.

ThinkUI

Purely about visual design of tables, but some really good illustrative examples in there
Kind of outdated (not really sexy) but the principles still hold
good explanation for some principles that I already knew but wouldn’t be able to easily explain. For example, why it’s not a good idea to use strong vertical lines (“vertical shaded columns and vertical lines serve to break up any horizontal connectedness and are best avoided.”)
Really reminds me of the timesheets redesign I proposed at my previous company. I learned a lot by playing with the spacing of the data and labels as well as trying to reduce the noise by limiting the data that I showed.

Janko

Somewhat fluffy article. Not a lot of substance. Tips include:
- alternate row color (subtly)
- Use Table sections
- pagination (I like infinite scroll way better – where possible… oh wait. the next section of the article talks about “Continuous scrolling”. )
- hover actions
- actions on multiple rows (would have come in handy for the IT2 multi select workbench stuff)

Patternry