| 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. | 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. | 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 shared collection says 12 items but only 8 render because four are private or unavailable. | Every row has five unlabeled icon buttons, and the whole row also navigates. | Category names overlap and users bounce between siblings. | 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. | An editor reviews low-click categories, merges overlapping labels, and retags misplaced content after checking search terms and support questions. | 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 tries to preview a file but the row click opens navigation while the small trailing icon deletes the file. | 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 | Mixing search results, recommendations, recent history, saved items, and editorial links under one collection heading. | Putting too many independent controls in every row until the list becomes a keyboard trap. | Using the organization chart as the category taxonomy. | Using related links as a catch-all further-reading dump. |