Pagination component for search and other record ‘listings’ type pages

[RichFlick]

What

We’re looking at creating an additional NHSUK pagination component for the service profile editing app.

Why

The thinking is it will help users / editors who are responsible for a larger number of service profiles.
For example, the current conditions pagination may work well for ‘multi-page-topics’ but displaying the actual No. of results with multiple page links may work better for traditional search results type content.

Anything else

Some initial research and testing was done as part of the redesign project in late 2018. The write-up can be found in the confluence page (link below - unfortunately the prototypes are no longer live) but in summary it was felt that the site would benefit from a second type of pagination pattern for listing type pages (search results, record lists etc).

Confluence page:

https://nhsd-confluence.digital.nhs.uk/display/NR/Pagination

Mock-up

Further mockups to be added to cover amongst other things...

• a greater number of results
• Pre & Next displayed together
• mobile variation
• which numbers are listed in-between Pre & Next buttons
• do we include 'of nn' before the Next button

[danjohnstonUX]

The SCRa redesign project also needs to explore a potential pagination for displaying a list of complete and incomplete birth notifications (BNA) in a tabular format. Our existing search results pages cap at 50 results which are completely scrollable, and searches returning more than 50 results require the user to refine their search.

By default, the existing table shows notifications from the past 2 weeks. Whilst BNA users are able to filter these searches, it is highly plausible that there will be more than 50 birth notifications for an organisation over the 2 week period.

Our first pass at a prototype is at http://scra-redesign.herokuapp.com/bna/view-list but we will now need to explore whether to implement a type of pagination for this table.

Further mockups will be added once we've created and tested some ideas for tables with more results.

[Natashadodds]

Hi, I have recently used a numbered pagination from a different design system as the current NHS pagination component did not fit our purpose. Thought I'd share the findings here:

The pagination used was off pattern to the current NHS pagination component as this focuses more on navigating between related content rather than results.

We used the Home Office pagination component as it was more aligned to showing results, which fitted better with showing both current and previous applications to applicants.

Based on data and the suggested number of pages to have within the pagination, we displayed 10 applications per page. Our data suggested that the majority of our users submit 1-2 applications over a 12 month period, with less than 1% submitting more than 50. The pagination will not be visible until an applicant has more than 10 applications.

We didn’t include previous and next links on the first and last pages as there is no previous or next page available.

Findings:

• Users found it was easy to navigate between the job applications and pages
• Users understood the way the pagination would work in that they expected the older, more irrelevant applications to be at the back of the list on later pages.
• Users understood how many applications they had overall and how many of them they were viewing.
• Users liked the number of applications per page and that they didn’t have to scroll through a lot of them.
• Users would not have a lot of applications in progress at once, so are unlikely to have a lot of applications on their dashboard.

[sarawilcox]

Worth taking a look at the GOV.UK's work on pagination: alphagov/govuk-design-system-backlog#77 (comment)

[sarawilcox]

GOV.UK frontend v4.2.0 mentions pagination. Does that affect us? https://github.com/alphagov/govuk-frontend/releases/tag/v4.2.0?utm_source=GOV.%E2%80%8CUK+Design+System&utm_campaign=742422cc20-EMAIL_CAMPAIGN_2022_06_27_v420&utm_medium=email&utm_term=0_367f0a5723-742422cc20-532569054

[sarawilcox]

See also the main GitHub issue for the NHS pagination component: #27.

[sarawilcox]

See also GOV.UK pagination component: https://design-system.service.gov.uk/components/pagination/.