Pagination
Jovin LiewWhat is pagination?
Pagination allows users to navigate between pages of content.
Effective pagination ensures that users can navigate large datasets efficiently without frustration.
-
Make sure you have clear page controls - a visible next/previous buttons and page numbers for easy navigation. Ideally, highlighting the current page to show user's position.
-
Chunk content into smaller groups (10 to 50 items per page) to reduce cognitive load.
-
Ensure each page loads quickly and use lazy loading to enhance speed if there are still too many items.
-
Use infinite scrolling instead for certain content types like social feeds, or visual grids.
-
Make sure your pagination design works across both mobile and desktop views. Compact controls with no page numbers might work better for smaller screen sizes.
Pagination is commonly used in the following design patterns: E-commerce product listings, Search results, Blog posts or articles, Calendar.
Examples of pagination on web| When to use Pagination? | ||
|---|---|---|
| Large datasets | Pagination is ideal for breaking up content into manageable pages - commonly seen seen in search engines or product listings. | |
| Predictable navigation | Use when users need control over which page they are on (i.e: browsing archives) | |
| Fast access to specific sections | Works well when users may jump to a specific page or category (i.e: pagination controls in reports). | |
| When not to use Pagination? | ||
|---|---|---|
| Limited content | Avoid if the dataset is small enough to fit in one page. Use a static List instead. | |
| Continuous browsing preference | Avoid if users expect a seamless flow. At Mobbin, we opted for infinite scrolling since it provides a smoother experience for our users. | |
| High interaction cost | Avoid if frequent clicks to load pages interrupt user experience. Opt for lazy loading and infinite scrolling instead. | |
What is the anatomy of pagination design?
Anatomy of pagination designWhat are the design variants of pagination design?
We studied over 260+ pagination UI components on Mobbin, from real-world examples and found the following variants.
1. Pagination controls can come with multiple pages or just a single page
If you want to keep your design concise, here are some examples of single page number pagination components. The downside of this approach is that users won't be able to quickly skip to more distant pages easily - they will only be able to do so through the URL, or, slowly clicking 'next page'.
Single page pagination design examplesIf space isn't a constraint, a very pagination design commonly comes with multiple pages - often with the last page included in this part of the anatomy.
This offers a better user experience since it allows users to quickly skip to the last page, or multiple pages at a time.
Multiple page pagination design examples2. Pagination controls with no page numbers
We've also found examples of paginations with no page numbers. This minimalistic design only offers a next or previous page button, without allowing users to skip to a the desired page number.
This might be a useful design if you need users to navigate forward without skipping through pages quickly. For example, educational content that requires page by page progress.
The compact size of this design variant also makes it more suitable for smaller screen sizes (i.e: mobile devices).
No page numbers pagination design examples3. Pagination controls with preview article links
Instead of offering page numbers, this pagination design offers users previous pages and next pages with a preview article link instead.
This is commonly found in developer docs design, or the bottom of help & support articles.
Preview article links pagination design examples4. Pagination controls with up and down arrows
Lastly, we've seen a special twist to pagination design. Instead of using left and right arrow keys for pagination controls, these apps use up and down arrow keys instead.
Up and down arrows pagination controlsWhen to use a pagination component?
1. E-commerce product listings
Pagination is commonly used in e-commerce online stores to help users browse through different categories and pages of products.
Examples of pagination in e-commerce product catalogs2. Search results
Pagination is also used for displaying search results in a structured manner, allowing users to navigate through the results and find the most relevant information.
Examples of pagination in search results3. Blog posts or articles
In websites with a large number of blog posts or articles, pagination is used to organize and present the content in a more user-friendly manner, making it easier for users to browse through the posts and find the ones they are interested in.
Examples of pagination in blog posts or articles4. Calendar
Paginations can also be used on calendars to navigate between years/months/days
Examples of pagination in calendarsConflicting UI elements: Page control
1. Pagination v.s. Page control
Page control typically appears as a set of small dots or circles at the bottom of the screen. These dots/circles indicate the total number of pages and which page the user is currently on.
A pagination control usually appears as a series of numbered buttons or links at the bottom of a page. These buttons/links allow the user to navigate to different pages of content.
Examples of page control