What to do with the "last" button in pagination?

Question

A large number of lists and search result pages use First and Last links, sometimes styled as << and >>. In most cases, the Last button is also the far right one, which seems to be regarded as good usability.

It usually looks like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

I personally dislike this arrangement. Why? Because in 90% of all cases, all I need is the Next button. Photo galleries, search results, tables, etc. One case I can think of where I would frequently need the Last button is in internet forums, where I want to jump to the last entry quickly...

The above arrangement makes the Next button both hard to identify and to click because it is sandwiched between those other elements. It appears Next has lower weight than Last.

Sure, logically Last supersedes Next, that's why it's placed after it. But that is at the price of (in my opinion) increased cognitive load.

Can this really be considered as "good usability"?

Answer 1

Exactly, I think this particular type of pagination caused me confusions lot of times. However Its already adapted by the population.

I'ld suggest something like below

So what really happening here is -

• Its clearly making Previous / Next very prominent and not causing any confusion.

• In page numbers three dots (...) followed by last two page numbers clearly showing the pagination goes till 200. In case user wants to go to last page, He will simply click on 200.

• Very linear and non confusing UX

Hope this helps.

Answer 2

Pagination with select list

When there is a manageable number of pages:

• Shows the current page number (selected attribute of option)
• Shows the last page number after one click (could also be added next to the select list if it’s important)
• Allows to jump directly to any page (including first and last)
• No confusing two sets of buttons (first/last and prev/next)

Pagination with input field

Also works nicely when there are many pages:

• Shows the current page number (default value of the input field)
• Shows the last page number (could also be made clickable)
• Allows to jump directly to any page by entering the page number
• No confusing two sets of buttons (first/last and prev/next)

(Both ways could be combined with a combo box.)

Answer 3

I often type in the URL bar so that I can go directly to the page I want. An input box letting the user type the direct page would be a great boost in UX and usability.

You can make the current page number (the one that shows as active) turn contenteditable when clicked (make sure to auto-highlight) and let the user type a number and hit Enter. You can also do something like Dinesh Golani's answer and replace one of the ...'s with an input box, like my (ugly) quick mockup below:

Answer 4

By sandwiching options in this way the user has mental sense of their position and direction for movement. Reversing the position of the NEXT and LAST buttons would be counter-intuitive.

Each scenario is different depending on the likely actions of your users and the information you are displaying. If the search results do roll over many pages perhaps a better filtering system could be used to limit the results and prevent additional work by the user, equally sorting of (Order by) results could be implemented if multiple columns are presented.

If, as in your scenario you often just want to go to the next page, infinite scrolling may be a better option (e.g. tumblr.com). But often if the page has clearly defined icons that are not small and difficult to use then the general paging options work well.

Answer 5

Trying to think out of the box:

First we have to consider what we do with the pagination:

I think these cover most cases:

• 'Fine' navigation: go to next/previous page
• 'Coarse' navigation: go to the first/last page, go a lot of pages forward / backward
• Indicate the current and total pages

so, what about using a slider for pagination:

    [ < prev ]  [=================================[~~~]-------------------]  [ next > ]
                                                    ^
                                             { page 10 / 14 }

• the next and prev allow for fine navigation
• sliding the slider all the way to the left or right allows for going to the first or last page. Dragging the slider or clicking along the bar allows for coarse navigation.
• While holding down with mouse-button or touchscreen would show a popup with the exact page-number, and the slider position indicates approximately on which page you are.

Pros:

• Visually attractive.
• Not a lot of numbers on the screen.
• Easy (relatively large) buttons for next / previous page.
• No confusion with single and double arrows.

Cons:

• Not commonly used
• May be hard to use on touchscreen devices.
• May be hard to position the tooltip for touchscreen devices.

Edit

I like to avoid only using arrows for prev / next, depending in the context, but they can be to tiny to click easily. Also try to place the next / prev buttons on a consistant location, allowing for rapid next-clicking. Also consider using more descriptive words then next / previous: (for example: newer / older; cheaper / more expensive; etc, depending on the sorting method of the pages)

Answer 6

Well , There's a beautiful solution here : Page. It tries to incorporate numbered as well as previous/next links into same pagination style. And here's a working demo : Demo.

Answer 7

A different idea:

Prev 1 2 3 Next
First 99 100 Last

It needs some work, but don't forget <a rel=next> or < rel=next>

Answer 8

I like hildred's answer, and would put an input box between the two rows as separator and extra usability, and I like steps of 10% rounded at the bottom. Just another idea. For displaying it like below requires some good logic..

[edit]

Cool would be display the bottom row only on hover, but then not on bottom, on top of the page numbers like the android keyboard.

Page 1/100

     1   2   3    >
[  or enter page  ]
    10  20  30   >>

Page 66/100

<    65  66  67   >
[  or enter page  ]
<<   70  80  90  >>

Page 99/100

<    98  99  100  >
[  or enter page  ]
<<   80  90  100  >

Answer 9

If I want to see items at the end of the list as it's currently sorted, then LAST lets me get there quickly rather than clicking through every page until I'm at the Z's. Some UIs let me sort and reverse sort, but not all of them do.

That's its only "Good Usability," off the top of my head.

Answer 10

I have also seen pagination displayed this way:

Prev 1 2 3 4 5 ... 10 11 12 ... 18 19 20 Next

~ Each number is clickable, along with the Previous and Next.
~ The numbers mentioned in the center help the user to get to the middle of the total of number of pages, which is 20 in this example.
~ User can actually navigate to the Begining, middle and to the End of the results very easily.
~ Cognitive load also is in the right amounts.

Note that here the first set has 5 numbers, this helps the user go till 5th page easily assuming that these page are more relevant.

Answer 11

Do you think the approach at the bottom bar below makes the numbers hard to identify? I think not.

Full disclosure: I do not work for the company that produces PDF-XChange Viewer.

Answer 12

I like the approach of the http://www.kuantokusta.pt/ site: do not have first or last buttons at all. You can see it if you do a search, or I can give you the link of an exemple search: http://www.kuantokusta.pt/search?q=ténis&pag=11 .

If you scroll to bottom, you will see every page number as a rounded rectangle around it, making them appear as more consistent entities and difficulting wrongly clicking on the page just at the side. For that also contributes the fact of when hovering one of these items, it gets a different background.

You can see this "Page navigation bar" on the image: