Pagination
Splitting results into pages, which preserves position and keeps the footer reachable.
Definition
Pagination divides a result set into discrete pages with explicit navigation. It gives users a sense of the total, a stable position to return to, and a reachable end of page.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Goal-directed result sets.
- Users need to return to a known position.
- Data tables.
Common mistakes
- Page state absent from the URL.
- Tiny page number targets.
- Filters lost when paging.
Requirements
- Show the current page, the total where you can compute it, and direct access to first and last.
- Make targets large enough to hit comfortably, particularly on touch.
- Put the page in the URL so results are shareable and survive back navigation.
- Use nav with an accessible name, aria-current page on the active item, and descriptive link text rather than bare numbers for screen readers.
- Offer a page size control for data-heavy tables.
- Preserve filters and sort across page changes.
What each control is for
| Control | Purpose | Requirement |
|---|---|---|
| Numbered pages | Jumping, and knowing how much there is | Current page marked with aria-current |
| Previous and next | The common move | Disabled at the ends, and still announced |
| First and last | Reaching the extremes of a long set | Only worth it past about ten pages |
| Per-page selector | Letting people set their own density | Remember the choice across visits |
| Result count | Deciding whether to refine instead of page | State the total, not just the page |
In practice
- i.
The page number in the URL
Why pagination is linkablePage two having its own address is the whole advantage over infinite scroll. Sharing a position, returning to it after a refresh and having search engines reach the set all depend on it.
- ii.
Deep pagination that nobody reaches
When it signals a different problemTraffic past page five is usually close to zero. Pages nine to two hundred are not being read, they are evidence that filtering and sorting are not doing their job.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Infinite Scroll and Pagination
PatternContent appended continuously as the reader approaches the end of what is loaded.
Key difference
Pagination gives every item an address you can return to, count and share. Infinite scroll removes the interruption and gives that up: position, footer access and the ability to say where you were.
Use Pagination when
- Readers need to return to, cite or share a position in the set.
- How much is left matters, as in search results or an archive.
- There is a footer people are expected to reach.
Use Infinite Scroll and Pagination when
- The stream is browsed rather than searched, as in a feed.
- No individual item needs to be found again by position.
- Nothing important sits below the list.
Local chart
CMP·021 · Region III · Grid F2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Often used with
These usually appear in the same screen or the same decision.
- Data TableCMP·025 · Component
- FilteringPAT·004 · Pattern
- SearchPAT·002 · Pattern
- SortingPAT·005 · Pattern
Short definition
The one-paragraph version, for when that is all you need.
- Infinite ScrollTERM·052 · Term