Laws of Proximity, Uniform Connectedness, and Continuation – Gestalt Principles (Part 2)
- 1.1k shares
- 4 years ago
The Gestalt law of continuity or continuation refers to how the human mind naturally organizes visual elements into continuous and uninterrupted lines or patterns. It is a fundamental concept in visual perception and design. Designers apply it to create interfaces that guide users' attention and create a smooth flow of information.
In this video, author, designer and educator Mia Cinelli explains the importance of Gestalt principles in visual design and introduces a few of them, including continuity.
The Gestalt principle of continuity is also called the law of continuity, principle of continuation and law of continuation. It comes from the idea that the human mind perceives and organizes visual stimuli to create a sense of continuity and flow. The theory behind the law of continuity is that people usually perceive objects so that a series of visual elements belong together and form a continuous line or pattern. This is true even if some parts are missing or obscured. This principle is closely related to the concept or Gestalt law of closure. In closure, the mind fills in missing information to create a complete and unified perception.
The law of continuity is rooted in the Gestalt psychology movement that emerged in the early 20th century. “Gestalt” is a German word that describes the concept that an organized whole is more than the sum of its parts. For example, according to the principle of closure, figure-ground and the law of prägnanz, complex images become simplified because of the mind’s need to make sense of the object on show. To Gestalt psychologists, individual elements therefore take on a higher meaning than mere components.
German psychologists Max Wertheimer, Wolfgang Köhler and Kurt Koffka developed the Gestalt principles to understand how humans perceive the world around them. The law of continuity is observable in the real world in that the human eye follows the smoothest path when viewing lines. This is so regardless of how the artist has actually drawn the lines.
When humans face a sequence of visual elements, they tend to perceive them as a continuous line or pattern. The human brain prefers to see a continuous flow of visual elements rather than separated objects. This natural inclination towards continuity is a key aspect of how humans make sense of their visual environment—an urge to extract meaning quickly from what was once a far more hazardous world. Because of its value, this law has seen application in a wide range of fields, including graphic design, advertising and product design.
The Gestalt law of continuity has significant importance in user experience (UX) design and user interface (UI) design. When designers apply this law in their design work, it helps them create interfaces that are intuitive and easy to navigate. Particular reasons why this principle is important in UX/UI design include that it:
The continuity principle can guide users' eyes in a certain direction, which makes it easier for them to navigate the interface. It helps create a visual flow that guides users from one element to another, and so helps user interactions with a digital product or service.
The law of continuity improves readability as it groups information in a continuous flow. It helps users easily understand and process the information they find on a website or app. For example, with primary and secondary navigation, designers can apply continuity to guide users without confusing them.
The continuity principle can give a sense of cohesion and unity to design elements. This makes the interface appear well-organized and aesthetically pleasing. At the very least, it can help calm users’ pain points if they are distracted or in busy or potentially stressful environments.
A user interface design that follows the law of continuity is likely to be more engaging as it aligns with humans’ natural visual perception. This element of visual design is important as, typically, users will respond better to information architecture and other parts of a design in a way that they expect to find. That is, they find what they see conforms naturally to expected principles such as continuity.
Chief examples of how designers apply the Gestalt law of continuity in interfaces include:
In websites and applications, menus and navigation bars often follow a linear layout. This allows users to perceive them as a continuous group of elements.
Progress bars are another example where the continuity principle occurs often. The continuous line in progress bars provides a visual cue to users about how much progress they have made and how much is left.
The way designers arrange and present text also adheres to the law of continuity. In Western cultures, for example, users naturally read text in a continuous flow from left to right, top to bottom.
See typography expert, author, designer and educator Mia Cinelli explain the virtues of the law of continuation in typography:
Some key ways that UX designers apply the Gestalt law of continuity in their designs are that they use it to:
Designers should ensure that design elements follow a logical and predictable flow. This could be from left to right, top to bottom or along a specific path that guides the user towards the desired action.
Use the principle of continuity to group related elements together. This helps users perceive them as a single entity, improving the overall structure and readability of an interface.
Use lines, paths and similar visual cues to guide users' eyes in the desired direction. This can be particularly useful in guiding users towards call-to-action buttons or important information.
Consistency is key to create a continuous flow. Ensure that elements like fonts, colors and button styles are consistent across the interface. Users find they can trust consistently crafted interfaces. A UI that improves the user experience will be one that matches their expectations while it distinguishes the brand message.
For interface design, have a clear vision of the user flow and how to arrange elements to create continuity. Continuity comes best when designers arrange elements to lead the user’s gaze from one section to another. This creates a seamless experience—vital to keep users on board.
Directional cues like arrows or curved lines can help establish a clear path for users to follow. They also create continuity within the design. This can be especially helpful when designers want to guide users through complex processes or interactions.
Smooth transitions and animations create a sense of connection between different states of an interface. They also provide continuity between different pages or sections. This helps create an uninterrupted experience for the user while they navigate different areas of the design.
Grid systems and layouts are vital for putting order in designs and a sense of continuity throughout interfaces. Consistent spacing, alignment and hierarchy will help ensure that all elements fit together harmoniously. They’ll also guide the user’s eye from one area to another without disruption.
Flowcharts are great tools for mapping out how users move through an application or website. They help designers identify potential disruptions or gaps in the flow that could impact overall continuity within their designs. These are also essential for communicating design ideas among team members.
Gestures like swiping or pinching should always give a smooth and continuous experience for touchscreen users. Designers should avoid jarring disruptions at all costs. That way, they can help achieve true continuity within their designs.
While the law of continuity is beneficial in UX/UI design, it's important to be mindful of potential risks and considerations, such as designers should not:
Overuse Continuity: The overuse of the principle of continuity can lead to a cluttered and confusing interface. Avoid overwhelming users with too many elements in a continuous flow. Strike a balance between continuity and simplicity to ensure a pleasant user experience. For example, consider using ample negative space or white space to give breathing room to a design.
Disrupt User Expectations: If a design's continuity doesn't align with common UX patterns or user expectations, it can lead to confusion and frustration. Always bear in mind the established conventions and user expectations in the design field. For example, employ design patterns that work well.
Neglect Other Design Principles: The law of continuity is just one of many Gestalt principles. While it's important, don't neglect other principles such as proximity, similarity and closure. Those are equally crucial in creating a cohesive and user-friendly design.
The law of continuity plays a vital role in a seamless and enjoyable user experience. It guides users' attention, establishes logical flows and more. Ultimately, user testing will reveal fine points about how well the law of continuity works in a digital product or service. Overall, it’s an essential item in a designer’s tool kit, and can help greatly in a site or app’s UX to keep a sure footing on the journey from user to customer.
Take our Gestalt Psychology and Web design: The Ultimate Guide course.
Read our piece Laws of Proximity, Uniform Connectedness, and Continuation – Gestalt Principles (Part 2) for helpful in-depth insights.
Find further fascinating insights in Gestalt Design Principles | by Kai Tomboc.
Read this article for more in-depth points and examples: The Law of Continuity: Designing for Smooth Transitions | by Incharaprasad
Discover further aspects in this piece: UX Psychology: Gestalt’s Law of Continuity | by Dani Jones
In complex interfaces with many elements and dense information, overuse of this principle can lead to confusion. Users might find it hard to distinguish between related and unrelated elements because everything seems interconnected.
To navigate these limitations, designers should complement the Gestalt law of continuity with other principles, such as proximity and similarity. For example, if they group related elements together (proximity) or use similar visual styles for related items (similarity), they can help reinforce relationships between elements. Particularly, if designers apply a clear visual hierarchy through varying sizes, colors and typography, they can guide the user's attention to the most important information. This will help in the processing of complex interfaces.
Watch Hype4’s Creative Director and CEO, Michal Malewicz explain how the law of proximity helps establish a good hierarchy:
Cultural differences can influence how people perceive and apply the Gestalt law of continuity in design. Cultures vary in their visual languages, symbols, and patterns. This fact can affect how different cultures interpret design principles. For instance, Western cultures might emphasize linear, analytical processing, favoring clear, continuous lines, while Eastern cultures may focus on holistic processing, valuing the overall balance and flow. Designers must consider these cultural nuances to ensure their designs communicate effectively across different cultural contexts. Understanding the audience's cultural background helps in applying the Gestalt principles in a way that resonates more effectively with that audience's perception and interpretation.
Watch as author and human-computer interaction (HCI) expert Alan Dix explains about how to design for cultural considerations: 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
Designers can enhance accessibility in designs by using the Gestalt law of continuity to organize elements in a way that guides the user's eye smoothly from one component to the next. This principle can help in creating intuitive navigation paths for users, including those with visual impairments, by emphasizing clear, logical sequences of information or actions. By aligning elements along curves or lines, designers make interfaces easier to understand and interact with. It therefore reduces cognitive strain and makes content more accessible to everyone.
Take our Master Class on Accessibility, with Elana Chapman, Accessibility Research Manager at Fable.
The Gestalt law of continuity can aid in the redesign of an existing product by helping a designer to enhance its visual and navigational flow. They can leverage this to create a more intuitive user experience, organizing content and navigation elements in a way that feels natural and logical.
Continuity can help in clarifying the hierarchy and relationships between different parts of the product, making it easier for users to understand and interact with the product efficiently. By reorganizing components to follow natural sight lines, a designer can create more intuitive navigation paths. That will make it easier for users to understand and engage with the product. This approach not only clarifies the product's structure and hierarchy but also enhances its aesthetic appeal, leading to a more cohesive and user-friendly interface.
Take our Gestalt Psychology and Web Design: The Ultimate Guide course for extensive insights into how to make the visuals work even better in designs.
Designers can integrate the Gestalt law of continuity in mobile app design to streamline user experiences. This principle suggests that elements aligned in a line or curve are perceived as related, guiding users through content with ease. When applied, it improves navigation and coherence across various screen sizes, vital for responsive design. In a mobile-first approach, when designers prioritize simplicity and continuity, they ensure that content scales seamlessly from smaller to larger screens. Tips include using consistent alignment and directional cues to lead the eye, and designing with scalability in mind to accommodate different devices. This not only enhances usability but also boosts aesthetic appeal, making apps more intuitive and engaging.
Take our course, Mobile UX Design: The Beginner’s Guide for in-depth insights about the fineries of mobile design.
The Gestalt law of continuity is more beneficial than the law of similarity in situations that require a viewer's eye to be guided through a sequence or along a specific path. This is especially true in design contexts where the goal is to lead the user naturally from one element to the next, creating a fluid and intuitive user experience.
For example, in web design, the law of continuity helps create a sense of flow from the landing page down to the call-to-action. That ensures that users follow the intended navigation path without getting lost or distracted. This is crucial for websites with complex information structures or multiple sections, as it keeps the user's journey coherent and focused.
In interface design, such as the design of mobile apps or software, continuity excels by organizing elements in a way that feels logical and predictable to the user. When buttons, icons and information follow a clear path, users can navigate more efficiently. That enhances usability and satisfaction.
Overall, while the law of similarity is excellent for grouping and categorizing elements, the law of continuity shines in scenarios where movement, flow and directional guidance are paramount. That makes it indispensable for creating engaging, user-friendly designs.
Take our Gestalt Psychology and Web Design: The Ultimate Guide course for extensive insights into the various users of Gestalt laws in interface design.
Yes, designers can effectively use the Gestalt laws of continuity and closure together in user interface (UI) design. An excellent example of this is in the design of navigation menus on websites or apps. Consider a dropdown menu that, when activated, displays items in a curved or diagonal layout rather than a straight vertical or horizontal line. This use of the law of continuity encourages the user's eye to follow the path of menu items smoothly, enhancing usability and aesthetic appeal.
Simultaneously, if some menu items are partially hidden or only icons appear without text, the law of closure allows users to recognize these items as part of a complete menu. Users mentally fill in the gaps, understanding the full shape or form of the menu, even if all parts aren't fully visible. This combination not only creates a visually engaging interface but also supports intuitive navigation. That is because users can easily predict and follow the menu's flow, which improves their overall experience with the product.
Take our Gestalt Psychology and Web Design: The Ultimate Guide course for extensive insights into the various users of Gestalt laws in interface design.
Chang, D., Dooley, L., & Tuovinen, J. E. (2002). Gestalt Theory in Visual Screen Design — A New Look at an old subject. In Selected Papers from the 7th World Conference on Computers in Education (WCCE’01), Copenhagen, Computers in Education 2001: Australian Topics, Volume 8 (pp. 5–12). Melbourne: Australian Computer Society. https://oro.open.ac.uk/11356/
This publication revisits the application of Gestalt theory in educational visual screen design. It critically examines the common yet narrow application of Gestalt laws in design literature and identifies eleven relevant laws for enhancing visual screen design in educational contexts, including the law of continuity. The study applies these principles to redesign an instructional multimedia application, 'WoundCare', and it presents an evaluation of the new designs based on user feedback. It highlights the positive impact of these principles on learning and design aesthetics.
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, aiming to help readers improve design skills. It also includes downloadable templates for design documentation, making it a hands-on resource for UX designers.
Here’s the entire UX literature on the Law of Continuity by the Interaction Design Foundation, collated in one place:
Take a deep dive into Law Of Continuity 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.
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!