Pagination
Last updated: September 11, 2015 at 22:45 pm

The method by which users can change where they are in a continuum of multi-page content (such as search results).


Visual example of the element:


What problem does this element or pattern solve?
Navigation between pages needs to serve several functions for the end user: give the user context as to where they are in the navigation continuum, allow them to change pages quickly and easily, tell the user that they are able to do so, and take up as little space as possible while still being visible and easy to use.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Most important question: Are you going to use pagination, or will your site incorporate endless scrolling (an interaction which continually loads additional results or content as the user continues to scroll)?
  • If you opt for traditional pagination, where will the controls be positioned? Above the content, below it, or in both locations?
  • Will you show all available page numbers? If not, what are the range breaks?
  • Will you include page numbers or only previous and next controls? Will you include a link to the first and last pages?
  • What is the visual stying for the page numbers? You should define the normal, active, and hover states.
  • Should you include an additional “current item count” indicator, such as “showing Items 20-29 of 310?”
  • Will you include a “skip to page xx” control which permits users to use a text box to enter a specific page number?



Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:
This element or pattern may also be known as:
page numbers, previous next, enumeration, multipage navigation
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply