Many of our platform projects require the redesign of large amounts of tabular data. Sometimes the goal is to scan, sort and find a value. Other times the focus shifts to comparing values. Looking back at the work we’ve managed to extract a few simple suggestions. Most boil down to common sense.
*1. Style*
Ensuring there is differentiation between rows or columns, providing adequate padding and making clear what is data vs. headers are a few ways to help with table design – admittedly, it’s more art than science.
*2. Highlighting rows and/or columns*
Using hover states can add focus when viewing a large table. Back in 2005 we developed a “cross-hair effect”:http://www.jhfunds.com/Fund/PerformanceTable.aspx?ProductType=MutualFund that simultaneously highlights the row and the column on hover. Since then we’ve since seen quite a few sites adopt this technique.
*3. Ascending and descending sorting*
Sorting should go without saying. The only thing worth noting is the mechanic should be clear and the default logical.
*4. Winnowing the data*
In some cases the data tables get so large that sorting isn’t enough to get at finding or comparing the data you need to.
*5. A single line of text in a row*
Using multiple lines of text or data in table row makes it nearly impossible to scan and compare.
written by Geoff Teehan
Add a Comment