Use feed for a dynamic stream of article-like updates; use card list for bounded object summaries, recommendations for ranked suggestions, and notification center for durable actionable alerts.
Use feed for a dynamic stream of article-like updates; use card list for bounded object summaries, recommendations for ranked suggestions, and notification center for durable actionable alerts.
Practice the judgment: Imagine this situation: A product labels a bounded catalog of objects as a feed, then loses sorting, filtering, and object-management expectations that belonged to card list or list view. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Feed | Card list | Recommendations | Notification center |
|---|---|---|---|---|
| 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. | Preserve predictable card anatomy, action ownership, selected state, and visible result counts as users sort, filter, expand, select, or load more cards. | 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 commerce product page shows Pairs well with this camera, hides out-of-stock accessories, limits the rail to three visible items, and marks manually selected merchant recommendations separately from generated recommendations. | 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 recommendation list keeps showing unavailable, out-of-stock, permission-restricted, or already dismissed items because the UI only validates card shape. | Users ignore the center because duplicate low-value messages inflate the badge. |
| 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 signed-out shopper sees Popular in backpacks rather than fake personalized copy, then gets personalized reasons only after activity exists and consent settings allow it. | Opening the notification drawer clears the new-notification badge while unread items remain available for later triage. |
| Bad UX | The feed jumps to the top whenever a new post arrives. | A user tries to compare award amounts across cards, but each amount appears in a different location and some cards hide it behind expansion. | Users assume recommendations are mandatory next steps because the UI mixes them with required workflow tasks. | Users mark all notifications read and lose the only record of an export job they still need to download. |
| 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. | Make recommendation reasons, sponsored labels, availability, and item type available as text. | Announce new notification arrival with status semantics when appropriate, but avoid interrupting users repeatedly for low-priority center items. |
| 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. | Pretending generated suggestions are recently viewed, saved, or required steps. | Treating the badge count, unread count, and total notification count as one number. |