F2.08.3cards are a net loss on homogeneous listsdesign

Homogeneous lists in cards are a net loss

Aliases: carded list · boxed rows · same-schema list

What it is

Inbox, files, orders: every row shares a schema — sender, subject, time. A list already separates rows with rhythm and alignment. Wrap each row in a card and you pay stroke and padding, and you shatter the Time column — each card parks time on a different x, so you cannot scan down. The extra object-hood is idle, because these were never heterogeneous toys to be handled one by one.

Net loss = fewer visible rows + worse cross-row comparison. Masonry’s uneven height is the media’s own height, not same-schema fields after they have been boxed.

Why it happens

Homogeneous items are often scanned, sorted, multi-selected. Those jobs want columns: one field, one vertical, no per-row hunt. A card gives each row its own coordinate system; inner padding and radius eat the column. The frame also says “regard me as a work,” which fights “find unread among a hundred.”

Lists group with proximity and the odd section header. Common region here is a duplicate cue, and an expensive one.

Where it stops holding

A handful of same-schema items (three to five), each carrying a different image or preview, can still want cards: comparison is weak, recognition rides the picture. Swipe-to-delete or drag-to-reorder rows may use a light fill as a grab, without a full shadow and a double stroke. Once you are in double-digit rows and people are comparing dates or money, the loss shows.

A large card for the first item and rows for the rest is a common compromise: emphasising one, not carding the lot.

Applying it

  • Five or more consecutive items with the same field schema default to rows, not cards. Make date, amount, status a scannable column.
  • If the row must open, make the whole row tappable or put a trailing button; do not hire a frame to announce the object.
  • How to check: take one screen of real data, carded and as rows. Count how many items fit in the same viewport height. Pick one field (date or price) and see whether it forms a vertical you can run a finger down. If the row version both shows more items and has that vertical, cards were a net loss. Ship a one-screen contrast on an already-carded list and time “find the three latest.” Do not close with “cards look more modern.”

Related

  • Same group: F2.08.1 Cards earn their keep on heterogeneous, independently usable units · F2.08.2 Card strokes and shadows spend a lot of space
  • Nearby: E4.02 List items · E4.03 Tables · F2.09 Masonry layout
  • Search terms: homogeneous list · scannable column · card vs list · comparison

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F2.08.3