Register
Quick and easy! Create patterns and join discussions on draft patterns! Go here to RegisterLogin
Already a member? Go here to Login now.Browse Patterns
Top Rated Patterns
The OSDPL is a Fluid project
Contact Us
Contact Us
Item Pagination
Design Problem
The user needs to view a large set of data that cannot easily be displayed in one chunk.
Solution
- Break up the data into manageable chunks and display each chunk on a page.
- Give the user a way to quickly and easily navigate back and forth between pages.
- Provide links to jump to the first and last pages in the set.
- Disable the first and last page links when the user is on the first or last page.
- Clearly indicate the number of pages available to the user.
- Clearly indicate the current page the user is viewing.
- If you are chunking form data, validate form fields before allowing the user to navigate to the next or previous page.
- If you are chunking form data, maintain the user's changes until the user has explicitly chosen to Save or Cancel the changes.
- Display the navigation links to the user even when they are unavailable.
Source: Flickr
Use When
- You need to display more information than can comfortably fit in one chunk.
- You have a large set of data that needs to be displayed in a specific order.
How
Todo.
Rationale
By breaking up the data into manageable chunks, you are effectively simplifying the interface for the user.
Accessibility Considerations
Item pagination can improve the accessibility of content provided the controls are accessible.
- Place the item pagination component near the top of the page or provide a clearly documented "skip to" link to it. This allows the user to access the item paginator without requiring them to go through the entire page.
- Ensure a user with a vision disability can determine the outcome of using a control. This can be accomplished by declaring a title attribute for each control describing the control's action in context. If the controls are images, be sure to use descriptive alt and title attributes.
- Ensure the controls can be activated using the keyboard.
- To increase the usefulness of this pattern, consider using the title attribute to include the number of elements displayed when "next" is activated by the user. Example: "Display the next 50 hits".
Post new comment