Common Fate
Elements moving together are perceived as part of a group, making motion a tool to show relationships
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
See how Common Fate works in real design
Take these principles further with interactive exercises on visual hierarchy, color theory, and layout — free to start.
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.
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