The law of uniform connectedness is a fundamental Gestalt principle. It states that people see visually connected elements or ones with common characteristics to belong to the same group or unit. Humans perceive elements that share visual cues as more related than elements without them. Designers use this law to create a sense of cohesion, organization and hierarchy.
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 principles, otherwise known as Gestalt laws, suggest how people perceive visual objects and visual elements. These elements include lines or curves, and focal points. They are vital ingredients for visual designers to cue viewers and users so that they can see items in certain ways.
The Gestalt school of psychology consisted of psychologists Max Wertheimer, Kurt Koffka and Wolfgang Köhler in Germany in the 1920s. The Gestalt approach was to develop visual perception theories, such as the law of prägnanz (or good figure), figure-ground and closed region. The centermost idea in Gestalt psychology is that an image is more than the sum of its parts, and people tend to group individual elements into meaningful patterns.
Uniform connectedness refers to the visual connection that designers make between elements through attributes such as color, lines, frames or other means. This Gestalt principle highlights the human tendency to organize and make sense of visual information by grouping related elements like this. The Gestalt school of thought states that people tend to perceive patterns with five main laws or principles. These five are the principle of proximity, principle of similarity, principle of continuity, principle of closure, and principle of uniform connectedness.
Four of these dots are connected—an instant association the mind makes.
© Kathryncodonnell, Fair Use
In the principle of uniform connectedness, when elements are visually linked or connected, human brains automatically group them together. The mind does this even if the design elements in view are not physically touching or spatially close. This grouping helps people make sense of complex visuals by organizing information into meaningful units. It’s an innately essential human skill and a powerful design tool.
Since its “discovery,” the principle of uniform connectedness has long been a staple in graphic design. For example, logo design is a prime opportunity to apply uniform connectedness principles to create a unified and memorable brand identity.
Design principles play a crucial role in creating visually appealing and user-friendly interface designs. The law of uniform connectedness—sometimes called unified connectedness—is a fundamental design tool in user experience (UX) design and particularly user interface (UI) design. Overall, it plays on the fact that the human brain naturally seeks patterns and connections in the information it receives. Designers of digital products can use it to create visually cohesive and organized interfaces that are intuitive for users to navigate.
Uniform connectedness performs several important functions in UX and UI design. These happen in the various ways designs include the principle, according to:
When interactive designers group related elements together and separate unrelated elements, they can establish a clear visual hierarchy. This can guide users' attention and make it easier for them to understand relationships between different elements.
Designers can create visual connections between related elements by utilizing consistent visual cues. These include color, line styles, shapes and patterns. Designers use the principle to maintain consistency in typography, iconography, button styles and other visual elements throughout the design.
Designers apply these visual cues consistently across the design to establish a clear visual language and facilitate the grouping of related elements. For example, in a messaging app, it’s good to use consistent iconography and color schemes for different types of messages (such as text, images or voice notes). This helps users quickly distinguish between different message types and understand their content.
Another example is in an e-commerce website, designers can connect product listings visually by using a common color scheme or background. This helps users perceive the products as belonging to the same category or group. That makes it easier for them to browse and compare options.
The choice of screws is immense, and organized well here.
© Amazon, Fair Use
When designers create boundaries or enclosures around related elements, they can further reinforce the perception of a group. When they enclose elements within a common frame, box or background, designers can visually connect them and signal their relationship to the users of a product or service.
For instance, in a task management app, designers can group tasks that belong to the same project together by enclosing them within a colored box or using a distinct background color. This helps users quickly identify the tasks associated with a specific project and understand their overall progress.
This tabbed navigation shows the selected tab connected to its pertinent content. It is distinct from the other tabs, which are closed off.
© NYC.gov, Fair Use
When designers create the right visual contrast and emphasize specific elements, they can highlight the importance of these and draw users' attention. This is especially important to isolate important interactive elements on a web page, such as calls-to-action. When designers make visually connected elements stand out from the rest, they can reinforce their relationship and significance within the design.
For example, in a navigation menu, the use of a different color or style for the currently active page or section helps users understand their current location within the website or app. This convenience promotes efficiency and ease of use. When elements are visually connected, users can quickly identify the relationships these have. This reduces cognitive load and enables users to make informed decisions or take desired actions more efficiently.
Leverage size and color in icons to show they’re connected.
© FlowMapp, Fair Use
The law of uniform connectedness also contributes to the overall aesthetics and visual appeal of a design. As they leverage visual connections between elements, designers can create a sense of harmony and balance. This sense can enhance the overall user experience of a product design. It can make the design more engaging and memorable—even if it’s not necessarily the most useful design. This phenomenon is called the aesthetic usability effect.
Google’s search results shows the Law of Uniform Connectedness at work. Borders enclose particular items like featured snippets, helping establish a visual connection with the content while also separating it by prioritizing it more.
© Google, Fair Use
To further illustrate the law of uniform connectedness, here are some other major real-world examples:
Google's Material Design follows the principle of uniform connectedness. It utilizes consistent visual cues and styling throughout its design system. As it uses common color schemes, typography and iconography, Google creates a cohesive and visually connected user interface across its products. This makes it easier for users to navigate and interact with different apps and services.
Google’s Material Design features a compelling way to communicate with users in design.
© Google, Fair Use
Airbnb's search results page demonstrates the law of uniform connectedness by grouping similar listings together. As it uses consistent visual cues, such as color, typography and layout, Airbnb creates a clear visual hierarchy. It allows users to browse and compare listings effectively. Users can easily identify the price, location and other key details of each listing. This can make their decision-making process more efficient.
Airbnb helps users browse and compare listings effectively through consistent use of visual cues.
© Airbnb, Fair Use
To effectively apply the law of uniform connectedness in UX design, consider the following best practices and tips:
It’s vital to know the target audience, including their needs, pain points and other aspects that have a bearing on the problem and a potential solution. Designers should get to know a wide range of attributes and use tools such as user personas, user flows and customer journey maps to make the best of the UI and UX design work they will produce. Questions to ask include: What are the user interactions like for each task they must take towards completing their goal? Only through envisioning and accounting for these considerations can designers iterate towards truly user-centered designs.
Watch this video to understand user research’s bearing on how an interface can communicate best with a target audience.
Visually connect elements through color, lines or other visual cues to create a sense of unity and coherence within the interface. This helps users perceive related information as a single entity. Users will then find it easier to process and understand.
For example, in a task management application, designers can group tasks with similar due dates by using the same color. Or they can place them within a visually connected container. This visually communicates their relationship and helps users quickly identify and manage tasks based on their due dates.
Superside’s application of uniform connectedness clearly shows the process and connects the tasks between two distinct groups.
© Superside, Fair Use
Use consistent visual cues, such as color, typography and iconography, throughout the design to establish a clear visual language and facilitate the perception of connectedness. Use consistent visual cues throughout the interface, such as color, shape, size, line weight and spacing.
When designers apply visual connections to specific elements, they can guide users' attention and emphasize important information.
For instance, in a pricing page, a designer can use uniform connectedness to highlight different pricing tiers. By visually connecting the pricing tier name, features and pricing details, they can create a clear hierarchy. This will draw users' attention to the most relevant information.
Amazon employs a clear hierarchy for helping users choose according to pricing order, featured items and more.
© Amazon, Fair Use
When designers visually connect navigation elements, such as links or buttons, they can create a seamless and intuitive navigation experience.
For example, in a website navigation menu, a designer can use consistent visual cues like color or underline to connect each item’s active and hover states. This helps users understand their current location within the website and easily navigate to different sections.
Use links in, for example, a dropdown to give users their notifications with great convenience.
© Fintory, Fair Use
When designing for different screen sizes and devices, consider how changes in scale may affect the visual connections. Ensure that the connections remain clear and meaningful across various devices and orientations.
Ensure that the visual connections and cues used in the design are accessible to all users, including those with visual impairments. Use proper color contrast and provide alternative text for visual elements. Accessibility is a great—and in many cases, mandatory—consideration.
Work closely with developers to ensure that the visual connections and cues get implemented consistently across different devices and platforms.
For example, leverage the Gestalt law of proximity and negative space or white space to improve the information architecture and layout in general.
Uniform connectedness works with the white space around it in this progress stepper for an onboarding or checkout flow.
© Dean Issacharoff, Fair Use
Conduct user testing and gather feedback to evaluate the effectiveness of the visual connections in the design. Iterate and refine the design based on user insights to enhance the user experience. Usability testing is the engine that will power the needed changes with vital user insights as fuel for ideas.
While the law of uniform connectedness can greatly enhance the user experience, designers should also be aware of potential risks and considerations, and should not:
1. Over-rely on Visual Connections: If designers rely too heavily on visual connections without considering other design principles and user needs, it can result in a visually overwhelming or confusing design. Balance visual connections with other design considerations to create a holistic and user-centered experience.
2. Disregard Cultural and Contextual Factors: Visual connections may vary across cultures and contexts. What users may perceive as connected in one culture may not be the case for users in another culture. Consider the target audience's cultural background and contextual factors before applying the law of uniform connectedness.
Overall, the law of uniform connectedness is an asset and can enhance the user experience of a digital product or service. As with the other Gestalt laws or principles, it takes careful consideration and application to leverage well and in a way that will cause users to engage more with a design, naturally.
Take our course on Gestalt psychology and Web design.
Find further fascinating insights in our piece Laws of Proximity, Uniform Connectedness, and Continuation – Gestalt Principles (Part 2).
For more in-depth insights, read Gestalt and Design: Uniform Connectedness by Kathryncodonnell.
Read this piece for further information: What Is the Law of Uniform Connectedness?? by FlowMapp.
Read The 7 Gestalt Principles Every UX Designer Must Know by Craig Barber for further insights and examples.
The Gestalt law of uniform connectedness plays a crucial role to enhance accessibility in design by guiding users through visual design elements that they perceive as connected and part of the same group. This principle simplifies user interfaces by visually linking related elements, such as buttons or navigation links. That makes it easier for all users, especially those with some visual or cognitive impairments, to navigate and understand content.
Designers use consistent visual cues like color, lines or shapes to group related items and to reduce cognitive load and improve the usability of digital environments. As they focus on visual connectedness, designers ensure that they present information in a way that is intuitive and accessible. That is key to making digital content more inclusive for a diverse range of users. This approach not only follows accessibility guidelines but also aligns with inclusive design principles, making technology accessible and usable for everyone.
Understand the wide range of implications for accessible design in this video:
To make designs easier to understand, designers need to avoid some common mistakes with the uniform connectedness principle. Here are five simple guidelines:
● Keep It Simple: Designers should not clutter their designs. Using visual design connections like lines or colors can show which elements are related, but it's important not to overdo it.
● Be Consistent: Designers must use the same visual cues throughout their designs. This consistency helps people easily navigate the design and understand what to expect.
● Use Other Rules Too: Incorporate other design principles alongside the law of uniform connectedness to enhance a design. Strategies like grouping similar items or effectively using empty space can make content clearer.
● Highlight What's Most Important: Designers should use visual cues to emphasize the main parts of their design. This approach directs users to the important information or actions first.
● Consider User Expectations: Designs should match what people are accustomed to seeing. Meeting these expectations makes the design more usable and enjoyable.
Hype4 CEO and Creative Director Michal Malewicz explains the value of using the Gestalt law of proximity:
Here are some best practices for designers and design teams:
● Apply Effective Visual Grouping: Designers should group similar functions together using visual elements like colors, lines, frames or shapes. This helps users perceive these elements as part of a single unit, simplifying navigation and interaction within the app.
● Create Clear Connections: Using tangible references such as lines or arrows from one element to another can also create a visual connection. This method can guide users through a sequence of actions or draw attention to related elements, enhancing the app's usability.
● Go for Context and Emphasis: Employ uniform connectedness to provide context or to emphasize the relationship between items. For example, surrounding related options with a border can indicate that they share a common function or importance, making it easier for users to make decisions.
● Separate and Prioritize: Similar to Google’s search results, where borders around specific items like videos and featured snippets visually connect content and give it priority, app designers can use borders or backgrounds to highlight important features or content. This visual separation can help users focus on key information or actions.
Remember, the goal is to use visual connections to make the app more navigable and the information more digestible. By grouping elements that function together and clearly indicating their relationships, you can create a more coherent and user-friendly mobile app.
Take our Mobile UI Design course for a fuller understanding of how to design for mobile devices and make good design decisions for smaller screens.
The Gestalt law of uniform connectedness is one of the principles that helps create coherence and enhances the readability of text.
For example, designers can apply this principle by using consistent styling for headings, subheadings and body text to create a visual connection between related content. This not only helps in guiding the reader's attention effectively but also in making the text more accessible and easier to navigate. Designers can also apply uniform connectedness in organizing different sections of content, including sidebars or navigation menus. Designers visually distinguish them from the main content area through consistent use of color, lines or shapes.
Moreover, typography involves arranging type in a way that makes text legible, readable and appealing when displayed. The Gestalt principle of uniform connectedness aids in achieving this by ensuring that the design of text elements follows a cohesive pattern. It makes the overall appearance of the text harmonious and integrated. This principle can greatly affect how users process and perceive information. It can potentially influence the reader's understanding and interpretation of the content.
Watch author, educator and designer Mia Cinelli explain how a Gestalt principle applies to typography:
In design, two principles called the Gestalt laws of uniform connectedness and continuation help make things clear and easy to use. Uniform connectedness tells users that when design parts are connected visually, like with lines or shapes, they see them as one group. This helps designers show which parts of a design are related, making it quicker for users to understand how things fit together.
Continuation, however, is about how people's eyes like to follow paths or lines that connect different parts of a design. This makes looking at a design feel smooth and guides people through it in a way that makes sense.
If designers use these rules together, they can make designs that not only look good but are also simple to get around. They might group buttons that do similar things, showing they're connected, which guide users on what to do next. This approach not only makes it clear how things are related but also helps people move through a design easily, making for a better experience.
Take our Gestalt Psychology and Web Design: The Ultimate Guide course to see how Gestalt laws help in creating user experiences that shine in the final product.
There are tools and software that can make it easier to use the law of uniform connectedness in design projects. These include:
● Adobe Photoshop, Illustrator, and Sketch: These let designers play with colors, shapes, and patterns to make design elements look like they're part of the same group.
● Adobe XD, Figma, and Axure RP: Perfect for web and app design, these tools help keep designs consistent, making everything from buttons to menus feel connected.
● InVision and Marvel App: These are great for showing off designs with interactive prototypes that follow the law of uniform connectedness, making it clear how everything works together.
By using these tools, designers can make sure designs feel unified, which makes them easier for users to understand and enjoy.
Watch this Master Class to consider tools in the UX realm: How to Build Your UX Toolbox with Susan Weinschenk and Guthrie Weinschenk.
Designers must pay careful attention to cultural context when they apply the law of uniform connectedness in UI design. Here's how to consider cultural context:
Understand Cultural Symbols and Colors: Different cultures interpret symbols and colors in various ways. A color or shape that suggests connectivity and harmony in one culture might have negative connotations in another. Designers should research and understand these cultural nuances to ensure their designs communicate the intended message universally or are adapted appropriately for specific cultural contexts.
Consider Cultural Preferences for Layout and Design: Cultural context influences how users interact with and perceive information on a screen. For instance, the direction in which users read text (left-to-right, right-to-left, or top-to-bottom) can affect how elements should be connected visually to maintain a logical flow. Designers should incorporate cultural preferences into the design process to ensure they achieve connectedness in a way that feels intuitive to the target audience.
Adapt to Local User Behaviors and Expectations: User behaviors and expectations can vary widely across cultures, influencing how elements should appear grouped or connected in a UI/UX design. What users consider intuitive or obvious in one culture may not be so in another. So, conduct user research within the target culture. It can provide insights into how to apply the principle of uniform connectedness effectively.
Watch our video on how to design with cultural considerations in mind: Copyright holder: Tommi Vainikainen _ Appearance time: 2:56 - 3:03 Copyright license and terms: Public domain, via Wikimedia Commons Copyright holder: Maik Meid _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY 2.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Norge_93.jpg Copyright holder: Paju _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Kaivokselan_kaivokset_kyltti.jpg Copyright holder: Tiia Monto _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Turku_-_harbour_sign.jpg
Video copyright info
The law of uniform connectedness significantly influences the design of mobile navigation patterns by guiding users through the visual grouping of related items, making navigation intuitive and efficient. Here's how it plays out in mobile UI/UX design:
Visual Grouping of Navigation Elements: Designers use this law to visually group navigation elements, such as buttons or links, by placing them close together or by using consistent styling. This visual connection helps users understand that these elements serve a similar function, making it easier to navigate through the app.
Hierarchy and Organization: When they apply uniform styles to elements within the same hierarchy level, designers can clarify the structure of the app's navigation. For example, designers might highlight primary navigation options using a distinct color or shape. Meanwhile, they might group secondary options together using a different style. Doing this helps users understand the navigation pattern at a glance.
Consistent Navigation Bars and Menus: Uniform connectedness can help design consistent navigation bars and menus across different screens within a mobile app. This consistency helps users quickly learn the navigation pattern. That can reduce cognitive load and enhance the overall user experience.
Enhanced User Flow: By visually connecting related navigation elements, designers can guide users through a desired action or path. That can enhance the flow of interaction within the app. This approach can lead to increased engagement and a smoother user experience.
Watch this video to learn more about UI design patterns:
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.
This principle plays a significant role in how we perceive and organize information in our daily lives. Here are a few examples:
● Social Media Feeds: Social media platforms use uniform connectedness to visually group posts or comments by the same user. For instance, a user’s profile picture next to their comment or post visually connects these elements, which helps people quickly understand who said what.
● Road Signs: On roads, signs that are related or convey a similar message often share visual characteristics like color or shape. For example, stop signs are always octagonal and red, signaling drivers to stop. This uniformity helps drivers process information quickly and respond appropriately.
● Documents and Websites: In documents or on websites, headings, bullet points, and paragraphs that share the same font, size, and color are perceived as belonging together. This uniform connectedness aids in navigating the content and understanding its structure.
● Public Transportation Systems: Maps of subway or bus routes often use specific colors to represent different lines. This visual connection helps passengers easily identify and follow the route they need, enhancing usability and navigation.
Watch our Master Class How to Design With the Mind in Mind with Jeff Johnson, Assistant Professor, Computer Science Department, University of San Francisco for more insights.
Here’s the entire UX literature on the Law of Uniform Connectedness 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!
