Pagination is used to divide related content such as images, articles or comments into smaller groups or pages. This pattern allows you not only to visit the previous and next page, but also jump between all the other pages you like
- Normally, pagination is applied if there are more than 25 items displayed. The default amount of visible content will vary depending on the context.
- The size of the pagination components depends on the basic type size used, which can adapt to the viewport width in question. As such, the size of the components is flexible.
- Clearly identify which page the user is on by displaying the current page number. By providing context into how many pages there are in total (eg. 1 of 4 pages), you can help provide clarity around the data displayed.
- Previous and next chevrons or links are the most useful way for the user to move forward or backward through pages of data.
- Placement of pagination is really important from a usability point of view. Generally you can find it at the bottom of the page, but for longer pages you should provide it at top and at bottom. Using two redundant pagination components reduces the chance of missing this interface element and gives the user more flexibility in reaching the controls easily.
- Selected state and actions should be properly visible. Current selected state and actions (Next, Previous buttons etc.) should be clearly visible to users.
Examples of pagination used on Daimler
Designs of the Pagination component are available for Sketch and integrated in the Daimler Design Kit. You can either copy paste them into your designs or use the Sketch file as a linked library and import the symbols.
See the Sketch Design Kit