Use card list for a vertical sequence of rich, bounded object summaries; use list view for dense row scanning, collection for a named managed set, and browse by category for taxonomy navigation.
Use card list for a vertical sequence of rich, bounded object summaries; use list view for dense row scanning, collection for a named managed set, and browse by category for taxonomy navigation.
Practice the judgment: Imagine this situation: Cards have inconsistent anatomy, so users must relearn where title, status, date, and action controls appear on every item. 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 | Card list | List view | Collection | Browse by category |
|---|---|---|---|---|
| UI or UX | UI + UX - Single-column sequence of bounded rich object summaries | UI + UX - Vertical object-summary browsing surface | UI + UX - Named, purposeful set of items with collection-level metadata and membership behavior | UI + UX - Taxonomy-based category navigation for exploring a collection before choosing a destination |
| UI guidance | 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 labelled vertical list where each row has a strong primary label, concise supporting text, metadata, status, optional leading media, and row-scoped actions with clear hit targets. | Render a collection header with the collection title, concise description, item count, owner or source, visibility, last updated state, and primary collection actions before the item surface. | Render categories as a scannable list or grid with user-facing names, short descriptions, item counts or example contents, and clear parent-child location cues. |
| UX guidance | Preserve predictable card anatomy, action ownership, selected state, and visible result counts as users sort, filter, expand, select, or load more cards. | Use list view when scanning and opening object summaries is faster than comparing columns or inspecting large visual cards. | Use collection when the set itself is meaningful and users need to save, curate, share, revisit, sequence, or manage item membership. | Maintain the taxonomy with evidence from content tagging, search terms, analytics, tree testing, support questions, and editorial review so category labels stay distinct and useful. |
| Good UI | 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 ticket list row shows TCK-2048 Database backup failed, a one-line incident summary, Critical status, owner, updated time, selected state, and a labelled More actions menu. | A launch-assets collection shows title, description, 4 items, owner, shared-with-team state, sections for Read first and Assets, and item cards with type, status, and remove actions. | A services page lists Benefits, Housing and local services, Money and tax, and Driving and transport with one-line descriptions and top tasks for each category. |
| Bad UI | Every card uses a different layout, so deadline, owner, status, and actions appear in different places. | Every row has five unlabeled icon buttons, and the whole row also navigates. | A shared collection says 12 items but only 8 render because four are private or unavailable. | Category names overlap and users bounce between siblings. |
| Good UX | 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 filters tickets to Critical, selects two rows, opens the details panel for one ticket, then clears the filter and the selected count and active ticket remain understandable. | A user adds a training module to a cloud-migration collection, reorders it into the first section, shares the collection link, and sees a confirmation that the item remains in the collection. | An editor reviews low-click categories, merges overlapping labels, and retags misplaced content after checking search terms and support questions. |
| Bad UX | A user tries to compare award amounts across cards, but each amount appears in a different location and some cards hide it behind expansion. | A user tries to preview a file but the row click opens navigation while the small trailing icon deletes the file. | A user filters a collection to videos, removes one visible item, and later discovers the product only cleared the filter instead of removing the item from the collection. | Users choose Customers because they need customer support, but the category contains only internal CRM configuration articles. |
| Best fit | Users need to browse rich object summaries with preview, summary text, metadata, status, and actions. | Users need to scan and act on a collection of objects using compact summaries. | Users need to save, curate, share, revisit, sequence, or maintain explicit items as a meaningful set. | Users are exploring a broad catalog, service directory, help center, learning library, product collection, or content repository. |
| Avoid when | The content is dense and homogeneous enough for a compact list view. | Users need to compare many records across shared attributes. | The set is only a temporary search result or filtered query. | The collection is small enough for a simple list. |
| Required state | Default card list with heading or label, result count, and visible card summaries. | Default list state with label or heading, row count or context, visible row summaries, and primary row identity. | Default collection state with title, description, owner or source, item count, visibility, updated time, and primary action. | Top-level category state with clear names, descriptions, and enough examples or counts to choose. |
| Accessibility burden | Use a real list or region with a heading for the card sequence. | Use semantic list markup for ordinary object lists; use listbox only when rows are options in a single control. | Use a heading and concise description that name the collection and explain its purpose before item navigation begins. | Use real links for categories that navigate and buttons only for local expansion. |
| Common misuse | Using cards as decorative wrappers for dense rows. | Putting too many independent controls in every row until the list becomes a keyboard trap. | Mixing search results, recommendations, recent history, saved items, and editorial links under one collection heading. | Using the organization chart as the category taxonomy. |