patternsUI/UX reference

Pagination or infinite scroll?

Choose based on whether users need a place they can return to or a continuous feed.

Recommendation

Prefer pagination for focused searches and revisiting result pages. Split the list only when it improves usability or performance.

Problem

A long result list is slow to load or hard to navigate.

Use pagination when

  • Users need result pages they can link to, share, or revisit.
  • Loading the whole collection is too slow, or most users need only the first few pages.

Pagination and scrolling mistakes to avoid

  • Splitting a manageable list just because it extends beyond one screen.
  • Using infinite scroll by default, or making the footer and earlier results hard to reach.
  • Assuming page numbers alone preserve a position when the query, ordering, or underlying results change.

Example

Example search results

Page 1 · Results 1–10 of 30

In a production results page, use real links with query parameters. These buttons demonstrate local paging.

Implementation

  1. Use real links for result pages with URLs. Preserve the query, sort, and filters; apply sorting and filtering to the whole result set and return to the first page when they change.
  2. Label the pagination navigation, give numbered links names such as Page 2, and mark the current page visually and with aria-current="page".
  3. Include the page number in the document title. Keep the controls manageable on small screens and omit pagination when there is only one page.
  4. For Load more, provide a logical route into the newly added items. Moving focus to the first new item can help when they are inserted before the button; keeping focus on the button is not a universal rule.
  5. Expose dynamic loading or result-count messages to assistive technology, for example with role="status". Announce a concise summary, not the entire result list, and restore loaded content and position on return.

Tradeoffs

Pagination interrupts scanning but provides page destinations. Infinite scroll supports continuous browsing but needs careful keyboard access, loading, and recovery behavior. Load more gives users control over when the list grows. All three need deliberate state restoration.

Verification

Can users open a result, go back, and resume at the same place? With a keyboard and screen reader, can they reach new items, identify their position, and leave the results?

References

Related patterns