UX Patterns Guide
UI + UX Data Display And Exploration standard

Collection

Represent the set as a collection with a clear title, description, owner or source, item count, visibility, update state, membership rule, sections or ordering, item identity, collection actions, item actions, and explicit behavior for empty, filtered, unavailable, copied, shared, and deleted states.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • Users need to save, curate, share, revisit, sequence, or maintain explicit items as a meaningful set.
  • A collection title, description, owner, count, visibility, and item membership rule would help users understand the surface.
  • Users need to add, remove, reorder, group, copy, share, subscribe to, or delete the set.
  • The same item can appear in multiple named sets or be consumed in a recommended order.

Avoid when

  • The set is only a temporary search result or filtered query.
  • A taxonomy category is the real organizing model.
  • There are only a few optional onward links from one page.
  • The surface is primarily a table, data grid, feed, timeline, chart, or map with no collection-level behavior.
  • Users cannot inspect or trust the membership rule.

Problem it prevents

Users need to keep, revisit, share, sequence, or manage a purposeful set of items, but a simple list, category page, recommendation rail, or related-links block does not explain the set's purpose, membership, ownership, order, or action scope.

Pattern anatomy

What a strong implementation has to make clear

User need

Items may be documents, training modules, products, files, assets, articles, records, examples, forms, media, or tasks.

Pattern promise

Represent the set as a collection with a clear title, description, owner or source, item count, visibility, update state, membership rule, sections or ordering, item identity, collection actions, item actions, and explicit behavior for empty, filtered, unavailable, copied, shared, and deleted states.

Required state

Default collection state with title, description, owner or source, item count, visibility, updated time, and primary action.

Recovery path

Users cannot tell whether the page is a saved collection, category page, recent history, or recommendation set.

Access contract

Use a heading and concise description that name the collection and explain its purpose before item navigation begins.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • 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 government document collection groups related forms and guidance by heading, includes short descriptions under each link, and offers updates about changes to collection items.
  • 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 viewer opens a shared collection and sees that two private items are hidden because they lack permission, while the visible count and owner remain clear.
Weak implementation

Vague, hidden, hard to recover from

  • A page shows cards named Resources, More, Useful, and Links with no collection title, purpose, count, or ownership.
  • A collection has Share, Delete, and Remove buttons beside every item without saying whether the action affects the item, the view, or the whole collection.
  • 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 copied collection silently keeps the original owner's stale description and shared permissions, so recipients cannot tell which copy they are editing.
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.
  • Show items with stable identity, type, status, section, order, and item-scoped actions, while keeping collection actions such as share, copy, reorder, subscribe, or delete visually separate.
UX guidance
  • Use collection when the set itself is meaningful and users need to save, curate, share, revisit, sequence, or manage item membership.
  • Preserve trust by explaining membership rules, hidden or unavailable items, manual versus sorted order, section purpose, and the difference between filtering the view and changing the collection.
Implementation contract

What the implementation must handle

States

  • Default collection state with title, description, owner or source, item count, visibility, updated time, and primary action.
  • Item state with stable label, type, status, section, order, preview or summary, and item-scoped actions.
  • Manual order, sorted order, sectioned order, filtered view, and no-results states.
  • Add item, remove item, reorder item, move between sections, copy collection, share collection, and delete collection states when supported.

Interaction

  • Collection actions and item actions have separate labels, placement, confirmation, and post-action feedback.
  • Filtering or sorting changes the current view without silently changing collection membership.
  • Removing an item, deleting a section, copying a collection, or deleting the whole collection states the affected scope before destructive commit.
  • Adding an item confirms which collection received it and whether the item can belong to multiple collections.

Accessibility

  • Use a heading and concise description that name the collection and explain its purpose before item navigation begins.
  • Expose item count, visible count, selected count, unavailable items, and permission-limited state in text.
  • Use semantic list, link, article, table, or grid markup according to the item layout and interaction model.
  • Do not rely on card position, image, color, or drag affordance alone to communicate item order or section membership.

Review

  • What makes this set a collection rather than a list, category, recommendation, search result, or related-links block?
  • Who owns the collection and who can view, edit, copy, share, or delete it?
  • Is membership manual, criteria-driven, editorial, imported, permission-limited, or generated?
  • What happens to total count, visible count, and selected items after filtering, sorting, and permission changes?
Interactive lab

Inspect the states before you copy the pattern

Manage a named item collection

Add an item, reorder the first item, filter the view, toggle sharing and hidden private items, remove an item, and compare unnamed-set, mixed-set, filter-mutation, hidden-private, destructive-scope, drag-only, and stale-copy failures.

Collection
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Default collection state with title, description, owner or source, item count, visibility, updated time, and primary action.

Keyboard / Access

Tab reaches collection actions, view controls, filters, item actions, section controls, and pagination in a predictable order.

Avoid Generating

Treating any grid of cards as a collection without collection identity or membership behavior.
Evidence trail

Source-backed claims behind this guidance

Create and manage Microsoft Learn Collections

Microsoft Learn - checked

Microsoft Learn supports curated collections with purpose, title, description, item addition, reordering, deletion, sections, sharing, copying, ownership, and item-count guidance.

Shopify Polaris Resource list

Shopify - checked

Shopify Polaris supports object collections with item identity, resource counts, sorting, filtering, pagination, selection, bulk actions, empty states, and detail navigation.

Full agent/debug reference

Problem Context

  • Items may be documents, training modules, products, files, assets, articles, records, examples, forms, media, or tasks.
  • The set can be manually curated, saved by a user, generated by an editor, published for a topic, shared with a team, copied as a starting point, or maintained as a durable content page.
  • Users may need to add, remove, reorder, group, filter, sort, open, copy, share, export, subscribe to, or delete the collection.
  • The same item may appear in multiple collections, and permission, localization, availability, or product state can change what each viewer sees.

Selection Rules

  • Choose collection when the item set has its own name, purpose, owner, audience, membership, ordering, grouping, or sharing behavior.
  • Use collection when users need to save explicit items rather than save criteria.
  • Use collection when users need to curate a recommended sequence, reading list, asset kit, form pack, playlist, saved product set, or document bundle.
  • Use list view when the primary task is scanning and acting on row summaries, not managing the set as a named object.
  • Use browse by category when the user is navigating a taxonomy rather than inspecting a specific curated set.
  • Use related links for a short contextual link group tied to one page, especially when there is no independent collection object.
  • Use recommendations when the system ranks suggested items from signals or editorial rules rather than preserving explicit collection membership.
  • Use saved search or saved filter when the set is regenerated from criteria and membership changes automatically as matching items change.
  • Avoid collection when the set has no stable membership rule, no reason to revisit, and no collection-level action or metadata.
  • Avoid collection when a table, data grid, map, feed, or timeline better expresses the main task and collection behavior would add false ownership.

Required States

  • Default collection state with title, description, owner or source, item count, visibility, updated time, and primary action.
  • Item state with stable label, type, status, section, order, preview or summary, and item-scoped actions.
  • Manual order, sorted order, sectioned order, filtered view, and no-results states.
  • Add item, remove item, reorder item, move between sections, copy collection, share collection, and delete collection states when supported.
  • Shared, private, team-visible, read-only, editable, copied, subscribed, and permission-limited states.
  • Empty collection, newly created collection, loading, partial-load, failed-load, stale-link, hidden-item, unavailable-item, and archived-item states.
  • Bulk selection or multi-item operation state when collection actions can affect more than one item.
  • Narrow-screen state that keeps collection identity, item identity, count, and primary actions visible without collapsing into unlabeled cards.

Interaction Contract

  • Collection actions and item actions have separate labels, placement, confirmation, and post-action feedback.
  • Filtering or sorting changes the current view without silently changing collection membership.
  • Removing an item, deleting a section, copying a collection, or deleting the whole collection states the affected scope before destructive commit.
  • Adding an item confirms which collection received it and whether the item can belong to multiple collections.
  • Reordering uses stable item IDs and announces the new position or section without losing focus.
  • Shared viewers can tell whether they are seeing all items, a permission-limited subset, localized item labels, or unavailable content.
  • Counts distinguish total collection items from visible, selected, hidden, filtered, unavailable, and permission-limited items when those differ.
  • Copying or duplicating a collection makes ownership, permissions, and future edits clear.

Implementation Checklist

  • Define the collection object: title, description, owner, visibility, membership rule, allowed item types, sections, order model, item count, update policy, and supported actions.
  • Separate item actions from collection actions in labels, hit targets, permissions, analytics, and confirmation flows.
  • Choose item presentation based on item inspection needs: compact rows for scanning, visual cards for preview, grouped links for documents, or specialized views for media and maps.
  • Implement empty, no-results, permission-limited, unavailable-item, loading, failed-load, shared read-only, copy, delete, and stale-link states.
  • Persist item identity, order, section, selection, and focus across filtering, sorting, reordering, refresh, and permission changes.
  • Expose total count and visible count when filters, permissions, or unavailable items make them differ.
  • Label share, copy, remove, delete, reorder, subscribe, and export actions with the collection or item name they affect.
  • Test keyboard operation, screen reader names, drag alternatives for reordering, destructive confirmations, shared-link permissions, long titles, localization, and mobile wrapping.

Common Generated-UI Mistakes

  • Treating any grid of cards as a collection without collection identity or membership behavior.
  • Mixing search results, recommendations, recent history, saved items, and editorial links under one collection heading.
  • Letting filters or sorts mutate collection membership without an explicit save step.
  • Hiding permission-limited or unavailable items without explaining count differences.
  • Using collection when a maintained category taxonomy would better help discovery.
  • Making Delete collection, Remove item, and Clear filter look equivalent.
  • Copying a collection without clarifying ownership, permissions, and edit independence.
  • Depending on drag and drop for reordering without keyboard controls.

Critique Questions

  • What makes this set a collection rather than a list, category, recommendation, search result, or related-links block?
  • Who owns the collection and who can view, edit, copy, share, or delete it?
  • Is membership manual, criteria-driven, editorial, imported, permission-limited, or generated?
  • What happens to total count, visible count, and selected items after filtering, sorting, and permission changes?
  • Can users distinguish removing an item from deleting the whole collection or clearing the current view?
  • Does the ordering communicate a recommended sequence, manual priority, recency, or arbitrary layout?
Accessibility
  • Use a heading and concise description that name the collection and explain its purpose before item navigation begins.
  • Expose item count, visible count, selected count, unavailable items, and permission-limited state in text.
  • Use semantic list, link, article, table, or grid markup according to the item layout and interaction model.
  • Do not rely on card position, image, color, or drag affordance alone to communicate item order or section membership.
  • Provide keyboard alternatives for reordering and moving items between sections.
  • Give collection actions and item actions accessible names that include the affected collection or item.
  • Announce add, remove, reorder, share, copy, and delete outcomes with status messages that name the affected item or collection.
  • Keep focus stable after filtering, sorting, item removal, section movement, or shared-link permission changes.
Keyboard Behavior
  • Tab reaches collection actions, view controls, filters, item actions, section controls, and pagination in a predictable order.
  • Enter activates item links or buttons according to their visible role, and Space toggles selection controls when present.
  • Reorder controls support keyboard movement such as Move up, Move down, Move to section, or direct position controls.
  • After adding, removing, copying, sharing, or deleting, focus moves to the triggering control, a status message, or the next sensible item.
  • Escape closes collection action menus, share panels, or confirmation dialogs and returns focus to the invoking control.
  • Browser back and forward restore collection identity, view mode, filters, sort, selected item, and section expansion when those are part of navigation state.
Variants
  • Saved content collection
  • Document collection
  • Asset kit
  • Reading list
  • Playlist
  • Learning collection
  • Product collection
  • Shared team collection
  • Sectioned collection
  • Ordered collection
  • Visual collection
  • Read-only published collection
  • Copied collection
  • Permission-limited collection

Verification

Last verified: