| UI or UX | UI + UX - Missing pagination position anti-pattern | UI + UX - Paged navigation control | UI + UX - Hierarchy orientation navigation | UI + UX - Linear multistep task progress indicator | UI + UX - Dynamic stream of article-like updates that may load or insert content at either end |
| UI guidance | Treat pagination without a visible and programmatic current page as an anti-pattern whenever users are moving through ordered pages of one result set. | Render a labeled pagination nav near the affected results with current page, previous, next, nearby pages, optional first/last or ellipsis, and clear disabled edge states. | Render a labeled breadcrumb nav as an ordered hierarchy from the broadest relevant ancestor to the current page, with real ancestor links and a distinct current-page item. | Show a compact ordered list of named steps near the task heading, with visually distinct completed, current, upcoming, optional, and error states. | Render the feed as a labelled stream of item boundaries where each item has a source or author, timestamp, title or body summary, type, actions, and enough context to stand alone as an article-like update. |
| UX guidance | Use this anti-pattern during review when users cannot tell whether page 3 is selected, loading, unavailable, or merely adjacent to the current page. | Help users move through an ordered result set with a stable sense of position, progress, and returnability. | Orient users who arrive deep in a site by exposing the canonical parent-child relationship for the current page. | Use step navigation to reduce uncertainty in long linear tasks by showing where users are, what is done, and what remains. | Use feed when users consume a continuing stream of posts, updates, stories, events, or collaboration activity and need to keep their reading position while new or older content appears. |
| Good UI | A results list says Showing 21-30 of 118 and the pagination marks Page 3 as Current page with aria-current="page". | Current page, previous/next, disabled edges, page numbers, result range, and total count are visually clear. | Home, Projects, Migration, and Runbook appear in hierarchy order with ancestor links and Runbook marked current. | A five-step application shows Eligibility complete, Contact details current, Documents upcoming, Review upcoming, and Submit upcoming, with the current step emphasized and a matching page heading. | A project feed shows source avatar, actor, timestamp, object name, excerpt, item type, unread marker, reply and save actions, and a visible queued-new-items banner while the reader is midstream. |
| Bad UI | Page links 1 2 3 4 are identical, so users cannot tell which page they are on. | Tiny numbers with no current state. | Recent clicks are displayed as if they were the page hierarchy. | A two-page form adds a large stepper that consumes space without explaining meaningful progress. | New posts appear above the current paragraph and shift the page while the user is reading. |
| Good UX | A reviewer returns to search results and sees Page 4, 31-40 of 96, query appeal, and sort Newest still aligned. | Users move through pages while query, filters, and sort persist. | Opening a saved deep link still shows the same parent path and lets users jump to Migration or Projects. | After a user enters valid contact details and continues, Contact details becomes complete and Documents becomes current. | A user pauses live updates, reads three older posts, sees 2 new updates waiting, then chooses Jump to latest when ready. |
| Bad UX | A user clicks Next twice and cannot tell whether the second click loaded, failed, or left them on the same page. | Changing page resets filters. | The breadcrumb changes after every click, so the same page shows different trails for different users. | Clicking Review skips Documents, clears the contact form, and then blocks final submission without explaining the skipped prerequisite. | A feed keeps loading forever, hides the footer, and gives no way to resume from a saved position. |
| Best fit | Use this anti-pattern to review result pages, data tables, search results, inboxes, catalogs, audit logs, resource lists, and generated pagination controls. | The collection has many ordered results. | Pages sit inside a clear parent-child hierarchy. | A linear form, application, checkout, or setup flow has three or more meaningful steps. | Users consume a continuing stream of updates, posts, stories, comments, media, or collaboration activity. |
| Avoid when | The surface is a continuous feed or load-more list where exact page position is intentionally not exposed and the task does not require it. | Users need uninterrupted reading or comparison. | The app has a flat structure with no meaningful parent levels. | The journey has only one or two screens. | The content is a finite set of objects that users need to filter, sort, select, compare, or manage. |
| Required state | Default middle-page state with exactly one visible current page and matching result range. | First page with disabled previous control. | Interior page with full ancestor trail. | Default state with completed, current, and upcoming steps. | Default feed with heading, order label, rendered item count or range, and article-like items. |
| Accessibility burden | Expose the current page with aria-current="page" or equivalent current-state text in the pagination region. | Use a labeled navigation region. | Place the trail in a labeled nav element. | Use aria-current on the current labeled step and include hidden or visible status text for completed, current, upcoming, optional, and error states. | Give the feed a heading or accessible label and expose the current order or filter in text. |
| Common misuse | Showing page numbers as identical chips with no selected state. | Using pagination for a tiny collection. | Showing browsing history instead of hierarchy. | Using a step indicator as breadcrumbs, tabs, side navigation, or pagination. | Calling any vertical card list a feed even when it is a bounded object collection. |