Similarity Grouping

Similarity — grouping

When you want users to perceive a set of items as belonging together — as a category, as related, as the same kind of thing — visual similarity is the most direct way to communicate it. Two items styled the same way are perceived as a pair; ten items styled the same way are perceived as a set; an entire list styled consistently is perceived as a category.

Core grouping techniques

Same color. The strongest grouping cue. All "active" items in one color; all "inactive" items in another. All items in a category share a color tag or background tint.

Same size. Items at the same visual scale group. All section headings at the same size; all body text at the same size; all icons at the same size.

Same shape. Items in the same shape group. All cards have the same proportions; all buttons have the same corner radius; all icons share a stroke style.

Same icon or symbol. Items marked with the same icon group. All "important" items get a star; all "deletable" items get a trash icon visible on hover.

Same typographic treatment. Bold weight, italic, color shift — applied consistently — makes a class of words read as a group (every link, every keyword, every status name).

Combine multiple cues for stronger grouping. A "selected" item with both a colored background AND a colored border AND a checkmark icon is grouped much more strongly than an item with just one of those cues.

When grouping by similarity is the right move

Related items spread across a layout. If items aren't physically close (proximity grouping isn't available) but should be perceived as related, similarity carries the grouping. Selected items in a long list, for example.

Mixed categories in a single view. A dashboard showing servers in different statuses, files of different types, projects in different stages. Similarity by category lets users scan and segment.

Repeating elements with shared role. Buttons of the same priority; navigation items at the same level; cards of the same type. Consistent styling makes the role recognizable.

Status communication. Active vs. inactive, healthy vs. failing, approved vs. pending. Different visual treatment for each status; consistent within each status.

Worked examples

A multi-status dashboard

A monitoring dashboard shows 50 services. Each service can be in one of four states: healthy, degraded, down, unknown.

• Healthy: green background tint + checkmark icon.
• Degraded: yellow background tint + warning icon.
• Down: red background tint + X icon.
• Unknown: gray background tint + dash icon.

The user can scan all 50 services and immediately see the distribution of states. Color does most of the grouping; icons reinforce.

If only one cue had been used (only icons, no color), the perceptual grouping would be much weaker; users would have to focus on each item individually.

A document list with file-type grouping

A file manager shows mixed file types. PDFs all have a red PDF icon; Word docs have a blue Word icon; images have a small thumbnail; folders have a folder icon. The visual similarity within each file type makes scanning easy: "show me all the PDFs" is just "find all the items with the red icon."

If file types had been distinguished only by extension in the filename, scanning would be much harder.

A navigation hierarchy

A sidebar nav has primary nav items (top level) and secondary nav items (children, indented). Primary items use a slightly larger size, bolder weight, and consistent icon treatment. Secondary items use smaller size, regular weight, indented position.

Within each level, items group by similarity. The two levels are distinguished by their differences. Users see the hierarchy at a glance.