Design Pattern: Pagination with useful hovering indicators

First published on
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.

Comments

  1. EmekaJanuary 11, 2012 at 11:12 PM

    Link to lib you "invent"

    ReplyDelete
  2. Jouke WalesonJanuary 12, 2012 at 8:12 AM

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

    ReplyDelete

Post a Comment

Popular posts from this blog

The unreasonable effectiveness of i3, or: ten years of a boring desktop environment

First published on
Image
My wife uses Windows and over the years I've helped her move things to new systems. Win8, 10 and now 11. With every change the UI changes. Now I can't right click the bottom right corner anymore to open Task Manager. The UI feels "fresh" and up-to-date I guess, but does it really matter? My desktop has looked like this since 2008. I love the picture of the gearbox, it's a testament to the hidden precision engineering that goes on inside the built world all the time. I don't see much of the gearbox though, because most of the time my screens look like this: The environment around my background picture has changed a little more, but has been stable for the last 10 years. My experience is very different to my wife's constantly changing system. In 2009 I moved from Windows to Ubuntu, then to Debian using Gnome. Then finally to i3 in 2013 after a brief affair with XMonad in 2012. So by now in early 2024, I've had the same minimal UI for more than 10 years,
Read more

Idea time: RFID+E-Ink, electronic price tags without batteries

First published on
I got this idea years ago, somewhere in 2004 after I had heard both of RFID and E-Ink. The order is irrelevant ;) The idea is simple, we take: 1) RFID readers, which send radio waves to tags, which pick up some of the energy in the wave, do some computations and send a reply. The tags are brilliant: no batteries, no connected power source of any kind except for the antenna. 2) E-Ink displays, which need power only to change pixels. After the power is cut off, the pixels remain in their current state. The result: a small tag with a display. The display gets initialised and updated by an RFID-reader and after that retains its state indefinitely. Perfect for price tags on shelves in supermarkets, which need to be updated every now and then but are hellish to replace. I soon found out in 2004 that Epson had already done this:  http://gizmodo.com/026090/epsons-electronic-ink-%252B-rfid--21st-century-price-tags
Read more

Parsing 10TB of Metadata, 26M Domain Names and 1.4M SSL Certs for $10 on AWS

First published on
Last May I was working on hobby project similar to this:  https://github.com/zakjan/cert-chain-resolver/  . As I found the cert-chain-resolver project a couple of days later I did nothing with the results, but I got some nice comments on how I used 1 VM to download & process 10TB in a couple of hours on this HN thread recently so I decided to do a write up on the process and publish the data. See the parts below: Part 1: downloading 10TB of metadata in 4 hours Part 2: fetching a ****load of certificates Part 3: playing with the data Total costs My approach was somewhat different from the github project above, instead of using the AIA extension I wanted to brute-force the solution by finding all known intermediate and root certificates in advance. Based on the checksum of the issuer/subject fields I could look up which certificates "claimed" to be the signer of the certificate and then using the signature I could filter out which ones actually were. You can us
Read more