Design Better Pagination

Pagination separates content into multiple pages, typically with a horizontal list of numbers and buttons to navigate forward and back. At its best, it helps users efficiently traverse large datasets. At its worst, it becomes a frustrating guessing game.

Good pagination isn't just about page numbers—it’s about giving users control, clarity, and the right mental model for the task at hand. This article builds from basic pagination elements to advanced configurations, with practical examples, UX tradeoffs, and alternatives like infinite scroll and filtering.

I published the Figma file illustrating these concepts to the Figma Community.

Navigating Pages

At the most basic level, pagination enables users to move forward and back through content. These actions should be visually distinct and disabled when they’re unavailable—like disabling “Back” on the first page or “Next” on the last.

Numbered Representation

A numbered list gives users a sense of scope. If there are 24 pages, showing “1… 12 13 14 … 24” helps users understand both their current position and the total result set. But remember: numbers are only useful if users have context about what lives on each page.

Truncation Logic

When there are many pages, truncating the navigation (e.g. “1 … 10 11 12 … 30”) keeps it scannable while still allowing jumps to beginning, middle, and end. Always show the current page with its adjacent neighbors, and let users know what lies beyond.

First and Last Buttons

If truncation is used, adding explicit “First” and “Last” buttons may seem redundant—but it can improve accessibility, especially for keyboard and screen reader users. Don’t assume visual patterns convey affordances equally to all users.

Styling and Affordance

Even minimalist pagination needs clear affordance. Numbers alone can feel inert if styled too subtly. Use contrast and size to indicate the active page. Consider hover and focus states for interactivity and accessibility.

Show Total Count

Pagination UIs often display the total number of items (e.g., “1–50 of 13,241 results”). This transparency builds trust and helps users estimate how much work lies ahead. It’s essential in enterprise software and admin panels where users need to manage tasks at scale.

Allow Custom Page Sizes

Giving users the ability to change how many items they see per page—via a dropdown like “10, 25, 50, 100”—can be helpful in data-heavy applications. But be careful: too many options create unnecessary complexity. Users rarely need to choose between “150” and “175” per page. Instead, offer clearly labeled tiers:

• Compact (25)

• Comfortable (100)

• Expanded (500)

• All

Defaults should prioritize performance and use case, not theoretical flexibility.

Go-to-Page Input

When navigating hundreds or thousands of results, users may want to jump to a specific page. A simple “Go to page” field can help—especially in admin tools or log analysis interfaces. But remember: most users won’t know where the item they’re looking for lives. Consider this a power-user feature.

Pagination Placement

Pagination is typically placed at the bottom of a list. But for dense tables or long results, placing it at the top—or fixing it to the viewport—can save users from unnecessary scrolling. In enterprise apps, pinned controls can drastically improve usability.

Bulk Selection Across Pages

Bulk actions introduce complexity. If a user selects items on page 1, then goes to page 2 and selects more—should their total selection span both pages?

Here’s what works well:

• Allow selections across pages.

• Display a count (“78 items selected across 3 pages”).

• Offer a way to select all matching results (e.g. “Select all 2,385 results”).

• Use confirmation dialogs to preview what the bulk action will affect.

This approach is common in tools like Gmail and Notion. Users need feedback and control when performing large-scale actions.

When Not to Use Pagination

Not all content needs pagination. In fact, some interfaces suffer when it’s added unnecessarily.

Use forward/back only for:

• Calendars

• Wizards or steppers

• Stories, tutorials, or slideshows

Skip page numbers entirely when:

• Content has little structure (e.g. blogs or newsfeeds)

• Users are scanning rather than searching

• The total result count is unknown or irrelevant

Pagination vs Infinite Scroll

Infinite scroll is ideal for discovery and passive consumption—social feeds, e-commerce listings, and inspiration galleries.

But it's not ideal when:

• Users need to compare or bookmark results

• There’s a clear endpoint or total result set

• Users need to return to a prior spot

• Performance depends on server-side rendering or indexing

Enterprise apps, bookkeeping tools, and CRMs benefit from pagination because users need control. Scroll-jacking for the sake of continuity often degrades usability.

See: Nielsen Norman Group on Infinite Scrolling

Infinite Scroll + Pagination: A Hybrid Approach

Some modern UIs blend both: infinite scroll for seamless loading, and a floating navigation bar or skip-to-page option for control. This works well in e-commerce or media apps—where users want continuity but also orientation.

Key to this hybrid approach:

• Let users skip large chunks of content

• Don’t break the browser’s “back” behavior

• Provide filters and search to narrow the list

Filters and Search > Pagination

Many users don't want to sift through pages—they want to find something. That’s where filters, sort controls, and search matter more than page navigation. Pagination is a last-mile UI pattern when the content can't be refined further.

If you give users the ability to:

• Search by keyword

• Sort by relevance or date

• Filter by type, price, location, etc.

Then pagination becomes a supporting pattern—not the main way users find what they need.

Design With Context

There’s no one-size-fits-all solution. Great pagination adapts to the nature of the data, the user’s goal, and the interface environment. Designers should ask:

• Is the user exploring or completing a task?

• Do they know what they’re looking for?

• Do they need to compare items?

• Will they take action on the results?

Pagination isn’t outdated—it’s just misunderstood. When used thoughtfully, it gives users structure, control, and peace of mind.

In Summary

✅ Use pagination when users need control, structure, or orientation
✅ Use infinite scroll when users are browsing, consuming, or exploring
✅ Avoid unnecessary options or overly granular choices
✅ Prioritize filters and search over blind navigation
✅ Support power users with “go to page,” bulk selection, and shortcuts

The way we structure information changes how people interact with it. Pagination isn’t just about dividing content—it’s about designing how users move through knowledge, decisions, and complexity.

In an age of infinite data, the best interfaces offer not more content—but more clarity.