Pagination

[govuk-design-system]

Use this issue to discuss the Pagination component in the GOV.UK Design System.

What

Help users navigate through multiple pages. Typically used for pages of search results.

Examples

Multi-page pagination examples:

• https://design-patterns.service.justice.gov.uk/components/pagination/
• http://hmcts-design-system.herokuapp.com/components/pagination
• https://design.homeoffice.gov.uk/components?name=Pagination
• https://cjscpp-design-patterns.herokuapp.com/design_patterns/pagination
• https://dvsa-front-end.herokuapp.com/library/mts/pagination

Previous / next only pagination examples:

• http://land-registry-elements.herokuapp.com/pagination-simple/demo
• https://digital-land-design.herokuapp.com/component/pagination
• https://nhsuk.github.io/nhsuk-frontend/components/pagination/index.html
• https://components.publishing.service.gov.uk/component-guide/previous_and_next_navigation

[joelanman]

Pagination in the US Web Design System

[36degrees]

There was a request for this in Elements.

[gazaston]

Pagination from blog.gov.uk:

[leekowalkowski-hmrc]

We need to make sure pagination links are big enough for touch screens, I think all the examples shared are not.

[glenjamin]

Are there scenarios where "jump to page N" is actually desirable to a user?

In practice I can see why next/previous is useful in a long list, but jumping to a numbered page is probably always going to be worse than providing the user a way to filter down the results to something manageable.

[36degrees]

One scenario I can think of is a user 'binary searching' a relatively small number of sorted results. For example, with an imagined alphabetical result set spanning 10 pages, if a user is looking for something beginning with 'N' they might jump to page 5 (guessing, based on the position of n in the alphabet) and then navigate from there to find the result they're looking for, which would arguably be a better experience than having to page through one page at a time.

I'd agree that providing a search or filtering interface would be preferred, but might not always be possible?

EDIT: Filtering and searching might be the sort of thing that would get dropped from an 'MVP', in which case providing the ability to quickly move through a result set as described above might be an easy short-term solution.

[mgilgar]

I think 90% of the times it should be enough to provide only the first X results without pagination and give the option to filter or seach. Less complicated for the user and for the developer.

Anyway, I can see the needs of the other options for some scenarios. I think it would be great if govuk can develop patterns for all of them.

Also, please specify what the url should look like.

[edwardhorsford]

Came here as my service uses / needs pagination.

One use case to consider:
Where the user isn't looking for a specific thing (so search / filtering isn't necessarily relevant), but wants to review all the things. For instance, my user might want to review all the things created by Ed. They may filter for Ed as creator, and then want to read down the entire list of things Ed created.

On a personal level (and very much subjective to how I work), having numbered pages may help if people are noting down things of interest - I can review several pages and know that my interested things are on pages 1 and 3.

Numbering potentially gives an idea of how many pages of results there are - but there are other ways this could be achieved.