Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagination #77

Open
govuk-design-system opened this issue Jan 15, 2018 · 13 comments
Open

Pagination #77

govuk-design-system opened this issue Jan 15, 2018 · 13 comments

Comments

@govuk-design-system
Copy link
Collaborator

@govuk-design-system govuk-design-system commented Jan 15, 2018

What

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

Why

Anything else

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (Agreed) Jan 15, 2018
@36degrees
Copy link
Member

@36degrees 36degrees commented Aug 22, 2018

@gazaston
Copy link

@gazaston gazaston commented Sep 25, 2018

Pagination from blog.gov.uk:

screen shot 2018-09-25 at 10 27 19

@leekowalkowski-hmrc
Copy link

@leekowalkowski-hmrc leekowalkowski-hmrc commented Oct 17, 2018

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

@glenjamin
Copy link

@glenjamin glenjamin commented Oct 19, 2018

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
Copy link
Member

@36degrees 36degrees commented Oct 19, 2018

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
Copy link

@mgilgar mgilgar commented Nov 29, 2018

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
Copy link

@edwardhorsford edwardhorsford commented Feb 28, 2019

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.

@tomwrightgov
Copy link

@tomwrightgov tomwrightgov commented Feb 28, 2019

Wow, there is a lot of different styles in use out there in .gov sites.

My personal preference is for the ‘blog.gov.uk’ style. Labelling the links ‘Previous page’ and ‘Next Page’ is a lot more obvious then ‘Prev’ and ‘Next’ especially for screen readers.
Listing links to the surrounding page numbers with additional links to the first and last page is also a nice touch.
My guess is that this component can straight from the blogging engine and so is widely used outside .gov.

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?

@leekowalkowski-hmrc
Copy link

@leekowalkowski-hmrc leekowalkowski-hmrc commented Mar 1, 2019

Well, the word 'items' isn't a geat choice of content, so I don't know if the user would care. In the Government Gateway's group management, we have 'Showing 21-30 of 100 team members' and I think yes, a group administrator could care how many team members were in the group (or matched their search criteria).

@mtallamy
Copy link

@mtallamy mtallamy commented Jun 21, 2019

I thought I'd offer some feedback we received during private beta for our service. Our page closely follows the first example given at the top of this page, i.e. https://home-office-digital-patterns.herokuapp.com/components/pagination. In addition to further filtering, we've been asked by some of our users to add 'first' and 'last' page links alongside the 'previous' and 'next' links to help traversing larger data sets.

@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Feb 15, 2021

We’ve just added pagination to our service - which is a modified form of the MOJ pagination. See our PR adding it.

What it looks like:
Screenshot 2021-02-15 at 15 06 48

Changes from the MOJ one:

  • Add aria-label to the nav, removing the paragraph.
  • Include the page number (page x of y) in the page title if pagination is visible.

Some other implementation details:

  • The pagination is all driven from the query string - so &page=4 will take you to page 4.
  • If you attempt to load a page out of bounds, we redirect you to page 1.
  • Any change to filters on the page will reset the pagination.
  • We're starting with a page size of 100, but will evaluate this in the future and whether we need it configurable (I hope we don't).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet