Gestalt Principles of Visual Perception & User Experience Design
Information architecture is a discipline on the structure of information for the user to easily find what they are looking for. Like the most intuitive design, good information architecture is invisible; the user will flow effortlessly through numerous user paths to find relevant information easily. In the design process, the designer employs conceptual models, Gestalt psychology, and notes on mental cognition to prepare the space for user experience.
A conceptual model is what users perceive of a design as they encounter the products from the knowledge of similar products. Before engaging with any design, the user combines all previous experience to understand the structure of what is in front of them, that is, the perceived functions and how to use them: called the system image. With ideas gained from similar products, the user engages and develops a conceptual image of a particular product. The conceptual image, then, is a mental model of the product and how it works. In an attempt to understand what is in front of them, the user uses everything that they know from past experience with similar products, literature, visual aid, advertisement, and instruction manuals to understand the functions and how to use them (Norman). In the case of information architecture for web and mobile application development, we structure our mental models based on websites that we have used, the mobile applications we have engaged with, and the associations that we have built through experiences with digital products. In the experience of a digital product, we absorb information and create natural mappings on how to group elements together.
How to group visual elements together for the user to understand most easily is to design in accordance to the natural mappings. Natural mappings is the archive of experience that we use to have understanding of the world around us. To conceptual models, Gestalt defines seven Gestalt principles of design that are the ways in which we perceive visual elements together:
- Proximity: Elements that are close together are perceived as a group.
- Similarity: Items that look similar are seen as part of the same pattern or group.
- Continuity: The eye follows the smoothest path, and we perceive elements along a line or curve as related.
- Closure: Our brains fill in gaps to perceive complete, familiar shapes even when parts are missing.
- Figure/Ground: We distinguish objects (figures) from their surrounding background (ground).
- Common Fate: Elements moving in the same direction are perceived as part of a single group.
- Symmetry and Order: We prefer organized, balanced, and simple structures over complex, disordered ones.
In the case of information architecture and conceptual models, we use Gestalt principles to group visual elements together so that natural associations are created for the user in our sitemaps, task flows, and components that we decide to include or exclude with precision. With knowledge of how the user will perceive different groups of visual elements, we enable more simple design that the users can more easily find the information that they need. Norman says that, “the most effective way to help people remember is to make it unnecessary” (Norman, 100).
In the development of well-constructed design, we must consider the working memory of the user in the user experience. For short term memory, we retain around seven elements at any given time. Elements can be individual items on their own, or groups of individual items that are well distinguished with Gestalt principles or well-worn experience with similar digital products. For example, one might condense a search bar to the icon of a magnifying glass, and will know that the user will understand that the function of the magnifying class on its own as to find relevant information by typing in inquiry into a text field and to have relevant results appear. Design choices like condensing the search function, enables the user to get the most out of any given design in alignment with mental cognition. Knowing how to make these design choices, and when to include or exclude design with precision, is critical to providing the most in an empathetic user experience.
Using conceptual models, Gestalt principles, and notes on mental cognition, we can develop beautiful designs that enable the user to easily flow through tasks and find the information that they are looking for. With good information architecture in UX, we ensure that the user seamlessly understands the possible functions and how to use them, and glides through our digital product with intuition, above all.
Sources
Norman, Donald A. The Design of Everyday Things. MIT Press, 2013.
Williams, John Moore. “The 7 Gestalt Principles of Design.” Webflow, 12 Mar. 2021, https://webflow.com/blog/gestalt-principles-of-design/ John is a Senior UX Writer for Google.
Babich, Nick. “Information Architecture Guide for UX Architects & Designers: Adobe XD Ideas.” The Beginner’s Guide to Information Architecture in UX, Adobe Inc., 24 Nov. 2020, xd.adobe.com/ideas/process/information-architecture/information-ux-architect/ Nick is a UX Architect and Writer for Adobe.