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.

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

  • a few good examples but a little old (I think they’re from 2010)

DesigningWebInterfaces

  • Lots of good examples, but again, from 2010 so not the latest and greatest

UX StackExchange Zebra Stripes

  • Great answer basically says that yes, you should use zebra stripes

UX StackExchange Large Columns

  • Good discussion on options for formatting tables on phone screens

Dark Horse Analytics

  • super concise slides and gif showing some good principles for table design!

UX Movement

  • decent techniques, including rounding data, grouping, using zebra stripes, and more

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s