Evaluating Responsive Tables

We examined and hallway tested two types of responsive tables.

When it comes to responsive tables, it seems like the more dig, the more you find. For one of our current projects, we looked at a bunch of different options, ultimately deciding a swipe left-right approach to tables.

Note that we only looked at it from a user experience prospective, and did not evaluate a single line of code.

Here's the skinny:

FooTable and its derivatives (e.g. JSONTable) seem to be the most popular, and convert table rows into an accordion UI pattern. The first two column are shown, a plus-sign is insert. When the user taps the plus, the rest of the columns open below in a list-format.

FooTable puts table rows into an accordian format with the first few columns showning

FooTable puts table rows into an accordian format with the first few columns showning

We found another project (called Responsive Tablesmaybe the name needs work) which shows a bunch of different approaches for responsive tables. In one example, they simply hide unimportant columns. Love that simplicity. 

The example we liked was called Flip Scroll. Basically, the table headers are oriented to the left, and the user can scroll the data left and right.

 Flip Scroll moves the table headers to the left, and creates a pane where the user can browse the values by swiping to the left and right.

 Flip Scroll moves the table headers to the left, and creates a pane where the user can browse the values by swiping to the left and right.

We did a half dozen hallway tests to confirm our bias. The consensus was that the vertically oriented table headers are great for reminding you what you're look at. Folks found it easier to compare data with this view, mentioning "I don't have to open and close stuff, I can just remember something was two flicks ago." Flip Scroll seemed better for comparing data, and when the device is turned to landscape, it is a much more efficient use of screen real estate. It also doesn't extent the page height, which could get annoying if you have a table with tons of columns. 

Flip Scroll really shines in landscape.

Flip Scroll really shines in landscape.

The biggest problem with this approach is it is simply not obvious that the tables are swipe-able. Providing some dimension, like the affordance of a drop shadow along the right edge of the table names could help. We decided to add a help tip.

We added a help tip above the table to instruct folks how to use it.

We added a help tip above the table to instruct folks how to use it.

In Sum

We generally view help tips as a design weakness. In this particular case, our users will be comparing data, so we thought it a worthwhile tradeoff. 

Think carefully about your data. How is it used? Will folks "seek-and-act," such as when finding a phone number? Or will they be comparing values? What volume of data do you have? Are all your dataset's columns important on the smartphone? Maybe just hide columns?

For seekers or more static-ish datasets, FooTable works great. Find it, open it, done.

But for impromptu mobile data analysis, the Flip Scroll seems best.

Published on by Anthony Ina.