| UI or UX | UI + UX - Named, purposeful set of items with collection-level metadata and membership behavior | UI + UX - Vertical object-summary browsing surface | UI + UX - Taxonomy-based category navigation for exploring a collection before choosing a destination | UI + UX - Curated onward links connected to the current content |
| UI guidance | 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 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 categories as a scannable list or grid with user-facing names, short descriptions, item counts or example contents, and clear parent-child location cues. | Render a short, labelled collection of links whose destinations are closely related to the current content, using destination-specific link text and optional relation labels such as service, guidance, external, or PDF. |
| UX guidance | Use collection when the set itself is meaningful and users need to save, curate, share, revisit, sequence, or manage item membership. | Use list view when scanning and opening object summaries is faster than comparing columns or inspecting large visual cards. | 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. | Use related links to support users who have finished or understood the current content and need a relevant next page, adjacent service, reference, or follow-up resource. |
| Good UI | 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 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 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. | A benefits guidance page ends with Related links: Check eligibility for support, Upload evidence for your claim, and Appeal a support decision, each with a concise relation label. |
| Bad UI | A page shows cards named Resources, More, Useful, and Links with no collection title, purpose, count, or ownership. | A list row shows columns of owner, amount, due date, and status but no headers or column sort state. | A category grid uses internal teams such as Operations, CX, Growth, Platform, and Enablement without saying what users can find there. | A page ends with More information containing Home, Contact us, Apply now, Old 2018 guidance, Help, and an unrelated account settings link. |
| Good UX | 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 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 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. | A user reads claim renewal guidance, chooses Upload evidence for your claim, and sees why that destination is the next useful service page. |
| Bad UX | 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. | A user selects rows, changes sort order, and the bulk action count still includes hidden rows without saying which rows are affected. | Users choose Customers because they need customer support, but the category contains only internal CRM configuration articles. | Users follow a generic More information link and land on an unrelated policy collection. |
| Best fit | Users need to save, curate, share, revisit, sequence, or maintain explicit items as a meaningful set. | Users need to scan and act on a collection of objects using compact summaries. | Users are exploring a broad catalog, service directory, help center, learning library, product collection, or content repository. | The current page has a few genuinely adjacent pages, services, programs, or resources users often need next. |
| Avoid when | The set is only a temporary search result or filtered query. | Users need to compare many records across shared attributes. | The collection is small enough for a simple list. | Links are only loosely associated by topic tags or organizational ownership. |
| Required state | Default collection state with title, description, owner or source, item count, visibility, updated time, and primary action. | Default list state with label or heading, row count or context, visible row summaries, and primary row identity. | Top-level category state with clear names, descriptions, and enough examples or counts to choose. | Default state with a labelled, curated related-links block and descriptive link text. |
| Accessibility burden | Use a heading and concise description that name the collection and explain its purpose before item navigation begins. | Use semantic list markup for ordinary object lists; use listbox only when rows are options in a single control. | Use real links for categories that navigate and buttons only for local expansion. | Use descriptive link text that makes sense out of context. |
| Common misuse | Treating any grid of cards as a collection without collection identity or membership behavior. | Using list view as a table without column headers or column-state feedback. | Using the organization chart as the category taxonomy. | Using related links as a catch-all further-reading dump. |