Split the Contents of a Website with the Pagination Design Pattern
- 776 shares
- 4 years ago
Pagination is the process of splitting the contents of a website, or a section of contents from a website, into discrete pages. This user interface design pattern is used so site visitors are not overwhelmed by a mass of data on one page.
Pagination has a broad range of applications, and we see them almost everywhere in different forms. The most common use case is to split long lists (such as search results on Google and product listings on Amazon) or large data tables (for example, a list of blog posts on the WordPress dashboard).
In this video, Senior UX Consultant for the European Parliament and creative lead of Smashing Magazine, Vitaly Friedman, explains how to effectively implement pagination on complex data tables.
Reduces cognitive load: When users see a limited number of items on a page, they can focus on the information in front of them.
Easy to navigate: Pages offer “landmarks'' for people to navigate. For example, a user might recall that a particular entry in a list was on a specific page number. If the product offers sorted data, the page “numbers” can also hint at where to find a particular entry—for example, a specific date or price range.
Sets expectations: Users know precisely how large the data set is and how far they’ve reached.
Offers user control: If the design provides customization options, users can control how many pages they wish to see so that they can view more data in one go instead of clicking “Next” several times.
Search-engine friendly: Since each page is discrete, search engines index them separately, unlike other techniques such as infinite scrolling. While search engines can consider such pages as duplicates and penalize them, in most cases, the algorithms can identify that they are part of a series.
Supports continuity: Users can pick up from where they left off when a site splits data into manageable chunks.
It disrupts the user’s flow: Users only see a small portion of the information at a time. When they reach the end of the page, they have to break their workflow to navigate to the next page.
Requires multiple page loads: Pagination becomes tedious when the user needs to compare content across multiple pages.
Infinite scrolling is a design technique in which a page loads content as the user scrolls down, thus removing the need for pagination. Infinite scrolling is used on social media platforms and feeds where content has no definite structure or sorting order, allowing users to explore endlessly. It removes the friction of navigating back—users can simply scroll up. This is more apparent on mobile devices; infinite scrolling is both easy and intuitive.
Vitaly Friedman compares the two approaches, along with a more controlled version of infinite scrolling—the load more button.
Infinite scroll aims to keep people on a particular page. However, it poses usability issues.
Impossible to reach the footer: Footers usually offer useful links such as contact information and help resources. An infinite scroll makes this essential information impossible to reach.
Makes it hard to find content: If a user navigates away and returns to the infinite scrolling page, they return to the top and must start from scratch. One way to address this issue is to automatically change the page URL as the user scrolls to help the user retain their position on the page. Social media sites are notorious in this regard, as they load completely new content every time the page loads, which makes it extremely difficult to find a previous post.
Large page sizes and performance issues: As more content loads on the page, it becomes larger and heavier, which might cause the page to become slower. If a site tracks the user’s position on the screen, then every time it reloads the page, it will reload all the content the next time. This takes much longer to load than a site with pagination.
Scrolling fatigue: If users don’t see any end, they might get tired of scrolling and even get overwhelmed or frustrated.
Poorer search indexing: Since the page loads content dynamically, search engines might not index the content that loads later. To circumvent this issue, Google recommends a paginated version of an infinite scroll.
Pagination and infinite scroll have their advantages, challenges and use cases.
While infinite scrolling works well for free exploration, pagination is most useful when:
The user has a specific goal and wants to find content.
Content has more structure or can be sorted according to objective criteria. For example, an e-commerce store that allows users to filter products and sort them according to price.
As these examples indicate, there is no specific formula to decide whether to split content across pages or use infinite scroll, with or without a “Load More” option. What option designers choose depends on the users’ goals. Teams must always rely on user research and test their solutions with users.
Make the pagination options easy to find: For the most optimal experience, place the pagination options at the top and the end of the content. Maintain a consistent layout across pages for a smoother user experience.
Ensure the links are clickable: Since most pagination options are numbers, keeping text links will lead to small click areas. Add more space around the numbers and increase the click area to ensure easy navigation.
Where appropriate, offer customization and respect user choices. Give people options to view more (or less) than the default number of items on a page. Remember their preferences on the next page load so they don't have to set it every time manually.
Allow people to jump to the first and last pages.
Show the user’s current position.
Take the course UI Design Patterns for Successful Software for more design patterns.
Watch Vitaly Friedman’s Master Class Webinar, How to Create Complex Tables Users Love: A UI Designer's Guide, for more UI tips and best practices.
See Google’s recommendations in Pagination Best Practices for Google.
Jakob Nielsen shares his views on Users' Pagination Preferences and "View All".
See "Pagination 101" by Faruk Ateş, which includes clear instructions and several examples of good and bad pagination.
Pagination helps improve user experience by speeding up load times, as the page only needs to load a small section of content. Smaller content pieces are also more manageable and prevent users from getting overwhelmed. Further, people can quickly locate content and pick up from where they left off, as pages often have unique URLs that users can return to.
To learn more about the key factors of user experience, see this video:
User Experience: The Beginner’s Guide offers more tips on how to improve user experience.
Infinite scrolling and pagination are two different approaches to content navigation, each with its own set of advantages and drawbacks:
Infinite Scrolling
Pros:
Continuous Engagement: Offers a seamless experience, encouraging users to stay engaged by continuously presenting new content.
Ideal for Mobile: Works well on mobile devices where swiping is more intuitive than clicking.
Good for Discovery: Excellent for platforms where content discovery is more important than finding specific items, like social media feeds.
Cons:
Can Be Overwhelming: Constant new content can overwhelm users, making it hard to find specific information.
Difficult to Find Specific Items: Not suitable for tasks requiring users to locate or return to a specific point in the content.
Performance Issues: Infinite scrolling can lead to performance problems as more content gets loaded.
Pagination
Pros:
Structured Navigation: Offers a more organized approach, making it easier to find and return to specific content.
Less Memory Intensive: Consumes less memory and processing power, as the page loads only a limited amount of content at a time.
Better for SEO: It is easier for search engines to crawl and index content.
Cons:
Interrupted Flow: Requires users to actively click to view more content, which can disrupt the browsing experience.
Limited Engagement: Users may explore less content in case of pagination than infinite scrolling.
Potential Clutter: Pagination controls can clutter the interface if not designed well.
The design pattern you implement depends on the users’ context and goals. Conduct sound user research and test your solutions to ensure an optimal experience.
Learn how to test your interfaces in the course Conducting Usability Testing.
Effective controls are crucial to enhance user navigation and experience. Here are some best practices:
Clear and Consistent Design: Ensure that pagination controls are consistent throughout the website or app. Use clear, recognizable symbols or text for navigation buttons like 'Next,' 'Previous,' and page numbers.
Clickable Area: Increase the clickable area around page numbers and navigation buttons. This improves usability, especially on mobile devices where precise tapping is more challenging.
Visible Current Page: Highlight the current page number distinctly so users can easily identify their position in the content sequence.
Limited Page Numbers: Avoid displaying too many page numbers at a time. Show a few pages near the current page and the first, last, and immediate previous and next pages. This approach reduces clutter and focuses user attention.
Keyboard Navigation: Include keyboard shortcuts for advanced users. This feature enhances accessibility and provides an alternative navigation method.
Responsive Design: Ensure pagination controls adapt to different screen sizes and orientations. On smaller screens, consider simplifying the controls.
Informative Labels: Use informative labels for navigation buttons. Labels like 'Next Page' or 'Previous Page' are more descriptive than arrows alone.
Feedback on Interaction: Provide immediate visual feedback when users interact with pagination controls, such as a change in button color or a loading indicator.
Accessibility: Make sure that pagination controls are accessible to all users, including those with disabilities. Use proper ARIA labels and roles.
The course UI Design Patterns for Successful Software details best practices for different design patterns.
For mobile devices, pagination should focus on user experience, considering the limited screen space and touch interaction. Here are key considerations and actionable tips:
Simplicity and Clarity: Use simple numerals for page numbers. Avoid complex structures like nested pages.
Touch-Friendly Design: Ensure that pagination buttons are large enough to be easily tapped. This reduces the risk of accidental clicks and enhances user accessibility.
Limited Page Numbers Displayed: Show only a few page numbers at a time, such as the current page, a few numbers before and after, and first/last pages. This approach keeps the interface clean and avoids overwhelming the user with too many choices.
Responsive Design: Ensure the pagination adapts to various screen sizes, maintaining usability across different devices.
Visual Feedback: Provide visual feedback when a page number is selected or when loading new content. This could be a simple color change or a loading animation.
Testing and Iteration: Regularly test the design with real users to identify pain points and areas for improvement.
Effective mobile pagination balances functionality, simplicity, and a seamless user experience. Follow these principles to ensure users can navigate content efficiently without frustration or confusion.
For more on designing great user experiences for mobile devices, see the IxDF course on Mobile UI Design.
Common pagination patterns in responsive design prioritize adaptability and usability across various devices. These patterns ensure that users have a consistent and efficient experience whether they access content on a desktop, tablet, or mobile device. Here are some widely used pagination patterns:
Traditional Numbered Pagination: This is the classic approach where pages are numbered sequentially. A responsive design adapts by showing fewer page numbers on smaller screens.
Prev/Next Buttons: Simple and minimal, this pattern only shows previous and next buttons. It's an effective solution for linear content navigation, especially when space is limited.
Condensed Pagination: This pattern displays only the essential elements, such as the current page, first, last, previous, and next pages. It's a space-saving solution that still provides necessary navigation options.
Dropdown Pagination: This involves selecting a page from a dropdown menu. While it saves space, it's less intuitive than other methods and can be cumbersome on mobile devices.
Segmented Button Pagination: This style uses segmented buttons for page numbers, providing a touch-friendly and visually clear method for page navigation.
Each pattern has advantages and trade-offs, and the choice depends on the type of content, the audience's needs, and the overall design strategy. When selecting the pagination pattern for responsive design, designers must consider factors like content length, user navigation habits, and device compatibility.
For more on the pagination design pattern, take the UI Design Patterns for Successful Software course.
Pagination directly impacts SEO and website performance.
It helps organize content efficiently, making it easier for search engines to crawl and index pages. This structured approach enhances user experience by reducing load times and improving site navigation. Additionally, pagination prevents duplicate content issues, which can negatively affect SEO.
From a performance standpoint, pagination reduces the content loaded on a single page. Thus, it decreases page load times and improves user experience. Faster load times help improve SEO rankings and user satisfaction.
UX designers must cater to end users and business stakeholders and, hence, must pay close attention to factors such as SEO.
In the course UX Management: Strategy and Tactics, Frank Spillers, CEO of Experience Dynamics, teaches how to handle these additional responsibilities as a design leader.
When designing pagination from an accessibility standpoint, you must ensure that all users, irrespective of their abilities, can navigate and use your website effectively.
Keyboard Navigation: Ensure that pagination controls are accessible via the keyboard. Users who rely on keyboards should be able to tab through pagination links easily.
Screen Reader Friendly: Clear and descriptive labels for pagination controls are crucial for screen reader users to understand the purpose of each link. For instance, instead of just "Next" or "Previous," use "Next page" or "Previous page."
Focus Indicators: Visible focus indicators are essential for users navigating via keyboard. Users should be able to identify which element has focus.
Adequate Contrast: Ensure that the pagination links have sufficient contrast against their background for users with visual impairments.
Large Clickable Areas: For users with motor impairments, having larger clickable areas for pagination links makes it easier to select them.
Avoid Automatic Pagination: Automatic pagination or "infinite scroll" can disorient some users, especially those using screen readers. If you use this feature, provide a way to pause or disable it.
Consistent Placement: Keep the pagination bar in a consistent location on every page. This predictability aids users with cognitive disabilities.
For a comprehensive look at accessibility, take the course Accessibility: How to Design for All.
A single-page application (SPA) dynamically rewrites a webpage with new data from the web server instead of loading new pages. SPAs load only a single page initially and then update the page with new content as the user interacts with it without reloading the page.
Here are some tips on how to handle pagination in an SPA:
Update the URL Appropriately: To keep the user experience intuitive, update the URL when navigating through pages. This allows users to bookmark and share specific pages.
Maintain Scroll Position: Maintain the scroll position when a user navigates to a previously visited page. This enhances user experience by not forcing them to scroll from the top every time.
Optimize for SEO: SPAs can be challenging for SEO, especially with dynamic content loading. To make your paginated content SEO-friendly, consider using server-side rendering (SSR) or pre-rendering for the pages. This ensures that search engines can crawl and index your paginated content effectively.
Implement Lazy Loading: Instead of loading all items simultaneously, use lazy loading to load data as the user scrolls to reduce initial load time and improve performance.
Provide a Loading Indicator: Display a loading indicator when the page loads new content to inform users that more content is coming.
Error Handling: Implement robust error handling. If the application fails to fetch data, inform the user and provide options to retry or navigate back.
Accessibility Considerations: Ensure that your application and page controls are accessible. This includes keyboard navigation, screen reader support and visible focus indicators.
Watch the Master Class Webinar Complex UI Design: Practical Techniques by Vitaly Friedman, senior UX consultant of the European Parliament and creative lead of Smashing Magazine, to dive into the intricacies of solving complex design problems.
The differences between numbered pagination and 'Load More' buttons are primarily in user experience (UX) design, functionality, and suitability for various contexts.
User Experience (UX):
Numbered Pagination: Offers a more traditional approach. It gives users a sense of location within the content and an overview of the total number of pages available. This is useful when users need to jump to specific pages or already understand the content's scale.
'Load More' Buttons: Create a seamless, continuous experience. They are often used when the user is interested in exploring rather than looking for specific items.
Functionality and Performance:
Numbered Pagination: This method loads a new page each time the user selects a page number. While it can be more resource-intensive, it's clearer for SEO indexing and can be faster to navigate for users looking for specific items.
'Load More' Buttons: They typically append new content to the existing page. This method is more efficient in terms of initial page load times, as fewer items are loaded upfront. However, it can lead to performance issues if the user loads more content as the page grows significantly over time.
Suitability:
Numbered Pagination: Ideal for structured data, such as search results or e-commerce sites, where users might have a clear goal and need to find specific items quickly.
'Load More' Buttons: Better suited for social media feeds, blogs, or galleries, where users are likely to browse content without a specific goal.
The choice between numbered pagination and 'Load More' buttons depends on the specific needs of your website and its users. Each method has its strengths and is suited to different types of content and user behaviors. Conduct user research to understand your users’ context to ensure your design decisions match their needs.
Designing pagination for large datasets involves balancing between user experience and technical efficiency. The key is to make the dataset easily navigable while ensuring the system's performance is not compromised. Here are some strategies:
Numbered Pagination with Limited Page Links: Display a limited number of page links at a time. For example, show the first few, last few, and adjacent pages to the current page. This approach prevents overwhelming users with too many choices and keeps the interface cleaner.
Search and Filter Options: Provide robust search and filter capabilities to allow users to find specific items within the dataset quickly. This is especially useful in datasets where users are likely to look for particular records.
Jump to Page Functionality: Offer an option for users to jump to a specific page. This is useful in scenarios where users are familiar with the dataset and know precisely where to go.
Progressive Loading Indicators: Use loading indicators to inform users that data is being loaded. This is important to set the right expectations and prevent confusion.
Responsive Design: Ensure the pagination design is responsive and works well across different devices and screen sizes.
Accessibility Considerations: Make pagination controls accessible with clear labels and keyboard navigability.
Watch Vitaly Friedman’s Master Class Webinar, How to Create Complex Tables Users Love: A UI Designer's Guide, for more on working with large datasets.
Implementing pagination in e-commerce sites presents several challenges that need careful consideration to balance user experience (UX) with technical efficiency:
User Navigation and Experience: Users can get lost in a sea of pages. Numbered pagination, 'Load More' buttons, and infinite scrolling have pros and cons. The key is to choose the method that aligns best with your users' shopping behavior.
Performance Optimization: Large data sets (such as inventories) can slow down a site. Efficient server-side processing, optimized database queries, and effective use of caching are essential to maintain performance while implementing pagination.
Mobile Responsiveness: With a significant portion of e-commerce traffic coming from mobile devices, ensure that the pagination design is responsive and easy to use on smaller screens.
Accessibility: Ensure your design includes keyboard navigability, screen reader compatibility, and clear visual cues.
For more on balancing the different aspects of user experience, see this article, Usability: A part of the User Experience.
Indicating the current page in pagination is crucial for providing a clear and intuitive navigation experience. Here are some of the best ways to achieve this:
Highlight the Current Page Number: Visually distinguish the current page number from the others; you can use a different color, font weight, or background. This visual cue immediately informs users where they are in the sequence of pages.
Disable Clickability of the Current Page Number: Make the current page number non-clickable to avoid confusion and reinforce the idea that the user is currently viewing this page.
Use Breadcrumbs: In addition to pagination, implement breadcrumbs that reflect the current page. This is especially useful in e-commerce sites where users might navigate through various categories and subcategories.
Adequate Spacing and Size: Ensure the page numbers are adequately spaced and sized for easy interaction, especially on touch devices. The current page should be easy to identify, even on smaller screens.
Tool Tips: Consider using tooltips when a user hovers over a page number. For the current page, the tooltip can indicate that it's the page being viewed.
Contrast and Legibility: Ensure high contrast and legibility for the current page indicator. Users should be able to identify it at a glance without straining.
These strategies will help users understand their current position within a set of pages, enhancing the overall usability of your site. The underlying principles behind these best practices are common to most UI-related decisions. Learn more about these general rules of thumb—heuristics—in this video by William Hudson, CEO of Syntagm.
For more on heuristic evaluation and examples, see this article, User Interface Design Guidelines: 10 Rules of Thumb.
Here are some of the pitfalls to avoid when you implement pagination:
Inconsistent pagination can confuse users and disrupt their navigation flow.
Too many page links can overwhelm users. Instead, limit the number of visible page links and provide 'Next' and 'Previous' buttons for easier navigation.
Mobile users should find it easy to tap on pagination links without zooming in or struggling with small touch targets.
Page controls should be accessible to everyone, including users with disabilities. Ensure keyboard navigability and proper screen reader support.
Users should always know which page they are on. The current page should be clearly highlighted and not clickable.
If a user clicks on an item and then goes back, they should return to the same spot in the pagination. Not saving the user's state can lead to frustration and a poor experience.
Avoid these common mistakes for more user-friendly and efficient design. Enroll in the UI Design Patterns for Successful Software course for more on this design pattern.
Do you want to improve your UX / UI Design skills? Join us now
You earned your gift with a perfect score! Let us send it to you.
We’ve emailed your gift to name@email.com.
Do you want to improve your UX / UI Design skills? Join us now
Here’s the entire UX literature on Pagination by the Interaction Design Foundation, collated in one place:
Take a deep dive into Pagination with our course UI Design Patterns for Successful Software .
Have you ever found yourself spotting shapes in the clouds? That is because people are hard-wired to recognize patterns, even when there are none. It’s the same reason that we often think we know where to click when first experiencing a website—and get frustrated if things aren’t where we think they should be. Choosing the right user interface design pattern is crucial to taking advantage of this natural pattern-spotting, and this course will teach you how to do just that.
User interface design patterns are the means by which structure and order can gel together to make powerful user experiences. Structure and order are also a user’s best friends, and along with the fact that old habits die hard (especially on the web), it is essential that designers consider user interfaces very carefully before they set the final design in stone. Products should consist of such good interactions that users don’t even notice how they got from point A to point B. Failing to do so can lead to user interfaces that are difficult or confusing to navigate, requiring the user to spend an unreasonable amount of time decoding the display—and just a few seconds too many can be “unreasonable”—rather than fulfilling their original aims and objectives.
While the focus is on the practical application of user interface design patterns, by the end of the course you will also be familiar with current terminology used in the design of user interfaces, and many of the key concepts under discussion. This should help put you ahead of the pack and furnish you with the knowledge necessary to advance beyond your competitors.
So, if you are struggling to decide which user interface design pattern is best, and how you can achieve maximum usability through implementing it, then step no further. This course will equip you with the knowledge necessary to select the most appropriate display methods and solve common design problems affecting existing user interfaces.
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!