User needs a way of displaying a long list or table of items in manageable pages and viewing one page at a time.
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 |
