Avtrz
BlogGuides
Guides7 min read

Designing people rows that don't feel like a spreadsheet

Avatars are 32 pixels of UX. Notes on cropping, ringing, fallback states, and the eight times you should not show a photo.

Kira Lee··7 min read
32px
UI · density
UI · density

A people row is a small thing: a name, a couple of fields, and a circular photo about thirty-two pixels wide. It is also the unit your product is mostly made of, repeated a few hundred times per screen. Thirty-two pixels, multiplied by everything.

These are the notes we give teams integrating Avtrz. They are about the photo, but mostly they are about restraint.

Cropping

Business profile photos are not square and the face is rarely centered. Crop to the face, not the frame. Avtrz does this server-side (request a size and you get a face-aware crop), but the rule holds whatever the source: a head that touches the top edge looks like a mistake even when the photo is real.

One radius, everywhere

Pick a circle or pick a rounded square and use it in every row, card, and popover. A product that mixes avatar shapes reads as two products.

Rings and states

A ring around an avatar is a strong signal, so spend it carefully. Use it for exactly one meaning (the active or selected person) and use a single, low-chroma color. The moment a ring means “online” in one place and “selected” in another, it means nothing.

Inactive avatars can drop to grayscale. It quiets the row without hiding anyone, and it makes the one avatar you do want noticed actually get noticed.

The fallback is part of the design

Most teams design the photo and treat the no-photo case as an afterthought. Reverse that. Initials on a calm, consistent background are a fine fallback; design them first, because on day one a meaningful share of every list will be initials, and because a 404 should land somewhere you chose.

Design the empty state first. On day one, the empty state is most of your product.

When not to show a photo at all

A face is attention. Sometimes attention is the wrong thing to spend. We tell teams to leave the photo out (or keep it deliberately quiet) in cases like these:

Dense tables, bulk actions, and deleted records

In a table built for scanning numbers, a column of faces fights the data. During a bulk action, faces pull the eye away from the checkboxes. On an archived or deleted record, a bright photo suggests the row is live when it is not. Quiet the avatar, or drop it.

System rows, your own row, and tiny sizes

An automation or a service account is not a person; an icon reads more honestly than a face. Your own avatar, repeated in every row you touched, becomes noise. And below about twenty pixels a photo is just a smudge; initials carry more information at that size.

That is eight cases, give or take, where the right move is less. The photo is a tool for making a product feel like it is about people. Like any tool, it works because you do not reach for it every time.

Written by
Kira Lee
Design at Avtrz. Thinks a lot about 32 pixels of UX.
More posts
Twice a month, max

Get the next customer story in your inbox.

Engineering posts, customer stories, and the occasional changelog. Unsubscribe in one click.

Designing people rows that don't feel like a spreadsheet · Avtrz Blog