The law of common fate is a principle of Gestalt psychology. It states that when elements move together, humans see them as a group as human nature associates objects that share a common motion (e.g., a flock of birds). Designers apply common fate and leverage the power of motion—both real and implied—to create relationships between screen design elements.
In this video, Author, Designer and Educator Mia Cinelli explains the importance of Gestalt principles in visual design and introduces a few of them.
The Gestalt law of common fate addresses motion and orientation in designs. According to this principle, when elements in a design show similar movement or behavior, viewers see them as connected. This phenomenon is natural to the human eye—and mind—because people’s brains tend to seek patterns automatically. Because of this, common fate is a staple in graphic design.
“Gestalt” is the German word for “shape” or “form.” It is a psychological theory of visual perception. The Gestalt school consisted of psychologists Kurt Koffka, Wolfgang Köhler and Max Wertheimer, working in 1920s’ Germany. The central point of Gestalt theories is that human beings perceive objects in the world in patterns or whole forms. According to the Gestalt psychologists, people do not visually process their surroundings as a collection of separate parts. Instead, the mind organizes these elements into a cohesive whole.
The Gestalt principles or laws address this tendency of the mind to simplify a complex image so the person sees it in a certain manner. The human inclination to process visual information accounts for how the elements of a seen image form visual relationships with each other. There are numerous Gestalt principles. Notable ones are the principles, or laws, of similarity, prägnanz, common region, figure ground, proximity, closure, and common fate.
The common fate principle provides a unique perspective on how users perceive and interact with digital products or services. Like other visual designers, UX designers who mindfully apply this principle can create engaging works that help users in their tasks to achieve goals. They can create interfaces that are visually cohesive, intuitively navigable and intriguing, leading to richer user experiences.
Designers can achieve this if they provide strong visual cues that help users process and digest information fast. Digital products that feature common fate can be aesthetically pleasing; they can also serve to help users in busy environments or potentially stressful situations, as they direct attention efficiently. Designers apply the common fate law in:
Web Design: When website users perceive elements that move together as related, it helps to foster a sense of cohesion and continuity. In a menu, when users click an option, all elements move together to show they are related. Animations can make multiple elements move simultaneously. This can help guide the user's attention to specific parts of the page. Therefore, the interaction becomes more engaging while it helps them in problem solving, such as selecting an item to buy. Carousels are especially helpful for this purpose.
Volkswagen utilizes carousels to showcase their new releases.
© Volkswagen, Fair Use
Mobile Apps: Designers often apply the law of common fate when they use similar animations for user interface (UI) elements that have the same purpose. This creates a visual link between these elements, and makes them appear related. In a travel app, for example, the cards in “Past Trips” can slide together to show they are in the same category. Items that move or point together guide the viewer's eyes along a set path. That ensures a clear flow of information, an essential aid for smartphone users and others.
Infographics: Infographics, with their integration of text and visuals, frequently employ the law of common fate. Elements that follow common fate can guide the viewer's eyes and ensure a clear flow of information. It also enhances readability and makes the information more digestible.
Visual Hierarchy: The law of common fate helps designers establish a visual hierarchy within their interfaces. When they group elements with shared movement or behavior, designers can usually communicate relationships and emphasize the importance of specific components.
User Guidance: Common fate perception allows designers to guide users' attention and direct their focus towards important elements or interactive features. When they employ this principle, designers can ensure that users can easily navigate and interact with the interface
Common fate helps to clearly guide users around menu options.
© Priyanka Jeph, Fair Use
Coherence and Consistency: If designers apply the law of common fate well, they will enhance the overall coherence and consistency of their designs. Elements that share a common fate appear visually connected and reinforce a sense of unity and purpose. That creates a more harmonious user experience.
Users scroll through related items via a horizontal slider on Amazon.com. Users can appreciate the related products in the slider and can scroll through them for alternative items.
© Amazon, Fair Use
Efficient Information Processing: If designers group related elements based on their movement, they will facilitate users' cognitive processing. Users can quickly and intuitively understand the relationships and functionalities of elements. That will lead to improved efficiency and ease of use.
Here are some of the main features where user experience (UX) and user interface (UI) designers apply common fate:
Navigation Menus: Dropdown menus or submenus that expand or collapse with a consistent motion create a visual connection between the main menu and its subcategories. Users can anticipate the behavior and understand how the designer has organized the navigation system.
In dropdown menus, when a submenu appears to the right of the first menu, users expect the pattern to continue if they select another subcategory—i.e., it will appear to the right as well.
© Kathryncodonnell, Fair Use
Loading Animations: Loading animations can employ coherent and synchronized movement. For example, they can be spinning circles or progressing bars. These can convey a sense of progress and continuity. Users perceive these animations as a group, since these indicate that the system is actively working. This lends great predictably to a user or customer experience and helps build trust as a design pattern.
List Animations: When designers display lists or grids, they can animate the appearance or disappearance of items with a common movement pattern or direction. This helps users understand the relationship between elements. For example, a cascading animation for a list of items conveys the idea of a shared fate or relationship.
Interactive Feedback: Interactive elements, such as buttons or links, can employ visual cues like hover or click animations that exhibit a shared movement pattern. This gives users immediate feedback and reinforces the idea that these elements are related and serve a common purpose.
Apple’s product pages frequently feature animated product images. Users scroll, and pictures of the product and its components move together. This establishes an appealing visual narrative that speaks to the user.
© Apple, Fair Use
Here are some strategic ways that designers incorporate this principle in interfaces:
Guide User Focus: Control design elements to guide user focus towards key areas of the interface. This can be a button, a new feature or anything else a designer wants to highlight and draw attention to. When designers group elements together and make them move in the same direction, it helps users understand an interface structure easily.
Improve Navigation: Designers use common fate to improve the ease of navigability in a design. They can group related elements together and make them move in the same direction to help users understand the interface’s structure more easily. That will promote a smooth navigation experience.
Enhance Aesthetics: When designers integrate motion into their designs, it not only serves functional purposes but also adds a dynamic, visually appealing touch. Thoughtful animations, transitions and effects can make an interface more engaging and enjoyable for users.
Make Consistent Animations: Designers should ensure that elements with a shared fate or purpose exhibit consistent and synchronized animations. This consistency reinforces the perception of a group. That helps users to understand the interface and engage with it.
Differentiate Visual Elements: While designers should visually connect elements with a common fate, it's also essential to differentiate them from unrelated elements. So, they should use effective contrast in color, shape or size to distinguish between groups and prevent users from associating unrelated elements.
The law of common fate in grouping elements is stronger here compared to the law of similarity (another Gestalt principle). Regardless of color scheme, it is important to ensure synchronous movement so that the user can perceive this.
© Jon Hensley, Fair Use
Give Clear Directional Cues: Make sure that the movement or behavior of elements provides clear prompts as to direction. Users should be able to anticipate the trajectory or outcome based on the visual cues, facilitating their understanding of the interface.
Conduct User Testing and Iterate with the Feedback: Designers should validate the effectiveness of common fate perception in their designs through user testing and feedback. Gather insights from users to understand how they interpret and perceive the relationships between elements, allowing for iterative improvements.
Ensure Contextual Relevance: Consider the specific context and purpose of a design that uses the principle of common fate. Designers should ensure that the shared movement or behavior aligns with the overall user journey and serves a meaningful purpose in facilitating the user's goals.
Google’s Material Design—The ripple effect features when users click on a button. This effect starts at the point of interaction and connects the action to the outcome visually.
© Google, Fair Use
While common fate is a powerful tool in UX design, it's essential to consider the potential risks and limitations associated with its application. Here are a few considerations:
Overuse or Misuse: If a designer applies common fate excessively or inappropriately, it can lead to visual clutter and confusion. Ensure that the use of this principle aligns with the overall design goals and does not overwhelm or distract users. For example, a digital solution should solve problems, so what problem does the target audience have, and how much of this Gestalt design is appropriate? Is there ample negative space or white space to help users notice the common fate elements easily?
Cultural and Contextual Sensitivity: Different cultures and contexts may interpret common fate differently. Consider the target audience and their cultural background to ensure that the design effectively communicates the intended message. For example, patterns, symbolism and metaphors can hold different meanings for people from other cultures, as can color meanings and the reading direction for text (in Arabic, for example, it’s right to left). Research is therefore essential for any designer or design team looking to cast their brand’s message correctly across the world. UX researchers should apply careful insights gained from thorough studies and tools such as user personas, user journey maps and customer journey maps.
Accessibility Considerations: Common fate effects that rely solely on visual cues may pose challenges for users with visual impairments or other accessibility needs. Designers should always strive to convey information to achieve an inclusive user experience. When designers understand their users’ needs, they can cater to all abilities.
User Familiarity: Users' familiarity with common fate principles may vary. Designers should conduct usability testing to ensure that users interpret the intended relationships between elements correctly. Testing is a vital part of any UX design process, and designers who investigate user interactions will glean valuable insights. From these, they will be able to improve various facets of their designs, including information architecture and overall usability.
These fish are “on board” in the same direction, moving naturally, as a school.
© Saif Ali Khan, Fair Use
The law of common fate is just one of the many tools in a designer’s toolkit. Given its popularity, such as in the form of carousels, it’s worth considering early on and in wireframing. It’s one of various Gestalt principles that can help craft effective and user-friendly interfaces.
Conduct user research and use it with discretion to help guide users around. One way to envision common fate is to see it as a well-signposted escalator to assist target users to the next level of engagement with the brand’s web page or app screen.
Take our course Gestalt Psychology and Web Design: The Ultimate Guide.
Find some fascinating insights in our piece The Laws of Figure/Ground, Prägnanz, Closure, and Common Fate – Gestalt Principles (Part 3).
Read more about the Law of Common Fate in The Law of Common Fate: Designing for Motion and Animation by Incharprasad.
Find further details in this piece: Gestalt and Desigin: Continuity and Common Fate by Kathryncodonnell.
See more in-depth insights in this article: Improve Your Design With The Principles of Continuation And Common Fate (Part Three) by Jon Hensley.
When they leverage this principle, designers can create a sense of unity and coherence in their designs. They can guide the viewer's attention to certain areas more effectively.
For instance, in a website design, arrows pointing in the same direction can suggest a sequence of actions for the user, such as scrolling down or moving to the next page. Similarly, elements like icons or text that share a directional orientation can subtly indicate how to navigate through content. This can improve usability and user experience.
When designers incorporate the law of common fate, it helps establish a visual hierarchy as it emphasizes the relatedness of certain elements over others. This not only organizes information in a way that's visually appealing but also intuitively guides users through a design. That makes interactions smoother and more predictable.
Designers can apply this principle by aligning elements in a way that supports the main action they want users to take. For example, if they align call-to-action buttons along a common axis or use consistent directional cues across a website, it can reinforce the path users should follow, and makes the design more effective and user-friendly.
Designers can also leverage other Gestalt principles, such as proximity, to help with hierarchy. Watch this video, where creative director and CEO of Hype4, Michal Malewicz, explains proximity as a tool for visual hierarchy:
In UI design, if designers overlook the principle of common fate, it can lead to a disjointed user experience. Here are critical mistakes to avoid:
● Inconsistent Animation Speeds: Elements that users should perceive together should animate at the same speed. Variations can confuse users, and make it hard to understand which elements are related.
● Misaligned Directional Cues: Ensure that all elements intended for grouping together move or point in the same direction. Contradictory cues can disrupt the user's understanding of the interface's structure.
● Overuse of Motion: While motion can guide attention, excessive or irrelevant movement can distract and annoy users, and undermine the sense of common fate.
● Ignorance of Hierarchical Structure: Common fate can also apply to the visual hierarchy. Elements related in function or importance should visually correspond to each other to reinforce their connection.
To strengthen common fate in UI design, consider how elements can visually and behaviorally align to signal their relationship to users. This alignment helps to create a cohesive and intuitive user interface.
Consider how a good design pattern can help establish a stronger connection with users. Watch as senior UX consultant Vitaly Friedman explains UI patterns:
Designers can test the effectiveness of common fate in their designs through several user testing methodologies that ensure elements perceived as part of a group do function as intended:
● A/B Testing: Implement A/B testing by creating two versions of a design—one that applies the common fate principle strongly and another that does not. Analyze metrics such as user engagement, task completion time, and error rate to assess which design performs better in terms of user understanding and interaction.
● Eye Tracking: Use eye-tracking technology to see how users visually navigate the design. Eye-tracking can reveal whether elements that users should perceive as being together capture attention as a group, which indicates the effective application of common fate.
● Heatmaps: Apply heatmap tools to analyze where users click, touch, or hover most frequently. Heatmaps can show if users group elements together based on their movement or directional cues. This will provide insight into how well the common fate principle is at play.
Take our Conducting Usability Testing course for in-depth insights into how to test the effectiveness of UI designs. Watch this video as CEO of Experience Dynamics, Frank Spillers explains:
The Gestalt law of common fate interacts closely with other Gestalt principles to enhance visual perception and design coherence.
● For example, it works hand in hand with the law of similarity, which suggests that users will perceive objects that look similar as part of the same group. When elements share both direction and appearance, this strengthens their perceived connection, making it easier for users to understand and navigate design layouts.
● Additionally, the law of common fate complements the law of proximity, which states that users see objects that are close to each other as a unit. Together, these laws can guide viewers' attention toward or away from specific design elements. This can help to create focal points and organize information hierarchically.
Watch this video, where creative director and CEO of Hype4, Michal Malewicz, explains proximity as a tool for visual hierarchy:
● The interaction between the law of common fate and the law of closure, where users’ minds fill in missing information to see a complete object, also plays a crucial role. This can lead to dynamic interactions in design, where implied movement or alignment suggests a complete form or directs the viewer’s gaze through a narrative sequence within the design.
● Moreover, the law of common fate can enhance the principle of figure-ground. That involves users distinguishing between foreground and background elements. When they align movement or directional cues, designers can make certain elements stand out as the “figure” against a less dynamic “ground”—that can improve legibility and emphasis.
In mobile app design, designers need to carefully consider how they apply the Gestalt law of common fate to ensure a cohesive and intuitive user experience. Key considerations include:
● Screen Size Limitations: Given the smaller screen sizes of mobile devices, it's crucial to manage the movement and direction of elements wisely. Ensure that animations and transitions guide users without overwhelming the limited space.
● User Interaction: Consider how touch interactions, such as when users swipe or scroll, can reinforce the common fate principle. Elements that move together in response to user actions can enhance the perception of relatedness.
● Performance: Mobile apps must remain responsive and fast. Animations and movements that apply common fate should not compromise the app's performance. Optimize animations to ensure they are smooth and do not cause delays.
● Contextual Relevance: Ensure that the application of common fate aligns with the app's purpose and user tasks. Movement and grouping should always aim to simplify navigation and understanding, not just serve as an aesthetic choice.
● Cultural Considerations: Users from different cultures may interpret directional movements differently. Designers must consider these differences to ensure that the common fate principle effectively communicates the intended relationships between elements to all users.
Watch this video as CEO of Experience Dynamics, Frank Spillers explains Mobile UI design patterns, and see how these can be helpful:
To enhance the principle of common fate in UI design, designers employ various tools and techniques. Here are some effective strategies:
● Animation and Motion: Utilize animation tools within design software like Adobe After Effects, Figma or Sketch to create smooth transitions and movements that guide users' attention and group elements together visually.
● Consistent Visual Cues: Apply consistent visual cues such as color, shape or size to group elements and ensure their synchronous motion or transformation reinforces the effect. This visual consistency helps users perceive them as related or performing a similar function.
● Directional Alignment: Ensure elements that users are supposed to associate move or point in the same direction. Do this through layout adjustments and motion design that guide the user's eye in a unified direction.
● Timing and Easing: Use timing and easing functions within animation tools to synchronize the speed and flow of moving elements. This ensures that all related elements share the same dynamics, and reinforces their connection.
● Prototyping Tools: Leverage prototyping tools like Axure, InVision or Principle to test and refine how elements move together in real-time scenarios. Prototyping allows designers to experiment with different approaches to common fate and assess their effectiveness before final implementation.
Watch as author and human-computer interaction (HCI) expert Alan Dix explains the importance of prototyping:
● Prioritize Clarity: Use common fate to group related elements, and ensure they move or align in a way that clearly indicates their relationship. However, do not let this grouping clutter the interface. Whitespace around these groups can help maintain clarity and focus.
● Maintain Hierarchy: Use whitespace to establish a visual hierarchy, to emphasize important elements or groups. This helps users navigate the interface more intuitively—they can understand which elements are related and which are most important at a glance.
● Enhance Usability: Whitespace can improve readability and interaction comfort as it prevents information overload. Use it to separate groups of elements governed by common fate, which will make the interface more approachable and easier to use.
● Optimize for Different Screens: Be mindful of how common fate and whitespace work together on various devices. A balanced design should adapt seamlessly across screen sizes, and maintain usability and aesthetic appeal. Watch CEO of Experience Dynamics, Frank Spillers explain how responsive design achieves this:
● Test and Iterate: Conduct user testing to find the right balance between common fate and whitespace. Observe real users interacting with the design; it can provide valuable insights into how effectively the design communicates group relationships and prioritizes content.
Take our Masterclass on usability testing, with Cory Lebson, Principal and owner – Lebsontech LLC.
Yes, the Gestalt law of common fate significantly improves UI accessibility. This principle can enhance the usability of interfaces for a wide range of users, including those with disabilities. Here are some ways and reasons:
● Enhanced Visual Organization: When designers group related elements through motion or direction using common fate, it helps users with cognitive disabilities understand the interface's structure and functionality more easily.
● Reduced Cognitive Load: For neurodiverse users, interfaces that apply common fate can simplify information processing as they clearly indicate which elements are related and how they function together.
● Improved Navigability: Users with motor impairments benefit from interfaces where related controls or information move together. It makes it easier to predict where to click, tap, or focus next.
Watch our video to appreciate how important accessibility is as a consideration in UI and UX design:
Dinh, K. (2022). Building mobile user interface by applying design principles (Bachelor’s thesis, LAB University of Applied Sciences). Supervisor: Aki Vainio, Lecturer, LAB UAS. https://www.theseus.fi/bitstream/handle/10024/781949/Dinh_Khanh.pdf?sequence=2
Khanh Dinh's thesis, "Building Mobile User Interface by Applying Design Principles," investigates the application of six design principles (visual hierarchy, similarity, proximity, common region, common fate, and symmetry) to enhance mobile user interface design and user perception of quality. Utilizing a qualitative research method, deductive reasoning, and design science research, this study creates two mobile interfaces for a food application menu to test these principles. The findings reveal that incorporating design principles not only improves the aesthetic appeal and functionality of mobile interfaces but also aids users in efficiently completing tasks and enhances visual satisfaction. This research underscores the significance of design principles in the development of user-friendly mobile interfaces, contributing to the field of Business Information Technology.
1. Malone, E. (2023). A Guide to Gestalt Principles for UX Designers: A mini visual design guide to help user experience designers leverage gestalt principles for better designs. 8 paw press.
This book offers a concise exploration of Gestalt principles in UX design. Erin Malone provides a practical guide, applying these principles to digital interfaces with a focus on mobile and web examples. The book delves into visual hierarchy, animation, and microinteractions. It aims to help readers improve design skills. It also includes downloadable templates for design documentation. This makes it a hands-on resource for UX designers.
2. Johnson, J. (2020). Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Guidelines 3rd Edition. Morgan Kaufmann.
"Designing with the Mind in Mind" by Jeff Johnson offers user interface (UI) designers a foundation in cognitive psychology, essential for understanding the rationale behind UI design guidelines. Initially grounded in cognitive psychology, early HCI principles aimed to optimize problem-solving, memory, and language in interfaces. However, as the field has diversified, practitioners often come from varied backgrounds, not all deeply versed in cognitive psychology. This book empowers designers with the science behind design rules, facilitating educated choices amid project constraints and enhancing the ability to justify design decisions. It includes Gestalt laws. The updated edition expands on topics such as persuasion, cognitive economics, emotional design, trust, habit formation, and speech interfaces, making it a vital resource for contemporary UI design.
Here’s the entire UX literature on the Law of Common Fate by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
