0

I'm working on a pagination plugin that lets users choose how many pages they want to show at a time out of the total, like in this example the user set it to show 4 pages out of the 100 available pages:

enter image description here

Like many pagination controls it shows the number of pages set to display around the current page then the last page separated by ellipses.

The problem comes in when the user sets the number of pages to display 1 less that the total number of pages. So in this case they decide to show 4 out of the 5 available pages.

I can show the last page separated by ellipsis still to keep consistent: enter image description here

But there is no numbers between 4 and 5 so it shouldn't have the ellipsis:

enter image description here

But then I am displaying 5 pages, not the 4 the user requested, so I should only display 4:

enter image description here

But this makes it inconsistent since the last page is normally shown, and users have no way of knowing there is (or what is) the last page.

What is the proper way to display this situation?

EDIT: Stack Exchange by default shows 5 pages, the ellipsis, then the last page. After clicking through many SE forums I found one with just 6 pages and they handle it by removing the ellipsis.

enter image description here

I believe that is the best practice for most pagination setups but what about a plugin like mine where the user explicitly sets the number of pages to display.

2
  • Just out of curiosity, why do you let the user pick the number of pages to show in the page picker? I don't understand why I would ever change the default. (And I don't expect that I'd get upset about seeing five instead of the four I set.) Sep 8, 2015 at 13:30
  • @KenMohnkern This is for a jquery plugin for people to use on their site. So this option is for the developer as he/she is setting it up on the page. They are essentially setting that default. It is not intended for the end user of their websites to be able to change.
    – DasBeasto
    Sep 8, 2015 at 13:33

3 Answers 3

1

I think you can resolve this issue considering the following:

tp: total number of pages uc: user's choice

So, let's say tp=100 and uc=5 . You will use something as you said, like 1, 2, 3, 4, .... , 100

However, if tp=5 and uc=4, then I would show 1, 2, 3, .... , 5

Basically, you want to show the total number of pages and you need to respect User's display choice. This formula, which basically is a counter that displays TP number preceeded by (UC-1), covers both needs while keeping consistency.

Display considerations aside, I'd also display a small text clearly stating total number of pages. While page navigation is pretty known, I have found quite a bunch people not understanding this approach, so adding that in a small message won't hurt. Additionally, Iwould also limit the UC variable in order to avoid users select unmanageable numbers, for example 100 pages out of 100.

Edit to answer comment: Personally, I'd use a lower limit of at least 3. And if you want to allow a great deal of customization, then if >3, allow to use only directional arrows . Think about this: You need to have current page, last page and the X (ellipsis). This ellipsis is important, because it covers both a semantic and a syntactic function: there's an omission of data which is implied by the sign.

So, let's go with the minimum number of boxes to display (numbers are the total amount of pages, current page may coincide with on of the spots):

  • 1

No numbered navigation

  • 2

2 spots (first / last)

  • 3

3 spots (first / second / last)

  • 4 and over

3 spots (first / undetermined / last)

These are the minimums. Now, you want to offer users the option to choose the amount of spots (navigational items). So it's obvious 1 won't have any spot, 2 will need 2 spots to represent the needed information, 3 will need 3 spots to represent the needed information (and this is tricky, because second spot could easily be an ellipsis. But if you have 1,...,3 , it's obvious the ellipsis is 2, thus not an undetermined value and therefore ellipsis makes no sense) and from there, the MVP (minimum viable product) is 3 spots where the second spot is undetermined.

But these are the bare minimum. If user chooses to display 4 spots, and there are 4 total pages, then you can't have 1, 2, ... , 4, because again, it's clear the ellipsis is 3, so you need to keep that in mind as well: Ellipsis are shown only if UC=(TP-2) ∧ TP>3

Well, hope this helps!

3
  • I like this thought, I will play around with it in the morning and see if there's any problems with it but that could very well work. I will probably add an optional parameter to display the underlying text or not but that is a good idea as well. I do have a few conditions that check for strange UC settings like setting UC higher than Tp, but the plugin is intended to give a lot of customization so I don't want to many limits.
    – DasBeasto
    Sep 8, 2015 at 2:30
  • I haven't toyed with this idea yet but while doing some sketches I was curious, what whould you do if the user set the UC to 1 or 2? Since the first page and last page are included in the UC with your reccomendation it wouldn't be able to show one or both if the current page isn't the first or last. So would you drop the first/last page from visibility then and just show current or would you simply not allow those choices (either way these limits can be written in the usage docs)
    – DasBeasto
    Sep 8, 2015 at 18:33
  • I edited teh answer for this since it was a bit long and needed some theory
    – Devin
    Sep 8, 2015 at 19:44
0

I think you can address this by setting the right expectations at the outset. Instead of asking the user to specify the number of pages to display. Instead let them specify the maximum number of pages to display.

Then there is no mismatch of expectations when they see a lower number of pages displayed.

0

In your example, just show page 4. If the developer defined the picker to show four at a time and the list includes five, just show them all. Think of the user. If I want to jump to page four, and it's been replaced by an ellipsis, I'll have to pick some other page to make #4 appear so I can pick it. Arrgh. Just show it.

Your Answer

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

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