The challenge of navigating large lists

In MasterVision it’s possible to run searches which return a very large number of results, with thousands or even millions of hits. This gives rise to an interesting challenge – how best to allow users to navigate such a big list?

Up until recently, we made use of simple ‘Next’ and ‘Prev’ links, enabling results to be browsed through one page at a time.

This is a common approach but has clear limitations – what if users wanted to jump straight to the middle or end of the list? We took a look at how other websites are handling this problem. Here’s how Amazon approaches it:

This is a bit more flexible, allowing users to move up to three pages forwards or backwards at a time. However – note that the final number is greyed out, preventing a jump straight to the last page. Google takes this idea a step further:

Here, the links allow an initial jump of 10 pages forwards – but it’s still going to take a lot of clicks to browse through a large number of results.

This got us thinking – is there a better way? Another approach we’ve seen on other sites is to use a dropdown selector or text input box to pick a specific page:

This ‘works’ in that it meets the requirements as stated, but it isn’t as user-friendly as it might be. Here users either need to scroll down a big dropdown list, or enter text then submit. In either case that means interacting with form elements, and factoring in iPad support where those actions are even more fiddly, this doesn’t look or feel ideal.

With this in mind we decided to explore some more visual ways to address this challenge, which prompted a ‘Eureka!’ moment. Instead of thinking about individual pages, we realised that any set of results could be shown as a line, a bit like a progress meter or volume control:

Regardless of the number of results, users could select the middle, end or anywhere at all in the list to move to that position. However, we wanted the line to be clickable, whereas the above design suggests a draggable control. So, for our final implementation we opted for a series of dots as below:

Where there are a large number of results, a maximum of 50 dots is shown, with each representing 2% of the list as a whole, and the first and last dots always going to the first and final pages. Users can click on any dot on the line to jump to that place in the list, and then use the left and right arrows to move forwards or backwards page by page from that point. This makes it easy to gain a good overview of the list as a whole, and to spot check results at any position in a large list.

We think that this is a very neat way of addressing this problem and look forward to receiving feedback from our MasterVision users!