What would you expect at the end of a pagination?

Question

I'm designing a mobile e-commerce application dedicated mainly for women in their 50s and 60s.

For my current project I have to highlight some exclusive time-sale items at the top of a list page.

I considered using a pagination UI where the user can touch set of arrows (left or right) to move and bro through the products. For extra understanding:

• the user will be seeing 3 products per pagination.
• I chose sticking to the arrows as visual guides, since my target users don't tend to swipe through pagination areas instinctively.

So, the pagination block would look something like this:

My question is this:

Once the user has reached the last page, let's say "8/8", and then clicks on the right arrow again what would they expect to see?

A) the page to go back to 1/8. (it would be a loop)

B) nothing would happen, since the user has already reached the last page.

In the case of B, I could also consider hiding the right arrow, to prevent unnecessary clicks. But I also think it would be tedious for the user to click on the left arrow multiple times to go back to the beginning (1/8)

Although both A and B make sense, I'm not sure which approach is the best considering that the service is a shopping application and that the main target users I'm designing for are women in their 50s and 60s.

Thank you so much!

Answer 1

I would display [<] 8/8 without the arrow to the right. Hiding the arrow is an important visual stimulus indicating that the user has reached the end of all results (It is also how Google does it).

If you worry about people having to click to much to get back to the first page, you could always introduce individual page numbers, e.g.

[<] 1 2 3 4 5 6 7 8 [>]

or a double arrow that takes you to the beginning or end, e.g.

[<<] [<] 3/8 [>] [>>]

Answer 2

Loop to the first page.

Easy: when yo say – I could also consider hiding the right arrow – it means you are giving a visual signal that the user has reached the first page, I think this signal will be much more evident if it's given on the entire screen → seeing the items from the beginning again.

On the other side, going back to the first page is giving the user the opportunity to review the past items again instead of abandoning, a favorable point for the owner of the app commercially speaking.

Answer 3

TLDR;. Why would users only want to go back to the first page from the last page? The chance is (statistically) bigger that they want that from any other page. Most users hopefully won’t even go to the last page. Allow users to always navigate back to page one and hide or disable the “next” button on the last page.

---

In a book it is easy to find the first, last, next and previous page but any other page requires a bit of searching through it. A minimal pagination allows exactly that and shows the page you are on and how many there are.

Minimal pagination controls:

[1] … [4] 5 [6] … [10]

For the above concept users have to think in terms of page numbers. To allow thinking only in terms of previous next, first and last page and make navigating a bit easier, many pagination designs introduce buttons for that:

[first] [previous] page 5 out of 10 [next] [last]

But that introduced the problem that when you are on the last page, what to do with the "next" and "last" page buttons. Obviously the same counts for the "previous" and "first" button on the first page. I don’t know where the idea of looping came from but that has been copied and become an often used concept as well. There are three reasons not to use it:

1. It doesn’t communicate the concept of looping
2. It duplicates a button that is already there (navigating to the first/last page)
3. It changes the meaning and behaviour of previous/next

So what to do with the "next" and "last" buttons on the last page? On the pages where they are not needed you can hide or remove them. Another option is to disable them. For that you have to be sure they really look disabled.

Disabled buttons are often used to prevent shifting of buttons; When you start on the first page without "previous" and "first" they would suddenly appear when you click "next" which would shift that button and disallow you to quickly click "next" again on the same spot. With good design and implementation this problem can easily be avoided.

Also disabled buttons are used to not surprise people with appearing and disappearing buttons but I don’t know if that is even relevant. My guess is that it doesn’t really matter as pagination is so common, people should have no trouble understanding how it works.

For a clean design I think omitting the buttons is fine, also because I don’t like disabling things in general. So you only need this:

page 1 out of 10 [next] [last]

And:

[first] [previous] page 10 out of 10

Just position it correctly so it doesn’t shift. And obviously, instead of the words you can use arrows like: [|<] [<] [>] [>|]

Also you can omit the “last” and/or “first” button if you don’t see people ever use it, which will most likely be sooner the case for “last” than for “first”. But therefore you have to add them first and see what analytics have to say about the click rate after a while.