| UI or UX | UI + UX - Dynamic stream of article-like updates that may load or insert content at either end | UI + UX - Single-column sequence of bounded rich object summaries | UI + UX - Ranked suggestions generated from context, behavior, item similarity, popularity, editorial rules, or recommendation models | UI + UX - Durable user-opened notification history and action drawer |
| UI guidance | 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 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 recommendations as a labelled set of suggested items with clear item identity, recommendation reason, source or basis, availability, and a visible way to dismiss or tune at least the current item. | Provide a persistent notification entry point, usually a bell or inbox control, with a count that represents new unseen notifications rather than every unread item forever. |
| UX guidance | 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. | Use card list when users browse rich object summaries and need enough context to choose or act without opening every item. | Use recommendations to reduce discovery effort when the system has evidence that a small set of items, products, services, content, or next actions may be useful in the user's current context. | Use a notification center when users receive enough asynchronous system or collaboration updates that they need a durable place to review, triage, and act later. |
| Good UI | 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. | 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. | A benefits dashboard shows Recommended for you with cards labelled Because you saved appeals guidance, Popular with benefits caseworkers, and Editorial fallback for Benefits, each with Not interested and Save controls. | A bell opens a drawer with Unread and All filters, showing comment mentions, approval requests, export results, and background-job failures in newest-first order. |
| Bad UI | New posts appear above the current paragraph and shift the page while the user is reading. | Every card uses a different layout, so deadline, owner, status, and actions appear in different places. | A carousel says You will love this, hides that the first card is sponsored, and gives no reason or dismissal control. | A red badge says 42 forever because opening the drawer, reading items, and viewing related work never update the count. |
| Good UX | A user pauses live updates, reads three older posts, sees 2 new updates waiting, then chooses Jump to latest when ready. | 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 user hides a benefits recommendation as Not interested, chooses a reason, and the list immediately replaces it with a lower-ranked item without changing their recently viewed history. | Opening the notification drawer clears the new-notification badge while unread items remain available for later triage. |
| Bad UX | A feed keeps loading forever, hides the footer, and gives no way to resume from a saved position. | 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 assume recommendations are mandatory next steps because the UI mixes them with required workflow tasks. | A payment failure that blocks the current checkout is only stored in the notification center and never appears in the task. |
| Best fit | Users consume a continuing stream of updates, posts, stories, comments, media, or collaboration activity. | Users need to browse rich object summaries with preview, summary text, metadata, status, and actions. | Users need discovery help in a large item, product, content, service, or action space. | Users receive multiple asynchronous updates across objects, jobs, collaborators, approvals, or reminders. |
| Avoid when | The content is a finite set of objects that users need to filter, sort, select, compare, or manage. | The content is dense and homogeneous enough for a compact list view. | The product has too few items for ranking to reduce effort. | The product has only occasional current-action feedback that a toast or inline status can handle. |
| Required state | Default feed with heading, order label, rendered item count or range, and article-like items. | Default card list with heading or label, result count, and visible card summaries. | Default recommended state with labelled section, item identity, reason, source, and action controls. | Closed entry-point state with zero, new-unseen, and unread-but-seen counts. |
| Accessibility burden | Give the feed a heading or accessible label and expose the current order or filter in text. | Use a real list or region with a heading for the card sequence. | Use a heading or labelled region that names the recommendation set and does not rely on carousel position alone. | Give the entry-point control an accessible name that includes new or unread count without relying only on a red dot. |
| Common misuse | Calling any vertical card list a feed even when it is a bounded object collection. | Using cards as decorative wrappers for dense rows. | Counting schema-valid recommendation cards as complete without reasons, controls, or source disclosure. | Treating the badge count, unread count, and total notification count as one number. |