I was looking at a few of the huge ecommerce sites, and how they handle pagination.

enter image description here

enter image description here

I've shown how Asos and Amazon handle it above. This pagination works okay if there are 5 or so pages, however if there were for example 100 pages, this kind of system could get a little tedious.

I was thinking of how pagination could be improved and came up with the below:

enter image description here

Could pagination not be improved by simply using an text input field to allow the user to type in the number, and press enter?

The only potential pitfall I can see is that users may not know they need to press enter after entering the number, however, as there are searches that don't have an explicit search button (they require you to press enter), I don't believe this would be much of an issue.

Can you think of any other disadvantages of this system?

  • 3
    take a look at this example beneverard.github.com/jqPagination
    – Igor-G
    Commented Mar 5, 2013 at 12:33
  • thanks for the link @Igor-G, that's where I saw it and planned to try it out ...
    – David K.
    Commented Mar 7, 2013 at 9:16
  • 2
    Pagination is so 20th century, progress to load on scroll. Commented May 28, 2013 at 12:40

5 Answers 5


I like the textbox idea but I also see the point that people need to press enter and some might not get it. Maybe you can build a prototype and test it? The point about an SEO disadvantage due to less internal linking is also a valid one.

However, I would add the number of total pages to your solution as users should know which page they can go to:


download bmml source – Wireframes created with Balsamiq Mockups

Moving forward you'll need to think about error handling too. What happens if the users enters '17' but you've got only 16 pages?

  • that is actually pretty good. I'd error handle it like Google. encrypted.google.com/… Click on Result Page 10, and you'll land directly on the last page... Page 8.
    – David K.
    Commented Mar 5, 2013 at 12:21
  • @DKOATED - I think that could work well! If the user entered '17' it would just show the last page and update the text field to '16' without any additional message. Commented Mar 6, 2013 at 17:58
  • 1
    Why not use a dropdown (for not-too-many) or autosuggest textfield (for lots of pages)? Then they can easily choose the page they want, they're restricted to the list of actual pages, and as soon as they click a valid result you can redirect without needing to wait for an enter.
    – nhinkle
    Commented Dec 20, 2013 at 3:25
  • 1
    I'm using this in my app now, thanks to this conversation!
    – skybondsor
    Commented Mar 23, 2019 at 2:37

Though I like the idea,there are a number of reasons where the design could fail as mentioned below:

  1. Users are accustomed the concept of clicking pagination numbers to get a specific place in the site and might not recognize this new affordance of having to enter the page number where they have to get to.

  2. Secondly pagination informs users how many different pages are there and how far they have to go to get to the last result of whether they should search for the product with a different search option or choice of words.

  3. Users in ecommerce sites use pagination details to determine what all pages they have gone through and use the closeness of the relative page numbers to quickly shift back to a product they liked. Though your design will allow for that users will not have to remember how much they have go back and also do a mathematical subtraction to get back instead of just clicking 21 from page 24. To quote this article

There is one exception to this rule. When dealing with eCommerce sites, it’s better to show the page numbers in your pagination so that users can refer back to a specific page to look at products they’re considering to buy. Page numbering also allows users to shop for products more throughly because it shows them which pages they’ve viewed, and where they are in their viewing progress. Not only that, but when users need to bookmark a page, it saves it with descriptive title tags of the page number and product category so that they can pick up where they left off without forgetting what they were shopping for.

The above mentioned article also this to say about when show page numbers in pagination

It’s not necessary to always show a row of page numbers in your pagination. If your pagination has a lot of pages in the high double digits or above, it’s not helpful for users to see how many total pages there are because they won’t be able to get through them all. However, if your pagination has only a few pages in the low double digits or below, showing the pages in your pagination can encourage users to browse to the end. You should display page numbers when the amount of pages are small, but go with a simple next and previous button when the they are enormous.

That said, one example of an application (pdf-xchange) which handles pagination using this method is given below:

enter image description here

  • 1
    If anyone else is strange like me and recognized but can't place that quote, it's from Harry Potter. Commented Mar 6, 2013 at 19:44
  • @Yamikuronue spot on, I was re-reading harry potter when I saw this question and took a screenshot from there
    – Mervin
    Commented Mar 6, 2013 at 19:47
  • It was driving me batty, half-recognizing it Commented Mar 6, 2013 at 19:50

Why not have the best of both worlds somehow? i.e. Have a hybrid mode where some users type and others can click? Personally, I've often resorted to the same tactic by gaming the link structure.

The other point is that in a site like Amazon etc. how often does one explicity know that one wants to go to, say, page 23? The flow is essentially linear anyways. The page numbers are more relevant in the backward flow sense i.e. "I've seen enough shoes; let's go back to that one I had liked on page3."

Finally, there was one site with a UI I really liked. Say there are 100 pages. Commonly this is used:

Prev 1 2 3 4 5 6 7 8 9...100 Next

I rather think this is smarter (say I'm currently on page 6):

Prev 1...4 5 6 7 8...50 70 100 Next 

Yes, a real big disadvantage I can think of would be SEO, basically killing indexation of your following pages. Of course, previous and next could have rel="prev/next" go with them, but you are still forcing bots to index your pages one by one.

Another thing would be, again, Google. Pretty much everyone on the planet knows how pagination on Google works. Those who don't, might know how pagination works on Amazon, Bing, Yahoo and other major sites. They all do the standard pagination (which of course doesn't define it as being the best possible solution).

I agree with that idea though and have seen it elsewhere too (just can't remember it right now). It would also depend on how it's being implemented. Tablet and mobile users might also have a harder time using that functionality ...


For our product, which is case management (not a retail or commercial product) I started implementing new pagination. enter image description here

It is compact and has a field for user entry and there is a dropdown.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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