Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

mockup

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" supercedes "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"?

share|improve this question
5  
It's called User Experience for a reason. So stop thinking about how you would use it and instead try thinking about how or why others would use it. :) Here's an example: What if I've seen the search results before? And what if I needed to get to a particular result again - but didn't want to click "Next" or ">" a hundred times to get there? What if that result was on the last page? I could just press "Last" or ">|" or what if the result was on the 4th-last page? I could press "Last" or ">|" and then press "Previous" or "<" 3 or 4 times. –  jay_t55 Jul 22 at 1:41
5  
Thanks for your thoughts. I agree that eliminating "last" would be a terrible idea in some cases, but I also never suggested that. –  J_rgen Jul 22 at 6:47
3  
As another aside, I'd like you to think about the text labels. If this is a list that's sorted in a chronological order, "older" and "newer" might be more intuitive. Especially if it's a reverse chronological list. –  Plutor Jul 22 at 12:55
    
Good or not, it's inherited from hardware days. VCRs and other recorders put Fast-Forward to the right of Play, and also used the double-arrow. (And in fact, I've seen it used like that on occasion online - using >> jumps ahead 5 or 10 pages, but not to the end) –  Izkata Jul 23 at 3:10
2  
@Aeron - Yes, but the point was that 'is being able to go the last page of results even useful at all'? The OP didn't give the context, so it's difficult to say. If he was talking about a news blog for instance, how many people are realistically likely to view beyond the first few pages of results, let alone go to the last? It always depends in UX, right? –  Chris Myhill Jul 30 at 16:01

12 Answers 12

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

enter image description here

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.

share|improve this answer
30  
In many cases I've seen the "..." is also clickable and expands to a list of pages. Certainly something to consider. –  ECrownofFire Jul 21 at 21:13
11  
I like the concept of having the last page's number as the "last" button. It also adds the benefit of having the total number of pages visible. –  J_rgen Jul 21 at 21:41
    
This would have to be my fav kind of pagination. Allows you to get to first and last page with single click and you instantly know how many pages there are. –  jay_t55 Jul 22 at 1:43
2  
I worked on a scenario where we didn't use page numbers but instead data file names to navigate (for previewing purposes). In that case, perhaps this kind of style won't work. –  SSuad Jul 22 at 4:22
6  
Another alternative to the clickable ... listing the pages is that it could turn into a mini-text entry box where the user can type their desired page. –  Keavon Jul 22 at 4:47

Pagination with select list

When there is a manageable number of pages:

previous/next pagination with select list (with all page numbers)

  • 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:

previous/next pagination with input field

  • 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.)

share|improve this answer
    
The first solution is simple but effective. Never more than two klicks necessary and it saves so much space, I like it! I'd maybe also display "/10" after the combobox, like in your second solution. –  J_rgen Jul 22 at 11:47
    
The input field would probably be the version I would prefer for longer lists of pages, but for general use it requires not only typing a number in but hitting "enter" (or possibly waiting for 1 second of inactivity or something but that's worse). A user who is used to clicking things to make actions happen might expect a "go" button. –  moopet Jul 23 at 8:54
    
An improvement to the list might be to include with each page an indication of the sort-key values on that page. Someone who jumps to page 100 of a 200-page alphabetical list probably isn't interested in the fact that it's the 100th page, but is more likely interested in finding items starting with "M", and would be guessing that they'd be around the middle. Instead of focusing on making it easy to find the 100th page, perhaps focus on making it easy to jump based upon the sort key. –  supercat Jul 23 at 16:29
1  
+1, it's unbelievable how only forum software seems to do this these days. –  MrLore Jul 25 at 6:42

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:

1

2

3

4

share|improve this answer
    
Editable page numbers seem to get more common lately. I think it's a good pattern, especially when jumping to a specific page is needed often. –  J_rgen Jul 22 at 6:54

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.

enter image description here

share|improve this answer
    
Infinite scrolling or filtering is not always possible. Sometimes the only option is a plain pagination bar. Optimizing search results can reduce the need for pagination, but not eliminate it. –  J_rgen Jul 21 at 21:49

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)

share|improve this answer
1  
Hm, now that I see this I'm wondering if numbers are even relevant after all. At least in large, dynamic lists. When I'm browsing through a book or looking for the page where I stopped reading, is usually don't care for page numbers.. –  J_rgen Jul 25 at 6:44
1  
Oh, numbers are always relevant! Again, as someone mentioned above, don't fall into the trap of only thinking about how YOU would use things. Say I'm looking to resume at the page where I left off. Well, I'm a freak whose brain retains phone numbers from 30 years ago, so I GUARANTEE I remember what page# I left off at (assuming it was displayed). There's nothing more frustrating when I have no way of finding my way back to that page, because someone didn't see fit to provide me with a position indicator, and is going to force me to browse! –  FeRD Jul 25 at 9:27

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.

share|improve this answer
    
Thats a good one, but they will be terrible when you have more than 10 pages. Also, The first one which is just numbered does not actually indicate that last number is the last page. Second one does not show how many pages are there in total. And the last - combined - although is much better than first two, does not give any cue about last page. Infact, the word last might confuse the user that pages exist beyond the last digit displayed. –  Vinay Jul 23 at 5:04
    
I wanted to point the last solution only , well have you tried opening 9th page and then clicking next or last? That isn't the most natural/best way of pagination but is rather an adaptive way. Users would likely adapt to it easily than other alternatives present. –  Abhinav Gauniyal Jul 24 at 14:12

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>

share|improve this answer

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  >
share|improve this answer
    
looking at the third row of 66/100 you want the current page in the middle so it would be 50 60 70 80 –  hildred Jul 23 at 0:11
1  
Looking at this, I would have no idea what the << and >> would do –  IMSoP Jul 24 at 22:54

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.

share|improve this answer
1  
I'd just use letter pagination for alphabetically sorted lists. –  J_rgen Jul 21 at 21:51

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.

share|improve this answer

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

PDF-XChange Viewer

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

share|improve this answer
    
Is this a design suggestion or are you implying that there is no problem with such layout in the first place? –  J_rgen Jul 24 at 15:05
    
Because I think there is no problem with such layout, it is mine desgin suggestion. –  sergiol Jul 24 at 17:34

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:

Kuanto kusta Page navigation bar

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.