| UI or UX | UI + UX - Endless loading footer-access anti-pattern | UI + UX - Dynamic stream of article-like updates that may load or insert content at either end | UI + UX - Paged navigation control | UI + UX - Single-column sequence of bounded rich object summaries | UI + UX - Keyboard-visible bypass link to primary page content |
| UI guidance | Treat infinite scroll with no footer access as an anti-pattern when automatic loading keeps pushing footer, legal, privacy, help, contact, sitemap, language, feedback, or account links out of reach. | 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. | 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 each item as a bounded card with a stable anatomy: preview or icon, title, concise summary, metadata, status, and one clear primary action or activation target. | Render a real link before repeated page chrome, usually as the first focusable control after required cookie or service banners, with destination-oriented text such as Skip to main content. |
| UX guidance | Use this anti-pattern during review when users try to reach the bottom of a page for help, legal, settings, unsubscribe, feedback, or navigation but more items keep appearing. | 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. | Help users move through an ordered result set with a stable sense of position, progress, and returnability. | Use card list when users browse rich object summaries and need enough context to choose or act without opening every item. | Use skip links to let keyboard, switch, screen-reader, and magnifier users bypass repeated navigation, headers, breadcrumbs, filter panels, or other repeated blocks before reaching the primary task or content. |
| Good UI | A news feed loads two automatic batches, then shows Load more stories, End of latest batch, and a reachable footer with Privacy, Accessibility, Contact, and Cookies links. | 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. | Current page, previous/next, disabled edges, page numbers, result range, and total count are visually clear. | A grant-opportunity card shows program name, eligibility summary, deadline, award range, status, agency, and a labelled Save action in the same position on every card. | The first Tab on a service page reveals a high-contrast Skip to main content link above the header. |
| Bad UI | A feed appends another batch whenever the user nears the footer, so the footer never becomes reachable. | New posts appear above the current paragraph and shift the page while the user is reading. | Tiny numbers with no current state. | Every card uses a different layout, so deadline, owner, status, and actions appear in different places. | The skip link is hidden with display none and never receives keyboard focus. |
| Good UX | A user scrolls through 60 updates, reaches a stable Load more boundary, opens Contact in the footer, then returns to the same feed position. | A user pauses live updates, reads three older posts, sees 2 new updates waiting, then chooses Jump to latest when ready. | Users move through pages while query, filters, and sort persist. | A user filters opportunities to Closing soon, saves two cards, expands one summary, changes sort order, and the saved count and card identities remain clear. | A keyboard user presses Tab once, activates Skip to main content, and reaches the page heading instead of tabbing through 18 header links. |
| Bad UX | A user scrolls for the privacy link, but every near-bottom scroll loads another set of cards and pushes the footer away. | A feed keeps loading forever, hides the footer, and gives no way to resume from a saved position. | Changing page resets filters. | A user clicks inside a card to select text but the whole card opens, while a nearby icon deletes the item with no item name. | Users must tab through global navigation, service navigation, breadcrumbs, and account links on every page before content. |
| Best fit | Use this anti-pattern to review feeds, search results, product grids, media streams, activity streams, catalogs, and generated infinite-scroll pages. | Users consume a continuing stream of updates, posts, stories, comments, media, or collaboration activity. | The collection has many ordered results. | Users need to browse rich object summaries with preview, summary text, metadata, status, and actions. | Pages include repeated navigation, headers, breadcrumbs, filters, or other content before the main content. |
| Avoid when | The stream is short, finite, and the footer remains reachable without racing the loader. | The content is a finite set of objects that users need to filter, sort, select, compare, or manage. | Users need uninterrupted reading or comparison. | The content is dense and homogeneous enough for a compact list view. | There is no repeated block before the main content and the first focusable control is already the content task. |
| Required state | Default stream with loaded item count, order label, and visible footer-access plan. | Default feed with heading, order label, rendered item count or range, and article-like items. | First page with disabled previous control. | Default card list with heading or label, result count, and visible card summaries. | Default hidden-but-focusable state before keyboard focus. |
| Accessibility burden | Provide a keyboard-reachable route to footer utilities before or beside the long stream. | Give the feed a heading or accessible label and expose the current order or filter in text. | Use a labeled navigation region. | Use a real list or region with a heading for the card sequence. | Use a real link and a real fragment target so browser and assistive-technology behavior is predictable. |
| Common misuse | Putting Privacy, Terms, Accessibility, Contact, Cookies, or language links only in a footer that infinite scroll prevents users from reaching. | Calling any vertical card list a feed even when it is a bounded object collection. | Using pagination for a tiny collection. | Using cards as decorative wrappers for dense rows. | Placing the skip link inside the header or after the navigation it should bypass. |