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
Become a better designer
Sign up for Links for Thinks — a weekly roundup of design resources sent straight to your inbox.
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