Pagination allows to divide large amounts of content into smaller chunks across multiple pages.
Use it when you have a lot of content in a list or a table to display and there is no issue if there not in the same page.
Pagination can be used to present lists that contain specific items a user may need to find in order to complete their task or to navigate lists that can be sorted and/or filtered.
You can use both pagination and infinite scroll to segment results depending on the user's task.
Prefer infinite scroll in those cases:
Present lists with content that updates frequently or to navigate lists when there is no sort/filter functionality.
Lists that only have a search function should use infinite scroll.
Actual page: Indicate clearly the page where the user is.
List of pages: The list and link to the different pages.
Truncation: If there is to much page to display on the list, this indicate that there are more pages.
Go to next/previous page: Allow the user to jump to the next or previous pages.
Number of items: The number of items display per page.
Total items display on the screen compared to the totality: Show where the user is in relation to the number of items.
Go to next/previous page: Allow the user to jump to the next or previous pages.
This type of pagination is used for textual contents, pictures, ...
This type of pagination is used on table. It offers control among items on the table.
Place the pagination on the bottom of the content if the content fit the screen. If the content is bigger than the screen, place the pagination on the top and on the bottom of the content.
Identify the current page
Provide different ways to navigate across the pages
Show the number of pages
Use truncation when the number of pages can be display on the pagination component.
