Pagination Design Pattern
Problem Summary
User needs a way of displaying a long list or table of items in manageable pages and viewing one page at a time.
Solution
Solution Image
Use When
- Displaying a long list of sorted items in multiple pages, and you want to allow the users to jump to other pages (very first and last pages, immediate neighbor pages, as well as the pages in the middle) with ease.
- You want to let the user select the number of items to display on one page.
- You want to let the user know where they are in the list and how long the list is.
How
Design Advice |
Taken care of by Fluid Pager component? |
|---|---|
Provide a list of pages as links. Always include 1 and the last page number in the list. Indicate the last page with "(last)". |
|
The number of the currently active page should have a different styling than the other numbers to indicate that it is the current page. A good way to do this is to make it text, not a link (since the user is already on the page and should in most cases not need to navigate to it), and to give it a different and more strong color (e.g. black) from the rest of the page links. |
|
When the user is on the first page, the "< Previous" link should be inactive, and when the user is on the last page the "Next >" link should be inactive. Since these links never indicate a current location (as the current page does), a good way to do this is usually to make these items text, not links, and to make them gray. |
|
Provide links to pages in the middle if the entire list of pages cannot be shown at once. Use increments of 5, 10, or 20, depending on the size of the entire list and the screen space available. This is in order to display the page link scale that spans the entire list, rather than for example, the first 10 pages, to provide easier access to the pages in the middle. |
|
When the user bring the cursor over a page link, a Tool Tip* is displayed immediately.
|
|
When the user clicks on or presses enter on a page link, load the page. |
|
This is equivalent to the mouse "click" action. Load the selected page right away. |
|
Provide a dropdown box to display the options for the number of items per page. The options are 10, 20, 50, 100, 200, and See all. The See all option is optional, and the integrator may decide to include it or not, depending on their server performance and needs. |
|
Upon mouse-over or press the up/down arrow keys to select the desired option. Click or press Enter to select it. Page reloads with the selected number of items per page, with the first item on the previous page displayed in the page. |
|
* Tool Tip: The alt text displays the sorted metada of the first and last items in the particular page in focus.
|
Key |
|---|---|
|
Completely taken care of by Fluid component |
|
Must be configured within Fluid component |
|
Not taken care of by Fluid component |
Rationale
- Displaying the pages as text links in one line is a convention often seen around the Web. It is assumed the user can comprehend what the numbers are the page numbers.
- The page number corresponds to the current page is displayed as read-only, because there is no need for it to be a link.
- Displaying the alt text to show what is on the page prior to clicking helps reduce the number of clicks to get to the item the user wants
- Displaying the entire scale of the pages give the user the sense of how long the list is and where they are within the list.
- The number 1 being the first page is obvious, hence no additional text is needed to signify the first page. The word "last" was put after the last page number to explicitly tell the user where the list ends.
- "<previous" and "next>" links are displayed side-by-side to make traversing between pages easier when the user needs to traverse the list page-by-page . Conventionally these buttons are placed around the page scale. This often confuses the user as to whether the next (or previous) button brings the immediate page next (previous) to the current page or the next (previous) set of pages in the scale. Separating these buttons from the page scale and placing them side by side makes it more intuitive and easier for the user to go back and forth between pages.
- The user is given the option to change the number of items to display per page, because their preference vary depending on their browser window size, text size, personal preference, type of data, number of data.
- The user's preference on the page size is remembered by the system, because it is likely the user will need the same setting for the particular tool the next time they visit.
- In addition to the page links, the "n-m of x items" display lets the user know where they are in the list and how many items there are in total. The total number of items (rather than the total number of pages) is of interest especially when the total number is important (e.g. roster).
Accessibility
Examples
Related Fluid Components
Related Information
-
Inline Edit Design Pattern (Fluid)
-
-
Pagination Design Pattern (Fluid)
-
Design Patterns (Fluid)
-
-
-
-
Upload Design Pattern (Fluid)
-
-
Pattern Suggestions (Fluid)