| UI or UX | UI + UX - Responsive multi-column grid of peer object cards | UI + UX - Single-column sequence of bounded rich object summaries | UI + UX - Named, purposeful set of items with collection-level metadata and membership behavior | UI + UX - Semantic row-and-column data comparison surface |
| UI guidance | Arrange peer object cards in a responsive grid with stable tile widths, predictable gutters, consistent preview aspect ratios, titles, compact metadata, state labels, and one primary action area. | 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 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 table with a specific caption or heading, visible column headers, optional row headers, aligned values, consistent row actions, and enough spacing for scanability. |
| UX guidance | Use card grid when users need visual browsing, light comparison, and quick selection across many peer objects that can be understood from compact card summaries. | Use card list when users browse rich object summaries and need enough context to choose or act without opening every item. | Use collection when the set itself is meaningful and users need to save, curate, share, revisit, sequence, or manage item membership. | Use tables when aligned columns help users compare records, find exceptions, audit values, or triage work faster than opening each item. |
| Good UI | A course catalog grid shows four cards per row on desktop, each with the same image ratio, course title, provider, level, duration, saved state, and Enroll action. | 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 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 payment review table has the caption June vendor payments, headers Vendor, Status, Due date, Amount, and Action, right-aligned amounts, and row actions labelled by vendor. |
| Bad UI | A grid mixes landscape images, portrait images, text-only cards, and action tiles without reserving preview space or explaining missing media. | Every card uses a different layout, so deadline, owner, status, and actions appear in different places. | A page shows cards named Resources, More, Useful, and Links with no collection title, purpose, count, or ownership. | A div layout looks like columns but has no caption, table semantics, or header associations. |
| Good UX | A shopper filters a product grid to In stock, switches from comfortable to compact density, selects three items, and the selected count and item positions remain understandable. | 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 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 sorts by Amount descending, filters to Pending, moves to page 2, and the table keeps its caption, active sort, active filter, row count, and selected payment context. |
| Bad UX | A user tries to compare course prices, but every card wraps the price under different text lengths and the grid gives no sort or table alternative. | 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 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. | Filtering the table removes selected rows without explaining why or offering a clear-filter path. |
| Best fit | Users browse peer objects where visual preview, compact identity, and quick first-pass selection matter. | Users need to browse rich object summaries with preview, summary text, metadata, status, and actions. | Users need to save, curate, share, revisit, sequence, or maintain explicit items as a meaningful set. | Records share comparable attributes that users need to scan in aligned columns. |
| Avoid when | Users need dense scanning of many text-heavy records. | The content is dense and homogeneous enough for a compact list view. | The set is only a temporary search result or filtered query. | The content is layout, not data. |
| Required state | Default grid with heading or label, result count, active view controls, and at least one full row of peer cards. | Default card list with heading or label, result count, and visible card summaries. | Default collection state with title, description, owner or source, item count, visibility, updated time, and primary action. | Default table state with caption, visible headers, row values, and result count or context. |
| Accessibility burden | Give the grid or list a heading, result count, and concise description of active filters or sort order. | Use a real list or region with a heading for the card sequence. | Use a heading and concise description that name the collection and explain its purpose before item navigation begins. | Use native table semantics for tabular data rather than div-only rows. |
| Common misuse | Using card grid as decorative chrome for rows that need dense scanning or aligned comparison. | Using cards as decorative wrappers for dense rows. | Treating any grid of cards as a collection without collection identity or membership behavior. | Using table markup to create page columns or layout spacing. |