Dialogue·Chat-list avatar study
← Design notes

Avatars in the chat list

Our chat list has no avatars at all — a row's identity is its title plus the coloured cast-name line. That works until two rooms hold the same people: a 1:1 with Bobby and a two-person group with Bobby render as the same row, separated by one word in the meta line. WeChat doesn't solve that with words — it solves it with the avatar: one photo for a 1:1, a composite tile for a group. The two references disagree about how: WeChat composites the members' avatars, WhatsApp shows one generic group glyph and lets the name do the work. This page puts five treatments beside the current row so the choice is made by eye. Pick one and I'll build it.

the case Two reasons to do this now. Photos exist — gap 11 shipped the crop editor and viewer (v512–v514), so human rows would carry real faces rather than only identicons. And the duo-chat work (v515–v530) deliberately allows a 1:1 and a group with the same person to coexist, which is correct but makes the collision reachable in normal use.

The specimens

Every card renders the same seven rows through a different avatar rule, in both app themes. The two rows marked THE COLLISION are the case that motivated the study: same person, two different rooms.

Three room kinds, one glyph each

The better idea, and it makes the whole argument above beside the point. A room here is one of three kindshuman only, personas only, mixed — and that is a fact the title line never tells you. So the tile shouldn't try to name the members at all (WhatsApp is right about that); it should name what kind of room this is. One generic glyph per kind, no composites, no counting.

It solves the collision as a side-effect — a face against a group glyph — and it earns its place on every other row too, because "is there an AI in this conversation?" becomes answerable from the list. The four families below differ only in how much colour they use to carry the distinction. Singles are unchanged throughout: a 1:1 shows the person, a solo persona chat shows its seat disc.

the vocabulary The glyphs are built from what the app already means, not imported: the two-person silhouette in muted grey (our own rule is that colour is reserved for AIhumanColor() returns muted for every human, and grey is system), and the ✦ four-point star we already use for persona and AI surfaces — the chat-info hero, artifact cards, "Save line". Mixed is one of each, which is exactly what the room is.

The figure — a persona is a person too

The star alone was wrong: our personas aren't bots, they're portrayed people — Lincoln, 梁宁, 小胖看房. So the figure stays human in all three kinds, and what changes is a mark that says this person is voiced. Same two-figure composition throughout: human = both plain, personas = both marked, mixed = one of each, which is literally what the room holds.

The disc — blending the room's colours

Instead of a flat coral, the disc can carry the seat colours of the people actually in the room, so two panels never look alike and the tile matches what you see inside the chat. Humans contribute the muted grey (colour stays reserved for AI), so a mixed room's disc literally shows the mix. A human-only room stays flat muted — there's nothing to blend.

Shown with figure option ②; the two choices are independent — pick a figure and a disc separately.

Locked — and how big?

✓ shipped · v531–v532 Built and live in the chat list, with the text block untouched. Shipped at 2 lines · 36px, then resized to 2½ lines · 46px and top-aligned with the first two lines (v532) — which also moved the unread dot onto the tile's corner and halved the row's left inset to 12px, now that a tile leads the row. The rule below is what shipped; this page stays as the record of how it was chosen. See the Style Guide § chat row.
decided · 2026-07-19 One glyph for every group: the plain two-person figure. The marked-persona figures are dropped — the star said what the colour already says, and the room kinds don't need two signals. So the tile is constant and calm, and the linear blend Ⓐ carries who is inside: flat muted = humans only · colour = personas · colour running into grey = mixed. Singles keep their own face or seat disc.

What's left is the diameter. The row's text line is 14px × 1.3 = 18.2px, so the sizes below are quoted in text lines; the two-line text block (title + meta) is about 2 lines tall, which is where WhatsApp sits.

What each treatment costs

TreatmentGainsCosts
Baseline
no avatar
The list stays text-dense and quiet; the coloured cast names are a look nothing else has.The collision is unreadable at a glance. Faces we now store are never shown.
A · CompositeThe proven answer, copied faithfully. A glance tells you 1:1 from group, and who is in the group.Our composites are flat colour discs, not photos — four of them in one 44px tile is the busiest option. Composite glyphs drop to initials (emoji turn to mud below ~14px).
B · Lead + countCalmest — one clean tile per row, the number carries the rest. Reads well with a persona disc, which is a strong shape on its own.You lose who is in the room at a glance. A 2-person group and a 1:1 differ only by a small badge.
C · StackInstantly reads "more than one person" without a grid; keeps faces recognisable at 30px.Not a messenger idiom (it's a Slack/Linear pattern); ragged left edge makes the title column start at a slightly different place per row.
D · Generic glyph
WhatsApp
The calmest of all, and the muscle memory of the app our audience actually uses. One shape, no composite machinery, legible at any size.Shows nothing about who's inside — WhatsApp gets away with it because groups carry a user-set name, an uploadable group photo, and a sender-prefixed preview line. We have none of those. Persona panels lose their colour identity.
D′ · HybridWhatsApp's calm where the title already names the members; the seat disc where the tile carries information the title can't. Resolves the collision as a face-vs-glyph contrast.Two rules instead of one — a room that holds both people and personas has to pick, and it picks the panel.
my read — revised Before WhatsApp's rule was on the page I recommended A, on the grounds that it was the proven answer and the only one that says who. Seeing the two references side by side changes that, for one reason: WhatsApp is the muscle memory we've said we're building against (a world audience, not China-first), and its answer is deliberately to show nothing about the members — because the group's NAME does that job. Ours does too: our human groups are titled from their members. So the composite in A spends the busiest element on the list repeating what the title already says.

I'd ship D′. Human groups take WhatsApp's calm glyph; persona rooms keep the seat disc, which is the one case where the tile tells you something the title doesn't. The collision still resolves at a glance — a face against a glyph is a bigger difference than one word. If you'd rather have exactly one rule with no exceptions, D is that, at the cost of flattening every persona panel into the same grey circle.
not in this study The proven row is avatar · title + last-message preview · time. This page decides the first part only; we have never had the message preview, and it needs the last message in the chat-list payload, which the server doesn't send today. Worth doing — separately. Also unchanged either way: the folded “Chats from Vibes” entry row keeps its stack glyph, and the persona seat colours stay per-room, so a persona's disc here matches the colour it wears inside that chat.
Dialogue · chat-list avatar study · authored 2026-07-19 · the collision it exists to fix comes from the duo-chat work in Proven Better New §gap 9 · component reference: Style Guide