In design, elements that move, change, or behave in the same way are naturally perceived as belonging together. This principle, known as common fate, is one of the core Gestalt principles and is based on our tendency to organize visual information into meaningful patterns. As with other Gestalt principles, common fate builds on our natural tendency to organize visuals into simple, clear structures – a concept known as the law of Prägnanz. While common fate originates from motion, its impact extends far beyond animation, helping designers create clearer interfaces, stronger visual hierarchies, and more intuitive user experiences.
What Is Common Fate?
Common fate describes our tendency to perceive elements that move or change together as part of the same group.
For example:
- Navigation items sliding into view together
- Cards appearing with the same animation
- Icons responding simultaneously to an interaction
- Interface elements sharing the same behavior
Even when elements look different, shared movement can make them feel connected.
Common Fate in UI/UX
Unlike proximity or similarity, which rely on static visual relationships, common fate uses behavior to communicate relationships.
Users don’t just see interfaces – they experience them.
When related elements move together, users immediately understand:
- what belongs together
- what changed
- what requires attention
- where their focus should go next
This makes interfaces feel more intuitive and easier to navigate.
Content Transitions and State Changes
A common use of common fate in UI/UX design is communicating state changes.
Examples include:
- Content loading together
- Interface sections updating simultaneously
- Media controls appearing alongside related content
- Multiple elements responding to the same action
These coordinated changes help users understand that different interface elements belong to the same experience.
Spotify provides a good example. When a user opens a playlist:
- Cover art appears
- Playlist metadata loads
- Track list populates
- Playback controls become active
Although these are separate interface elements, their coordinated behavior makes them feel like a single content group.
Common fate helps users understand that all elements belong to the same content experience.
Navigation Design
Navigation is one of the most common uses of common fate.
Examples include:
- Dropdown menu items appearing together
- Mobile navigation panels sliding in as a group
- Mega menus expanding from a single trigger
- Navigation elements collapsing simultaneously
Because all elements share the same movement, users naturally perceive them as one system.
A common example is a mobile hamburger menu. When users tap the menu icon, the navigation panel slides into view while menu items appear together as a coordinated group. Their shared movement signals that they belong to the same navigation system.
Common fate helps users understand navigation structure without additional explanation.
Onboarding and User Flows
Many onboarding experiences use common fate to guide users through a process.
Examples include:
- Progress indicators updating together
- Form sections appearing step by step
- Instructional elements animating in sequence
- Success states affecting multiple components simultaneously
Coordinated motion helps users understand what is happening without requiring additional explanation.
Common fate reduces confusion and makes onboarding feel more intuitive.
Dashboards and Data Visualization
Common fate is especially useful in complex interfaces.
For example:
- Related charts updating at the same time
- Metrics changing together after a filter is applied
- Dashboard widgets loading in coordinated sequences
These interactions help users understand relationships between data points and interface elements.
Google Analytics demonstrates this principle well. When a user changes a date range, charts, metrics, tables, and reports update simultaneously. Their shared behavior helps users understand that all components belong to the same data system and are responding to the same interaction.
Common fate helps users identify relationships between information more quickly.
Common Fate in Web Design
Modern websites frequently use common fate to create visual flow.
Examples include:
- Hero section elements fading in together
- Cards moving simultaneously during scrolling
- Product galleries responding as a group
- Testimonials appearing in coordinated transitions
When used correctly, motion reinforces hierarchy and guides attention naturally.
For example, many SaaS websites animate headlines, supporting text, and call-to-action buttons together when the page loads. Because these elements share the same behavior, users perceive them as a connected message rather than separate pieces of content.
Common fate helps create smoother user journeys and stronger visual hierarchy.
Common Fate in Graphic Design
Although common fate is often associated with animation, it can also influence static graphic design.
Designers can suggest common fate through:
- Directional lines
- Repeated visual movement
- Flowing compositions
- Groups of elements oriented in the same direction
For example, a series of arrows pointing in the same direction will often feel connected, even without animation.
Similarly, posters frequently use repeated shapes, diagonal compositions, or directional elements to create the impression that objects belong to the same visual system.
Shared direction can create grouping even when nothing is actually moving.
Using Common Fate to Improve UX
Group Related Actions
Motion should reinforce relationships, not create new ones.
When related elements move together, users immediately understand they belong to the same group.
Guide User Attention
Movement should support the user’s goal, not compete with it.
Subtle motion can draw attention toward important actions, notifications, or calls to action without overwhelming the interface.
Reinforce Navigation Structure
Shared movement helps users perceive navigation elements as part of a single system.
This is especially useful in menus, sidebars, and mobile navigation patterns.
Clarify State Changes
Animation should communicate hierarchy, feedback, or state changes.
Loading indicators, success states, and button interactions become easier to understand when related changes happen together.
Common Fate and Predictive Eye Tracking
Designers often assume that motion automatically improves usability, but animation can also distract users from important actions if it isn’t used carefully.
Tools like Attention Insight help evaluate visual hierarchy before launch by predicting where users are most likely to focus. While predictive eye tracking analyzes static attention rather than motion itself, it can reveal whether key elements are already visually dominant before animations are introduced.
The goal isn’t simply to add movement – it’s to ensure that motion reinforces hierarchy, supports user goals, and guides attention effectively.
Common Mistakes to Avoid
- Animating every element on the page
- Using different animation styles for related content
- Creating movement without purpose
- Overusing motion effects
- Distracting users from primary actions
Common Fate and Other Gestalt Principles
Common fate often works alongside other Gestalt principles:
- Proximity groups elements through distance
- Similarity groups elements through appearance
- Figure-ground separates subjects from backgrounds
- Closure helps us complete incomplete forms
- Continuity guides the eye along smooth paths
Common fate adds another layer by grouping elements through shared movement and behavior.
Final Thought
Common fate shows that users don’t just group elements based on appearance – they also group them based on behavior.
Whether designing a website, mobile app, dashboard, or graphic composition, coordinated movement can help communicate structure, improve usability, and guide attention more effectively.
If these elements moved together, would users naturally understand that they belong together?
