The Law of Common Fate

Your constantly-updated definition of the Law of Common Fate and collection of videos and articles
76 shares

What is the Law of Common Fate?

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.

Show Hide video transcript
  1. Transcript loading…

How the Law of Common Fate Determines the “Destiny” of Design Elements

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.

How Does The Law of Common Fate Work in Digital Design? 

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.

Image showing a carousel of car choices on Volkswagen's website.

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

Image showing a menu of cars and options.

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.

Image showing a carousel of guitar footpedals for sale.

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.

Image showing a screen with dropdown menus.

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.

Animation showing Apple Airpods Pro headphones.

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

How to Apply the Law of Common Fate in Design

Here are some strategic ways that designers incorporate this principle in interfaces:

  1. 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.

  2. 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.

  3. 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. 

  4. 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.

  5. 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.

Gif image showing red and black dots moving to illustrate a point about the law of common fate.

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

  1. 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.

  2. 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.

  3. 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.

    Animated image showing Google Material Design's Ripple effect feature.

    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

    The Risks of the Gestalt Law of Common Fate in UX Design

    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.

      Illustration of blue fish on a white background.

      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.

    Learn More about The Law of Common Fate

    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.

Questions related to Law of Common Fate

How does the Gestalt law of common fate affect visual hierarchy?

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:

Show Hide video transcript
  1. Transcript loading…

What are the mistakes to avoid regarding common fate in UI design?

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:

Show Hide video transcript
  1. Transcript loading…

How can designers test the effectiveness of common fate in their designs?

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:

Show Hide video transcript
  1. Transcript loading…

How does the Gestalt law of common fate interact with other Gestalt principles?

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:

Show Hide video transcript
  1. Transcript loading…

●  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.

What considerations apply to the Gestalt law of common fate in mobile app design?

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:

Show Hide video transcript
  1. Transcript loading…

What tools and techniques enhance common fate in UI design?

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:

Show Hide video transcript
  1. Transcript loading…

How should designers balance common fate with the need for whitespace?

●  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:

Show Hide video transcript
  1. Transcript loading…

●  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.

Does the Gestalt law of common fate improve UI accessibility?

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:

Show Hide video transcript
  1. Transcript loading…

What are some highly cited pieces of scientific research about the Gestalt law of common fate?

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.

What are some highly regarded books about the Gestalt law of common fate?

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.

Literature on the Law of Common Fate

Here’s the entire UX literature on the Law of Common Fate by the Interaction Design Foundation, collated in one place:

Learn more about the Law of Common Fate

Take a deep dive into Law of Common Fate with our course Gestalt Psychology and Web Design: The Ultimate Guide .

One of the key ingredients to a successful product is the creation of effective, efficient and visually pleasing displays. In order to produce such high-quality displays, whether they are graphical (e.g., websites) or tangible (e.g., remote controls), an understanding of human vision is required, along with the knowledge of visual perception. By observing, researching, and identifying examples of our perceptual abilities, we can design products according to these unifying qualities. In order to spread such skills within the world of interaction design, we have developed “Gestalt Psychology and Web Design: The Ultimate Guide.”

Gestalt psychology is a theory of mind which has been applied to a number of different aspects of human thought, action, and perception. In particular, Gestalt theorists and researchers attempt to understand visual perception in terms of the way in which underlying processes are organized and how they help us make sense of the world. The organization of these cognitive processes is important to our understanding of how we interpret the constant stream of visual information entering our eyes and how it becomes a cohesive, meaningful and usable representation of the world. Over the last twenty years, the work of Gestalt psychologists has been adopted by interaction designers and other professionals involved in the development of products for human users.

Within this course, we have compiled and consolidated some of the best resources currently available on the subject of Gestalt psychology and visual perception. To help you appreciate how you can apply Gestalt psychology to web design, we have provided many different examples from existing designs. These draw attention to the exact qualities, quirks, and features of visual perception. Moreover, they discuss how these have been accommodated and, on a number of occasions, exploited so as to support either the user's intentions or those of the designer or client.

The application of Gestalt thinking to design provides us with insights and new ways of approaching problems and challenges. By cementing in our own minds the many ways we organize visual information, we can improve our designs for all users.

All open-source articles on the Law of Common Fate

Please check the value and try again.

Open Access—Link to us!

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!