New Style of Pagination Pattern

Question

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

Asos

Amazon

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:

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?

Answer 1

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?

Answer 2

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:

Answer 3

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 

Answer 4

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

Answer 5

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

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