Tuesday, 1 March 2011

Design Pattern: Pagination with useful hovering indicators

Lots of websites that have catalogs use pagination. This makes sense, as it makes the content fit on the screen and it saves resources on the server.

Personally, I hate pagination. I much prefer sites where you can scroll down and new content is automatically loaded. Smart, sexy, elegant. But suppose the items are ordered by price and the first 200 items are outside of the user's budget. Suddenly pagination makes sense as the user wants to skip a lot of items. The thing is, the user has no clue on which page the items that he/she can afford start, so most users will use a simple binary search that takes them on average O(log n) time.

This is quite irritating. Each step takes about 3 seconds (click, fetch the page, inspect prices) and there are log n steps, where n is the number of pages. I thought this process could be greatly improved by showing the price range on each page in a popup hint simply by hovering.

Implemented at: www.datnarrenschip.com

As you can see: the users can hover over the page numbers to see the price of the first and last product on that page. Quite useful and impressive, IMHO. Built with simple css and jQuery. I find that on average, the preferred price range is found within 2 seconds.

I suggest you use it for your own projects, and if you do, post a comment! I'd love to hear. There are no patents as far as I know and I certainly didn't get one ;) Don't forget that your users will probably want to sort on multiple fields, in which case you probably want to show different hints for  each field.

2 comments:

  1. It's not a library, it's a design pattern. The implementation will vary greatly depending on the underlying system.

    ReplyDelete