Visual Perception
Gestalt Similarity
How visual consistency signals functional consistency
Key Insight
Elements that look similar appear related and are expected to behave the same.
Key Points
- •Similar color, shape, size, or typography signals that elements belong to the same category
- •Users expect visually identical elements to have identical behavior
- •Breaking similarity draws attention-useful for calls to action
- •Similarity works across distance; grouped-looking items feel related even when apart
- •Inconsistent styling creates cognitive friction and erodes trust
- •[FIGURE 2.5 - Similarity grouping] Shows: Grid of stars where some are larger/hollow and others are smaller/filled; similar stars group together visually. Teaches: Visual similarity (size, fill, shape) creates grouping independent of proximity. Reproduce as: Interactive grid where toggling star styles changes perceived grouping.
Guidelines
- ✓Style all interactive elements of the same type consistently (buttons, links, cards)
- ✓Use a distinct visual treatment for primary vs. secondary actions
- ✓Keep icon styles uniform-don't mix filled and outlined in the same context
- ✓Break similarity intentionally to highlight a single element (e.g., a CTA button)
- ✓Ensure disabled states are visually distinct from active states
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall - strengthens long-term retention