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.
- 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.
- 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)
- a few good examples but a little old (I think they’re from 2010)
- 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
- super concise slides and gif showing some good principles for table design!
- decent techniques, including rounding data, grouping, using zebra stripes, and more
