Join us

Pagination

Your constantly-updated definition of Pagination and collection of videos and articles. Be a conversation starter: Share this page and inspire others!
88 shares

What is Pagination?

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.

Table of contents
  1. What is Pagination?
  2. How to Effectively Implement Pagination
  3. Advantages of Pagination
  4. Disadvantages of Pagination
  5. Pagination vs Infinite Scrolling vs Load More—Which One is the Best?
  6. How to Choose between Pagination and Infinite Scroll
  7. Best Practices to Implement Pagination
  8. Learn More about Pagination
  9. Questions related to Pagination

How to Effectively Implement Pagination

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.

Show Hide video transcript
  1. 00:00:00 --> 00:00:30

    One thing you absolutely need to have with pagination is to allow people to do three things. First, they need to be able to obviously move comfortably within the available pages. So that means either select dropdown or just a list of links where they can navigate to a specific page. That's one thing that's very important. Also, jumping to the last page usually can be quite important as well. The second thing that they need is to see to be able to select how many items they want to see on a given page. That's quite significant, even although it might be hundreds.

  2. 00:00:30 --> 00:01:01

    Some people need that because they want to quickly search through the selection. This is quite important. And third thing that's also quite useful whenever you get this list of pagination links like from one to, I don't know, 25, what you ultimately want to try to do, and I should have mentioned that is to think about what people are sorting by. So if there is nothing that they're sorting it by then you just keep it as is. But if they're sorting it by a particular attribute, a particular column, you might want to surface the information about the value of that thing

  3. 00:01:01 --> 00:01:30

    that people are sorting by underneath each pagination. So they understand where they're going to jump because nobody really wants to jump to page 12 because it's so random. But if you give them sort of a hint, what expects them on page 12 by giving sort of a hint at the bottom, like if they're sorting by price, you can put something like 315 as a batch underneath. That's super helpful. So three things allow them to navigate four pages, allow them to select how many, how many items they want to see on a given page

  4. 00:01:30 --> 00:01:33

    and allow them to provide them some hints about what expecting them they're.

Advantages of Pagination

  1. Reduces cognitive load: When users see a limited number of items on a page, they can focus on the information in front of them.

  2. 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.

    Letters instead of numbers for alphabetical lists can help users find content more easily.

    © Interaction Design Foundation, CC BY-SA 4.0

  3. Sets expectations: Users know precisely how large the data set is and how far they’ve reached. 

    Pagination wireframe showing current page number.

    © Interaction Design Foundation, CC BY-SA 4.0

    In addition to showing which page number the user is on, WordPress offers an input field that allows users to jump to specific pages instead of relying on just the arrows to move forward or backward incrementally.

    © WordPress.org, Fair Use

  4. 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.

    Wireframe of pagination showing a dropdown menu to select number of items to view on the page.

    © Interaction Design Foundation, CC BY-SA 4.0

    Mailchimp’s Audience page allows users to customize how many contacts they want to view in one go.

    © Mailchimp, Fair Use

  5. 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.  

  6. Supports continuity: Users can pick up from where they left off when a site splits data into manageable chunks.

Disadvantages of Pagination

  1. 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.

  2. Requires multiple page loads: Pagination becomes tedious when the user needs to compare content across multiple pages.

    Wireframe of e-commerce product list with pagination at the bottom.

    E-commerce sites typically offer pagination at the end of the product listing. If users want to go back to previous pages, they must either use the browser’s back button or reload the page.

    © Interaction Design Foundation, CC BY-SA 4.0

Pagination vs Infinite Scrolling vs Load More—Which One is the Best?

© Interaction Design Foundation, CC BY-SA 4.0

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.

Show Hide video transcript
  1. 00:00:00 --> 00:00:32

    What you definitely need to avoid is that people are waiting for infinite scroll to load because if you need to, if your user needs to wait for more than like one second, that's a disaster. If they need to wait for more than 500 seconds problematic. If they need to wait for less than 300 seconds, that's fine. So you can use the infinite scroll if you need to. Right? There are problems with different scroll that people just don't have control about that stream of information that's coming their way. So if you do have infinite scroll, think about changing the URL as they keep scrolling or maybe have a button saying

  2. 00:00:32 --> 00:01:01

    “save and continue later” so they can continue navigating the table with the left off. But then whatever new items get, then dynamically load it in its display, then on top of that new list. So that's messy and a bit complicated. But in general, I would say Influence scroll can work. There are a lot of accessibility issues you need to fix, though it's really not easy to do. It's really not easy to do. It might be better with something like a lot more button,

  3. 00:01:01 --> 00:01:17

    but in terms of exploring and exposing people to items, to products, to content, a lot more does work. Right. I would say the most reliable thing is pagination, but it's again, also the slowest mode of interaction here.

Infinite scroll aims to keep people on a particular page. However, it poses usability issues.

  1. 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.

  2. 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.

  3. 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. 

  4. Scrolling fatigue: If users don’t see any end, they might get tired of scrolling and even get overwhelmed or frustrated.

  5. 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.

How to Choose between Pagination and 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.

Adidas's shop allows users to sort through products and splits the results across several pages. A smaller list of products helps them focus more on the products and prevents analysis paralysis.

© Adidas, Fair Use

ESPN's "Show More" link works for its users because they will likely be on the page to explore without any task or objective. However, since this is a large table filled with numbers, it is impossible to tell what these numbers mean because the headers are off the page.

© ESPN, Fair Use

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.

Best Practices to Implement Pagination

  1. 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.

  2. 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.

    Google's creative use of its logo to show page numbers looks interesting but is harder to use because of how close each number is. Google has stopped using this visualization and switched over to infinite scrolling.

    © Google, Fair Use

  3. 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.

  4. Allow people to jump to the first and last pages.

  5. Show the user’s current position.

    It is no accident that many pagination examples show numbers in boxes—they indicate the large area people can click on to navigate easily. The pagination on IxDF's website highlights the current page through a colored background.

    © Interaction Design Foundation, CC BY-SA 4.0

Learn More about Pagination

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.

How does pagination improve user experience in a website or app?

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:

Show Hide video transcript
  1. 00:00:00 --> 00:00:30

    User experience, or UX, is critical to a product's  success or failure. But what do we mean by *UX*? All too often, we confuse UX with usability, but they aren't the same thing. To understand the difference between UX and usability, let's look at a framework described by UX pioneer Peter Morville.

  2. 00:00:30 --> 00:01:01

    Morville describes the seven factors of UX as: useful, usable, findable, credible, desirable, accessible, and valuable. The first factor of user experience is *useful*. A product must have a purpose. If a product has no purpose, it's unlikely  to compete in a market full of purposeful and useful products. For example, an email app  should help people communicate with one another.

  3. 00:01:01 --> 00:01:32

    An email app that doesn't let you send  messages isn't useful. Usefulness is *subjective*. We may call a product 'useful' if it's fun or has  aesthetic appeal. So, a game such as Candy Crush may be deemed useful even if it doesn't enable you to accomplish a goal. *Usability* is about enabling your users to effectively and efficiently achieve their objectives. Products that are not usable are not likely to succeed.

  4. 00:01:32 --> 00:02:00

    Besides giving your product a competitive advantage, a high level of usability can also make a huge difference in  the safety and comfort of use. For example, when you purchase an airline ticket, Expedia's website allows you to compare different flights. You may also view the details of a selected flight to make an informed and comfortable decision and – more importantly – you're less likely to  accidentally book a flight in the wrong direction!

  5. 00:02:00 --> 00:02:30

    *Findability* refers to how well a product supports  navigation and finding objects. For example, a website that makes it easy to navigate to the  right content has high findability. A streaming service with millions of choices such as Netflix  is a great example of designing for findability. If Netflix users can't find something to watch  on a Friday night, it doesn't matter how great the hidden content is – they'll stop using it.

  6. 00:02:30 --> 00:03:03

    *Credibility* relates to the user's trust in the product. It's nearly impossible to deliver a good user experience if users think the product is untrustworthy or illegitimate. They'll take their business elsewhere. For example, between 2018 and 2021 a series of scandals hit Meta, formerly Facebook. From privacy abuse to purposefully hiding  research that proved Instagram was harmful to a large user base, particularly teenage girls,

  7. 00:03:03 --> 00:03:30

    each revelation damaged the company's reputation. Even as governments slapped fines and tightened  regulations around privacy, Meta's own leaked internal research revealed that the company  was rapidly losing users to other platforms. Emotions play a large role in desirability, which is conveyed through design, imagery, brand identity, and emotional design.

  8. 00:03:30 --> 00:04:03

    The more desirable a product, the more your customers will want to use and recommend it to their friends. Airbnb does a great job of creating a desirable  experience. The app turns a stranger's home into a desirable vacation destination that people are willing to explore and recommend. *Accessibility* is about providing an experience  that users of a full range of abilities can access. This includes ensuring people who have some form of disability,

  9. 00:04:03 --> 00:04:31

    audio, visual, motor or cognitive, can interact with your product without difficulty. An accessible interface uses colors that colorblind people can see, legible text, even for people with low vision, and so on. Sadly, accessibility often gets lost when we create  user experiences. Some companies may feel that accessibility is a waste of resources because it represents a small portion of their users.

  10. 00:04:31 --> 00:05:03

    However, when you design for accessibility you create products that are easier for *everyone* to use, not just those with disabilities. It's the ethical thing to do, and in some jurisdictions it's the law. Finally, the product must deliver *value* to the  business that creates it and the customer who uses it. Without value, it's likely that your  product's success will eventually be undermined. A product can provide value to  different users in different ways.

  11. 00:05:03 --> 00:05:17

    For some users, desirability is more important; for others, accessibility is more important. Essentially, value is the *sum* of all the  different user experience factors combined.

User Experience: The Beginner’s Guide offers more tips on how to improve user experience.

Infinite scrolling vs. pagination: What are the pros and cons of each?

Infinite scrolling and pagination are two different approaches to content navigation, each with its own set of advantages and drawbacks:

Infinite Scrolling

Pros:

  1. Continuous Engagement: Offers a seamless experience, encouraging users to stay engaged by continuously presenting new content.

  2. Ideal for Mobile: Works well on mobile devices where swiping is more intuitive than clicking.

  3. Good for Discovery: Excellent for platforms where content discovery is more important than finding specific items, like social media feeds.

Cons:

  1. Can Be Overwhelming: Constant new content can overwhelm users, making it hard to find specific information.

  2. Difficult to Find Specific Items: Not suitable for tasks requiring users to locate or return to a specific point in the content.

  3. Performance Issues: Infinite scrolling can lead to performance problems as more content gets loaded.

Pagination

Pros:

  1. Structured Navigation: Offers a more organized approach, making it easier to find and return to specific content.

  2. Less Memory Intensive: Consumes less memory and processing power, as the page loads only a limited amount of content at a time.

  3. Better for SEO: It is easier for search engines to crawl and index content.

Cons:

  1. Interrupted Flow: Requires users to actively click to view more content, which can disrupt the browsing experience.

  2. Limited Engagement: Users may explore less content in case of pagination than infinite scrolling.

  3. 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.

Show Hide video transcript
  1. 00:00:00 --> 00:00:31

    When you create something, you design something,  you need to know if it works for your users. And you need to get that design in front of them. And the only way that you can make sure that it meets their expectations is to have them actually *play with it*. Usability testing is *the number one* technique for determining how usable your product is. We want to see how *successful* our users are, see if they're on the right track and if we're getting the reactions that we *want* from a design.

  2. 00:00:31 --> 00:01:04

    'Ah... I'm not really sure what the users will think!'  *Better test it.* 'Uh... too much fighting with our team internally over what to do!' *Better test it!* Usability testing helps you check in with your user expectations. And it's a way of you making  sure that you're not just stuck in your own ideas about a design and actually bringing in an  end-user from the outside to get some *more clarity and focus*. And the reason why this class is going to  help you is you'll benefit from the 15 years of my

  3. 00:01:04 --> 00:01:32

    personal experience and *hundreds and hundreds of  usability tests* that I've conducted over the years. We're going to start from the very beginning of  *how to create a test plan and recruit participants*, and then go into *moderation skills, tips and techniques*. You'll also learn *how to report on tests* so you can take that data and represent it in a way that makes sense, you can communicate to your team and learn how to *change your design based on the data that you get from usability tests*,

  4. 00:01:32 --> 00:01:36

    most importantly. I hope you can join me on this class. I look forward to working with you!

Learn how to test your interfaces in the course Conducting Usability Testing.

What are the best practices for designing pagination controls?

Effective controls are crucial to enhance user navigation and experience. Here are some best practices:

  1. 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.

  2. 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.

  3. Visible Current Page: Highlight the current page number distinctly so users can easily identify their position in the content sequence.

  4. 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.

  5. Keyboard Navigation: Include keyboard shortcuts for advanced users. This feature enhances accessibility and provides an alternative navigation method.

  6. Responsive Design: Ensure pagination controls adapt to different screen sizes and orientations. On smaller screens, consider simplifying the controls.

  7. Informative Labels: Use informative labels for navigation buttons. Labels like 'Next Page' or 'Previous Page' are more descriptive than arrows alone.

  8. Feedback on Interaction: Provide immediate visual feedback when users interact with pagination controls, such as a change in button color or a loading indicator.

  9. 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.

How should pagination be implemented for mobile devices?

For mobile devices, pagination should focus on user experience, considering the limited screen space and touch interaction. Here are key considerations and actionable tips:

  1. Simplicity and Clarity: Use simple numerals for page numbers. Avoid complex structures like nested pages.

  2. 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.

  3. 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.

  4. Responsive Design: Ensure the pagination adapts to various screen sizes, maintaining usability across different devices.

  5. 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.

  6. 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.

Show Hide video transcript
  1. 00:00:00 --> 00:00:30

    Learn mobile UI design from a fresh perspective. Okay, we're done playing around. This is a design language. Secrets, patterns, frameworks. Big affordances, big tappable... And also the visual of: “Is it on?” Inspiring stories based on professional experience. Don't distract them because they might get hit by a bus. Invaluable advice and portfolio building exercises. And it's based on usability. It's based on strong UX principles. Make your users happy,

  2. 00:00:30 --> 00:00:36

    learn to craft intuitive mobile user interfaces. Hey, you can click on me, that kind of thing.

What are common pagination patterns in responsive 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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

How does pagination affect SEO and website performance?

Pagination directly impacts SEO and website performance.

  1. 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.

  2. 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.

Show Hide video transcript
  1. 00:00:00 --> 00:00:31

    One of the biggest problems with UX managing is not understanding what UX is and what UX teams are. So, some common UX roles that you should  be familiar with – and that's kind of more of like an org chart and also like a process of  management and leadership all the way down to – you know – the colors: colors, buttons, wireframe, user needs, leading that process, managing that whole process, directing that entire team and their processes and then directing an entire vision.

  2. 00:00:31 --> 00:01:01

    And that's essentially, in a  *happy* world, what you would see with UX roles. The reality is that most organizations  have visual designers, or it's a UX designer. Rarely do organizations bring in a user  researcher. That's often later on. We think it should be *earlier on* because it's one of the key  differentiators for UX maturity. In the industry, there's a lack of UX leadership and a lack of  UX process, typically.

  3. 00:01:01 --> 00:01:30

    UX is not having a strong and sustainable position in the organization. There's a lack of *support* from the business. So, it's not a pretty picture out there! So, this class is all about *user experience management*. And the idea here is that you want to improve either your position in a company or the position of your team or the position of your entire company because user experience is that broad.

What are the accessibility considerations for pagination?

When designing pagination from an accessibility standpoint, you must ensure that all users, irrespective of their abilities, can navigate and use your website effectively.

  1. 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.

  2. 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."

  3. Focus Indicators: Visible focus indicators are essential for users navigating via keyboard. Users should be able to identify which element has focus.

  4. Adequate Contrast: Ensure that the pagination links have sufficient contrast against their background for users with visual impairments.

  5. Large Clickable Areas: For users with motor impairments, having larger clickable areas for pagination links makes it easier to select them.

  6. 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.

  7. 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.

How can you handle pagination in a single-page application (SPA)?

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. Provide a Loading Indicator: Display a loading indicator when the page loads new content to inform users that more content is coming.

  6. Error Handling: Implement robust error handling. If the application fails to fetch data, inform the user and provide options to retry or navigate back.

  7. 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.

What are the differences between numbered pagination and 'Load More' buttons?

The differences between numbered pagination and 'Load More' buttons are primarily in user experience (UX) design, functionality, and suitability for various contexts.

  1. 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.

  2. 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.

  3. 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.

Show Hide video transcript
  1. 00:00:00 --> 00:00:33

    When developing a product or service, it is *essential*   to know what problem we are solving for our users. But as designers, we all too easily shift far away from their perspective. Simply put, we forget that *we are not our users*. User research is how we understand what our users *want*, and it helps us design products and services that are *relevant* to people. User research can help you inspire your design,

  2. 00:00:33 --> 00:01:00

    evaluate your solutions and measure your impact by placing people at the center of your design process. And this is why user research should be a *pillar* of any design strategy. This course will teach you *why* you should conduct user research and *how* it can fit into different work processes. You'll learn to understand your target audience's needs and involve your stakeholders.

  3. 00:01:00 --> 00:01:37

    We'll look at the most common research techniques, such as semi-structured interviews and contextual inquiry. And we'll learn how to conduct observational studies to  *really understand what your target users need*. This course will be helpful for you whether  you're just starting out in UX or looking to advance your UX career with additional research techniques. By the end of the course, you'll have an industry-recognized certificate – trusted by leading companies worldwide. More importantly, you'll master *in-demand research skills* that you can start applying to your projects straight away

  4. 00:01:37 --> 00:01:44

    and confidently present your research to clients and employers alike. Are you ready? Let's get started!

Enroll in this course.

How can pagination be designed to support large datasets?

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. Responsive Design: Ensure the pagination design is responsive and works well across different devices and screen sizes.

  6. 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.

What are the challenges of implementing pagination in e-commerce sites?

Implementing pagination in e-commerce sites presents several challenges that need careful consideration to balance user experience (UX) with technical efficiency:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

What are the best ways to indicate the current page in pagination?

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

Show Hide video transcript
  1. 00:00:00 --> 00:00:33

    In this session, I'm going to be talking about something that's referred to either as *expert evaluation* or *heuristic evaluation*. It's an evaluation done by one or more experts  using a set of guidelines, and evaluating whether a solution meets those guidelines, how well it meets the guidelines, where it is deficient. So, expert or heuristic evaluations rely on the experience and the expertise of the evaluator.

  2. 00:00:33 --> 00:01:00

    So, you can't really do these things without  understanding some of the basic concepts of interaction design and usability. I mentioned at the outset that you would be using guidelines, but those guidelines are *not* self-explanatory, so you have to understand what a good solution to a particular problem, what you're trying to achieve, would look like because as you're doing evaluations and as the industry changes on a  regular basis,

  3. 00:01:00 --> 00:01:36

    then you have to appreciate whether or not the solutions you're seeing actually conform to the guidelines in front of you. Heuristics are these rules of thumb based on *good  practice and known problems in design*. And they can be used from the very early design through to finished solutions. And you can even do expert or heuristic evaluations on just sketches if that would be helpful. It probably is more sensible a little bit later in the process, but certainly there's no impediment to looking at maybe the general layout of screens

  4. 00:01:36 --> 00:02:00

    and saying, well, this screen is quite possibly overly complicated for the problem in hand and the customers or users that you're trying to target. It is relatively inexpensive in that hiring in a consultant for one or two days is actually very much cheaper than conducting usability evaluations.

  5. 00:02:00 --> 00:02:37

    But immediately following, you'll notice that I mentioned that it's *not as effective as testing with real users*. And that is certainly the case. However, if you had a lot of novel designs and you wanted to get some idea about whether they were going to be effective, then inviting people in who actually do  usability testing who are experts in the field will get you a lot of feedback without nearly so  much cost as a lot of usability testing, which can get quite expensive just because of having  to recruit, reward, hire facilities, and so on.

  6. 00:02:37 --> 00:03:03

    Jakob Nielsen published his book on User  Interface Engineering back in the early 1990s, and these are his 10 basic UI (user interface)  heuristics. And they haven't really changed, although when we actually go out to do something like benchmarking, we have a very much more detailed set of heuristics.

  7. 00:03:03 --> 00:03:30

    But these are a useful starting point, and they're talking about fairly generic concepts like *visibility of system status* and making sure that people understand where they are in the process. And that, of course, is  a good thing no matter what you're doing. And detailed design does actually flow out of that – for example, letting people know that they've got things in their shopping basket. That is an example of the visibility of system status.

  8. 00:03:30 --> 00:04:00

    *Match between the system and the real world* – and that's something I've already alluded to when I was referring to terminology. The mapping sometimes is also physical. If you're talking about the natural tendency for increasing the quantity of something, it tends to be *up*. So, if you've got a slider, then up or to the right is 'more' and down or to the left is 'less'. And that's just what we call *natural mapping*. *User control and freedom* – being flexible, allowing people to go back and fix things.

  9. 00:04:00 --> 00:04:33

    Bear in mind that when user  interface design was relatively new on sort of the large scale back in the 1990s when Windows 3.1, which was kind of the very first successful version of Windows, and of course the World Wide Web came around about the same time, it was uncommon, it was very unusual to have Undo functions. If you made a mistake and you needed to fix it, then you had to fix it yourself. There was no Control-Z or any kind of undo facility.

  10. 00:04:33 --> 00:05:04

    It was something that you had to do, and we take that for granted now, but it was not the case in the early days. *Consistency and standards* – users should not have to wonder whether different words, situations or actions mean the same thing. And this continues to be a problem in some areas. Certainly on intranets within large organizations, you would find that one department had its own set of visual guidelines with its own visual language which was totally different to the next department.

  11. 00:05:04 --> 00:05:30

    And if you were unlucky enough to have to move between those departments on the intranet, then you were in a bit of trouble. It doesn't happen so much these days with the web – e-commerce, for example; people do try very hard to make sure that users are going to have a fairly painless experience, and so we do tend to see things laid out with very *similar terminology and visual language* between totally different e-commerce sites. And to be honest, there,

  12. 00:05:30 --> 00:06:01

    Amazon, because they are so large and popular, has been something of a yardstick. And most people, when they're asking for advice on how to do something in e-commerce, I would refer them to the Amazon site and usually for very good reason. *Error prevention* is much more successful than dealing with errors. Certainly if you're having to discard data or reject data because users did not understand how you wanted it formatted, you should *not insist that people punctuate things exactly the way you need them*.

  13. 00:06:01 --> 00:06:30

    You can do whatever you like with the punctuation once you've got the basic data from them. If you want the phone numbers without punctuation, then take the punctuation out of the phone number after you've got it. If you don't like the spaces in the credit card numbers, then take the spaces out of the credit card numbers. So, that isn't something that Jakob talks about here, but it is a different form of error prevention, and I wholeheartedly recommended presenting users  with errors and telling them they've done bad

  14. 00:06:30 --> 00:07:00

    and should do it over is *not good user experience*. *Recognition rather than recall* – and this is the basic premise of *all* user interfaces these days. That's the way that we've moved. Back in the 1970s and 1980s, most systems were command line based and you had to remember the syntax and spelling of the next command you wanted to enter. And when Windows and the Mac came along, both having stolen their designs from Xerox PARC,

  15. 00:07:00 --> 00:07:31

    then we got what we used to refer to as *WYSIWYG* – What You See Is What You Get. We don't talk about that much these days, but it was all about *recognition*, which people are very much better at, than recall; so, you can *recognize things much more easily* than you can recall them from scratch. *Flexibility and efficiency of use* – and usually there is a trade-off between what you might call *design for learning*  and *design for efficiency*. That is all tied up with flexibility and efficiency of use.

  16. 00:07:31 --> 00:08:06

    By making things *flexible and efficient*, you're often making them *harder to use*. So, that's where the tension in the design comes in. *Aesthetic and minimalist design* – people like  websites that look attractive and that they trust from a visual design perspective. And it is important that we *do not put too much in front of users at once*. And so, that's what we mean  by minimalist design. *Help users recognize, diagnose and recover from errors* – something that's actually these days largely overlooked,

  17. 00:08:06 --> 00:08:33

    but it's still extremely important on more complex systems; things like Microsoft Office, most of the Adobe apps do have behind them a huge body of *help and documentation* – usually pretty awfully organized and presented, I have to say. It used to be better ten years ago, and we've just for some reason stopped worrying too much about that. So, it used to be that if you were looking at a dialog and you wanted help

  18. 00:08:33 --> 00:08:54

    with that dialog, you could click on a button  and you would get help on that dialog. The best you can hope for these days is that you click on Help and you get taken to a website, and you now have to work out how you're going to find out about this specific issue that you are having with this specific dialog. So, things have gone a little bit backwards in recent years on that front.

For more on heuristic evaluation and examples, see this article, User Interface Design Guidelines: 10 Rules of Thumb. 

What are common mistakes to avoid in pagination design?

Here are some of the pitfalls to avoid when you implement pagination:

  1. Inconsistent pagination can confuse users and disrupt their navigation flow.

  2. Too many page links can overwhelm users. Instead, limit the number of visible page links and provide 'Next' and 'Previous' buttons for easier navigation.

  3. Mobile users should find it easy to tap on pagination links without zooming in or struggling with small touch targets.

  4. Page controls should be accessible to everyone, including users with disabilities. Ensure keyboard navigability and proper screen reader support.

  5. Users should always know which page they are on. The current page should be clearly highlighted and not clickable.

  6. 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.

Earn a Gift, Answer a Short Quiz!

  1. Question 1
  2. Question 2
  3. Question 3
  4. Get Your Gift

Question 1

What is the main purpose of pagination on websites?

1 point towards your gift

Literature on Pagination

Here's the entire UX literature on Pagination by the Interaction Design Foundation, collated in one place:

Learn more about Pagination

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.

All open-source articles on Pagination

Please check the value and try again.

Open Access—Link to us!

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!

Privacy Settings
By using this site, you accept our Cookie Policy and Terms of Use.

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

Interaction Design Foundation - IxDF. (2017, July 1). What is Pagination?. Interaction Design Foundation - IxDF.

New to UX Design? We're Giving You a Free eBook!

The Basics of User Experience Design

Download our free ebook “The Basics of User Experience Design” to learn about core concepts of UX design.

In 9 chapters, we'll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,106 designers enjoy our newsletter—sure you don't want to receive it?