Pagination control

[HelenOsg]

What

This is the classic pagination solution to limiting the amount of data shown to a user.

Example: Item count (shown above the table)

Example: Part 2 - Pagination control (shown below the table)

Example: On a mobile the word 'page' is hidden to allow a better fit

Why

There is no agreed solution to this. It is an on-going debate at GDS. alphagov/govuk-design-system-backlog#77

There are lots of examples of solutions both in an outside of gov.

My particular problem is to replace the old pagination control used on my app with something that fits the new GDS design style and is more accessible.

In particular the parameters of the old Nunjucts macro should be kept the same to avoid having to re-writing the back end code.

Anything else

Services

• Access To Work

Research

The guys on GDS Slack were very helpful in coming up with examples of paginations. The one that I thought worked best was the one on blog.gov.uk. That pagination control is a GDS styled WordPress pagination control. Being part of WordPress means it is well thought out, accessible and is used on thousands of sites. Its also pretty neat.

Having looked at lots of different designs the thing I am most uncertain of is the use of item counts and pages numbers. Is it better to say:

Page 3

or

Showing 21 – 30 of 100 items

Does the user care how many items there are? Is it enough to just show the number of pages, as that it the quantity that the user is actually dealing with. Do we show both number of items and pages, like land-registry does. Does that add any value? Is it confusing to the user?

In the end I decided to implement both an item account and a page display, but to keep them completely separate so they can complement each other without confusing the user.

New Control

The new control consists of two parts:

Part 1: Item count (shown above the table)

This is displayed above the results table. It shows which item numbers are being displayed. The purpose of this is to let the user know that not all items are on display. e.g.

Showing 51 to 100 of 549 cases.

Part 2 : Pagination control (shown below the table)

This is displayed below the results table. It allows the user to navigate between the pages It consists of a number of parts some of which may not be shown if not required. e.g.

Previous page, is not shown on page 1. <- Previous page

• link to the previous page. The word page is hidden on mobile.

Page 1 Page 2 Page 3

• List of links to pages. The word page is only included on accesibility software.
• The current page link is always shown in gray.
• The first and last page links are always shown
• If there are a large number of pages then a ... symbol will be shown to indicate a range

Next page ->

• link to the next page. The word page is hidden on mobile

To see this pagination control in action on another site, view this page: https://civilservice.blog.gov.uk/page/2/

Home Office solution for this - https://design.homeoffice.gov.uk/components/pagination

Accessibility

• Axe does not report any problems.
• There are a number of specific features contained in the code to enhance accessibility.
• Yes to be tested on users.

Original issue information: 1 March 2019 @tomwrightgov https://github.com/dwp/design-examples/issues/39

[HelenOsg]

Take to working group for pattern agreement Speak to Tom for more information, share code

[HelenOsg]

https://github.com/alphagov/govuk-design-system-backlog/issues/77 https://hmcts-design-system.herokuapp.com/components/pagination https://design.homeoffice.gov.uk/components/pagination http://land-registry-elements.herokuapp.com/incubation-area/pagination-complex/demo http://rural-payments-styleguide.herokuapp.com/pagination/

[jonhurrell]

New GDS pagination is out https://design-system.service.gov.uk/components/pagination/. Closing this off.