Common Fate
Elements moving together are perceived as part of a group, making motion a tool to show relationships
Overview
Definition
What is the Common Fate principle?
The Gestalt principle of Common Fate states that elements moving in the same direction, at the same speed, or transforming in the same way are perceived as a single group. Of all the Gestalt laws, common fate is the most dynamic — it relies on motion rather than static appearance, and it can override other grouping cues like color or proximity.
In modern product design, common fate has become increasingly relevant as interfaces grow more animated. When a set of cards slides together, a menu and its items expand as one unit, or selected elements animate in unison, motion communicates relationship more convincingly than any static treatment. This makes it a powerful tool for showing which pieces of an interface belong together during transitions.
Because motion is attention-grabbing, common fate must be used with restraint. Animating unrelated elements together implies a false connection, and excessive or inconsistent movement quickly becomes distracting or even disorienting for motion-sensitive users. The best implementations use coordinated, purposeful motion that reinforces structure rather than decorating it.
Takeaways
Shared Movement
Elements moving together are seen as related
Convey Hierarchy
Use animations to guide users through workflows or transitions
Shared Transitions
Elements transforming in similar ways form natural groups
Dynamic Relationships
Motion and transformation can create temporary groups
When to Use
- •
Align animations like dropdowns to show relationships
- •
Group multi-select items moving together
- •
Use transitions in carousels for cohesive movement
- •
Sync motion of related data points in visualizations
- •
Animate grouped loading states for clarity
When Not to Use
- •
When individual elements need distinct actions
- •
If motion distracts or adds no value
- •
In static layouts without animation
- •
When motion conflicts with the design hierarchy
Common Pitfalls
- •
Overusing motion, creating unnecessary distractions
- •
Applying inconsistent movement in grouped elements
- •
Using motion that slows down interaction
- •
Animating unrelated elements together by mistake
Examples in Action
See how Common Fate works in real design
Interactive UXcel lessons to help you apply Common Fate and other design fundamentals.
Affiliate link — free to start, and you'll get 25% off if you upgrade to Pro. We earn a commission at no extra cost to you.
Dive Deeper
The Law of Common Fate
Interaction Design Foundation
The Law of Common Fate
Interaction Design Foundation
*VIDEO* Common Fate: Gestalt Principle for User Interface Design
Nielson Norman Group / Sarah Gibbons
*VIDEO* Common Fate: Gestalt Principle for User Interface Design
Nielson Norman Group / Sarah Gibbons
Frequently Asked Questions
01What is the Gestalt principle of common fate?
What is the Gestalt principle of common fate?
Common fate is a Gestalt law stating that elements moving or changing together in the same direction and at the same rate are perceived as a unified group, with shared motion acting as the grouping cue.
02How is common fate used in UI design?
How is common fate used in UI design?
It is applied through coordinated motion: dropdowns and their items animating as one, carousel content sliding together, grouped loading states, and selected items moving in unison to show they belong to the same set.
03How is common fate different from the other Gestalt principles?
How is common fate different from the other Gestalt principles?
Most Gestalt principles work on static layouts, but common fate depends on movement over time. Because motion is so salient, it can group elements even when their color, shape, and position would otherwise keep them separate.
04What should designers watch out for when using common fate?
What should designers watch out for when using common fate?
Avoid animating unrelated elements together, keep motion consistent and purposeful, and respect reduced-motion preferences — overusing animation can distract users or cause discomfort for those sensitive to movement.