| 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 | Use card list when users browse rich object summaries and need enough context to choose or act without opening every item. | 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. | Use browse by category when users can recognize a topic or service area but may not know the exact query, item name, or filter value. |
| 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. | A list row shows columns of owner, amount, due date, and status but no headers or column sort state. | A page shows cards named Resources, More, Useful, and Links with no collection title, purpose, count, or ownership. | A category grid uses internal teams such as Operations, CX, Growth, Platform, and Enablement without saying what users can find there. |
| 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. | A user who does not know the form name chooses Money and tax, sees Self Assessment and VAT subcategories, and reaches the correct service without writing a search query. |
| Bad UX | 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. | A user selects rows, changes sort order, and the bulk action count still includes hidden rows without saying which rows are affected. | 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. | Using list view as a table without column headers or column-state feedback. | Treating any grid of cards as a collection without collection identity or membership behavior. | Using the organization chart as the category taxonomy. |