HACKER Q&A
📣 arxpoetica

Best UX alternatives to pagination anti-patterns?


Trying to allow users to rifle through pages of a collection without the typical UX pagination anti-pattern.

Purported anti-pattern: `<< Prev 1 2 3 ... 11 13 14 ... 88 89 90 Next >>`

What are some best-practice alternatives? Search? Filtering? Other kinds of pagination? Examples / links appreciated as well.


  👤 phillipseamore Accepted Answer ✓
Since when is Prev [n] Next considered an anti-pattern? I think that would only apply if the data has structure but that isn't used (e.g. an alphabetical list should be paged by first letter A B C...).

👤 adventured
It's not an anti-pattern. There are no other better alternatives for generic paging purposes where a lot of pages are involved.

The only change necessary in the example is to drop the 2 3 and 88 89, they're entirely unnecessary and add bloat.

< Prev | 1 | 11 13 14 | 90 | Next >

Drop the Prev on the first page. Drop the Next on the last page. Highlight the page you're on in the middle (eg 13) and keep that page in the middle as you cycle. If you're on page one, it goes to the strict left and gets highlighted.

You can optionally use "first" and "last" in it, although that takes up more overall space and detracts from the Prev / Next visually. You can also put a small jump input box with it if there's an unusual, rare reason to need it.

That's it. It's a paging work of beauty superior to all other generic alternatives. The only way you beat that approach is under circumstances of niche demands. For example where a simple "< Prev | Next >" will do (because you have absolutely no need to ever jump) or you have a small fixed number of pages "1 2 3 4 5" and so on.


👤 muzani
Infinite scrolling is the popular, because of the efficiency of many mobile adapters. A list of data in our platform takes about 90% of the latency in connection, especially now that everything is https, and the file size is negligible on most devices.

Android on a 2012 device has little issue displaying 1000 text-only items. Most of the weight of infinite scrolling is possibly querying the DB and maybe caching images.

The UX downside is that it's hard to jump to something in the middle. But filters on native mobile are easy to apply and require you to first download a whole chunk of data.

Also by infinite scrolling, I don't mean it pulls infinite items, but rather reloads the 'page' when it hits the bottom.


👤 seanwilson
Many systems exist because there isn't a perfect one that works in all scenarios. You should search online for UX discussions more focused on your particular scenario and weigh up the pros/cons. A list of pages might be perfect for one use case, infinite scrolling might be perfect for another etc. Try and find existing apps/UIs that deal with your scenario for ideas.

👤 buboard
do you really need the numbers? if it's alphabetical list, maybe letters, otherwise, just prev/next . most people are now accustomed to infinite scrolling which doesnt even have a prev button, let alone numbers

👤 hotgeart
For common websites:

Prev 1 ... 53 54 55 ... 99 Next

- Next/Prev btn

- Last and first page

- The current page between his siblings

In mobile width 320-470px I just keep:

Prev / Next

For admin panel:

Prev page: [5] of 100 Next

I like to have a text [input] so I can just type the page.