Here's the nav bar I've made for scrolling through pages

enter image description here

The double left/right arrow go back/forward 10 pages. Is this the best way to show that? Should I have text that says something like "+10"? Open to ideas.

  • 1
    Er, ignore the fact that two different pages are highlighted. Don't know know why that is; bug to be fixed. – thumbtackthief Aug 12 '14 at 20:34
  • 3
    before deciding if it's the best way to show it, decide if it's even a useful feature for anyone. – DA01 Aug 13 '14 at 4:31
  • Just to be clear, clicking at the double arrow scrolls the pagination, right? (And it’s not that it will load page 23 when you click at it on page 13?) // Why exactly 10 pages when your pagination seems to show 5 at a time? +10 from the active page, or from the leftmost visible page number? – unor Aug 16 '14 at 0:42

In your example, you could have buttons for page 1 and page 25. Perhaps add ellipsis in between to emphasize the gap.

Here's a close example:



This will be confusing for most users, the arrow is commonly used to go back 1 page or go forward 1 page, i think it is indeed better to say something like +10 or -10 if you really want a user to be able to jump 10 pages. However as discussed in the following thread it's most likely not needed for users to be able to jump a certain amount of pages.

Fibonacci pagination


My main concern with your approach is scalability. How many pages of search results will there be?

Consider how scroll bars work, and see if your solution will scale as well as they do.

To use an example, let's assume we're using Microsoft Word on a desktop computer without a touchscreen. When scrolling through a long document, you have a lot of choices about where to land. You can click and drag on the scroll bar to bring it to the start or end of the document; dragging past the ends of the scrollbar will merely keep it all the way at the top or bottom of the document.

You also have the small change, which you can get by clicking on the arrows. This gives you a very fine level of control when you already know you're close to the results.

Scroll bars in Windows also provide a large change capability for a coarser level of control, without going all the way to the beginning or the end. When you click in the track of the scroll bar, this is like pressing Page Up or Page Down.

The equivalents in your pagination would be this:

  • Scrollbar's small change: Go forward or backward one page.
  • Large change: Go forward or backward 10 pages.
  • Home / End keypress: Go to the first page or the last page.

Fortunately, in a Word document with appropriate structure, the scrollbar is annotated to tell you where in the document you are going so that you don't have to keep guessing. Pagination controls don't typically tell you what you can expect to find on each page. So when there are dozens, hundreds, or more pages to deal with, you still have to search a lot to find something specific.

For findability, I would recommend a pagination scheme wherein the pages are grouped by letter (or whatever their primary criterion for sorting is). When users have 1000 pages to search through to find an item, their mental model is not "I'm going to find it on page 650". They'll use a search criterion which is more meaningful to them, such as "It starts with the letter S." "Page 650" is an implementation detail that users conclude by making a conjecture about how far back in the list of pages the item they are looking for is.

It still takes a while (65 clicks) to go from page 1 to page 651 using a +10/-10 scheme. +10/-10 seems a bit arbitrary in that case; why not also provide +100 / -100? If there were tens of thousands of pages, even +1000 / -1000 would help. But there would need to be other ways for users to find information, of course: tagging, filtering, categories. Most users simply don't have the patience to plow through that much data to find one valuable piece of information.

So, I would advise that it's better to give users multiple starting points which make more sense to your users, based on your data and user research: a date, a letter of the alphabet, an event, etc. Then instead of +10 / -10, you can specify the next and previous starting point as that matches the user's mental model better. (This could work very well in conjunction with a "Jump to..." dropdown with just the list of starting points as its choices.) For example, I occasionally follow forums in which threads can easily reach 1000 pages, but the moderators are good about using the summary of the thread to link to particularly important events in the discussion. They might say, "There's a new official press release, page 456: (LINK)."

That being said, two caveats:

  1. Depending on your data, it might not lend itself well to a pagination system with multiple starting points.
  2. You might not need an elaborate pagination scheme for a smaller set of items.

Still, while I do find +10 / -10 useful for a smaller data set, users are still using it relatively blind. They can't see what the data on page x+10 or x-10 is going to be until they have clicked on that link or button. And it can be a pretty frustrating search that might not lead to the users getting what they need before giving up.

I'd recommend testing the +10 / -10 pagination scheme with users on a site with real data. You could also try testing prototypes for the other pagination strategies I mentioned. Give your users tasks where they need to search for items at arbitrary pages in the middle, and see what sorts of strategies they use for searching your site.


Keep the arrows for increment by 1, use a slider that increments by 10 for quicker navigation. Once the value in slider is selected the values above readjust accordingly.


download bmml source – Wireframes created with Balsamiq Mockups


I do it like this
The ↻ is for refresh the current page

first    ⇚10    ⇐     ↻     ⇒    10⇛    last

Your Answer

