Bad Lists, Paging and Data Grids


Recently, I’ve seen a number of web applications experimenting with the presentation of tabular data.  In some cases, I’ve noticed them moving away from table presentations and toward a variety of listings using different fonts and presentation techniques.  There are plenty of examples, but a good one is Mint’s credit card recommendation screen:

Mint credit card recommendation screen

The information on Mint’s screen is tabular — there are products, card images, balance transfers, interest on purchases, etc.  Each row represents a new product and all column info is consistent.  However, Mint has chosen to display each row as a large box with its own columns of data.  On my screen resolution (1366×768), I’m only able to see two options at a time.  Because of this constraint (and likely performance concerns), Mint also asks the user to page through options.

Why I hate paging

Paging is one of those funny UI techniques that you hope people won’t have to use.   Google uses it appropriately– there are millions of results and Google’s algorithms have a high likelihood of finding the right results for you on the first page.  In other words, it’s rare that you would have to use the paging option.  NetFlix also spends a lot of time and money on relevance algorithms in the hopes that their users won’t have to use the paging option.  However, in shopping for a credit card, it’s very likely that I would want to see all options.  In fact, I might want to filter those options based on a series of criteria (columns).

Ironically, as more “web 2.0” styled sites seem to be moving away from tabular presentations, support for AJAX and DHTML has made truly useful presentation of tabular data more supportable.   Many table widgets allow you to scroll through a full list, automatically sort on columns, and even do sums or other calculations on data in columns.

This article from Smashing does a nice job of presenting DHTML data grid options:


No Responses Yet to “Bad Lists, Paging and Data Grids”

  1. Leave a Comment

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: