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.

Image

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:

Image

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:

Image

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:

Image

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:

Image

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:

4

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!

One thought on “The challenge of navigating large lists

  1. Yes. Good solution. FileMaker has an open book icon where you can simply type in the page number where you might find the data your’re interested in, and it has your second last option of a slider underneath the book. So best of both worlds. Your dots seem more iPad friendly though – hopefully!

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s