The human brain is wired to see structure, logic, and patterns. It helps us make sense of the world. In the 1920s, a group of German psychologists developed theories around how people perceive the world around them, called Gestalt principles.
For example, what do you see when you look at this image?
Source: The Inspired Eye
If you’re like most people, you probably see a triangle. But in reality, all that's there are three white “pac men.” We see the triangle because our brains take the ambiguous visual information and organize it into something that makes sense to us—something familiar, orderly, symmetrical, and that we understand.
When this cognitive process kicks in, our minds leap from comprehending all of the elements as individual and unrelated components to seeing the entire shape as a whole. And as a result, we perceive forms and objects where none were created.
To further illustrate this process, check out the GIF below. Your brain sees a dog walking, but it’s nothing more than a series of moving dots.
Source: Gizmodo
These are simple examples, but they demonstrate the types of shortcuts our brains make all the time to quickly make sense of the world.
What are the Gestalt principles?
These shortcuts are known as the Gestalt principles of visual perception, and they detail how our brains create structure by default. But why is understanding this important for web and mobile design?
Why designers should care about the Gestalt principles
Great designers understand the powerful role that psychology plays in visual perception. What happens when someone’s eye meets your design creations? How does their mind react to the message your piece is sharing? —Laura Busche, Brand Content Strategist at Autodesk
Think about that quote for a minute. When people first see your designs, how do they experience them? To understand what makes UI design work, you need to understand the psychology of human perception.
The fundamental law that governs a Gestalt principle is that we tend to order our experience in a manner that’s regular, orderly, and recognizable. This is what allows us to create meaning in a complex and chaotic world. And having a solid understanding of how these principles work will help you in three ways.
- They’ll help you determine which design elements are most effective in a given situation. For example, when to use visual hierarchy, background shading, gradients, and how to group similar items and distinguish different ones.
- These psychological principles hold power to influence our visual perception, which allows designers to direct our attention to specific points of focus, get us to take specific actions, and create behavioral change.
- And finally, at the highest level, the Gestalt principles help you design products that solve the customer’s problem or meet the user’s need in a way that’s beautiful, pleasing, and intuitive to use.
Gestalt principles and examples
In this article, we’ll discuss seven Gestalt laws or principles that directly apply to modern design, and share some examples of how they’re used in UI design. This isn’t an exhaustive list, but you’ll quickly begin to notice that there’s an overlap between many of the principles and that they all work together fluidly. Now let’s dive in.
- Figure-ground
- Similarity
- Proximity
- Common region
- Continuity
- Closure
- Focal point
Principle #1: figure-ground
The figure-ground principle states that people instinctively perceive objects as either being in the foreground or the background. They either stand out prominently in the front (the figure) or recede into the back (the ground).
Source: A Dwarf Named Warren
In the image above, for example, your eye instantly sees a white apple sitting on a black background.
This determination will occur quickly and subconsciously in most cases. Figure/Ground lets us know what we should be focusing on and what we can safely ignore in a composition. —Steven Bradley, web designer
When people use your website or mobile app, one of the first things they do on each screen is to determine which is the figure and which is the ground.
Examples of the figure-ground principle
The Basecamp homepage has a bunch of graphics, text, forms, and other information. And because of the figure-ground principle, you can immediately tell that you should focus on the content in the white foreground areas.
AngelList uses the figure-ground principle in two ways below. First, the text and logo on the left side of the page are clearly sitting on top of the background image. Second, the white text in the menu on the right stands on top of the black background.
Principle #2: similarity
The principle of similarity states that when things appear to be similar to each other, we group them together. And we also tend to think they have the same function.
For instance, in this image, there appear to be two separate and distinct groups based on shape: the circles and the squares.
Source: Creative Beacon
A variety of design elements, like color and organization, can be used to establish similar groups. In the image below, for example, even though all of the shapes are the same, it’s clear that each column represents a distinct group:
Source: Andy Rutledge
Examples of the similarity principle
GitHub uses the similarity principle in two ways on the page below. First, they use it to distinguish different sections. You can immediately tell that the grey section at the top serves a different purpose than the black section, which is also separate from and different than the blue section.
Second, they also use the color blue to distinguish links from regular text and to communicate that all blue text shares a common function.
Principle #3: proximity
The principle of proximity states that things that are close together appear to be more related than things that are spaced farther apart.
Source: Andy Rutledge
Proximity is so powerful that it overrides similarity of color, shape, and other factors that might differentiate a group of objects.
Source: Steven Bradley
Notice the three groups of black and red dots above? The relative nearness of the objects has an even stronger influence on grouping than color does.
Examples of the proximity principle
The nearness of each image and its corresponding text communicates that they’re related to one another.
And Vice uses this principle to distinguish between the images, headlines, descriptions, and other information for each of its stories.
Principle #4: common region
The principle of common region is highly related to proximity. It states that when objects are located within the same closed region, we perceive them as being grouped together.
Source: Smashing Magazine
Adding borders or other visible barriers is a great way to create a perceived separation between groups of objects—even if they have the same proximity, shape, size, color, etc.
Examples of the common region principle
In the example from Pinterest below, the common region principle is used to separate each pin—including its photo, title, description, contributor, and other details—from all the other pins around it.
And it’s used in the Facebook example below to communicate that the comments, likes, and interactions are associated with this specific post—and not the other posts surrounding it.
Principle #5: continuity
The principle of continuity states that elements that are arranged on a line or curve are perceived to be more related than elements not on the line or curve.
Source: Smashing Magazine
In the image above, for example, the red dots in the curved line seem to be more related to the black dots on the curved line than to the red dots on the straight horizontal line. That’s because your eye naturally follows a line or a curve, making continuation a stronger signal of relatedness than the similarity of color.
Examples of the continuity principle
Amazon uses continuity to communicate that each of the products below is similar and related to each other (books of similar topics that are available for purchase).
Sprig uses it to explain the three-step process to use their app.
And Credit Karma uses it to illustrate the benefits that their services provide.
Principle #6: closure
The principle of closure states that when we look at a complex arrangement of visual elements, we tend to look for a single, recognizable pattern.
In other words, when you see an image that has missing parts, your brain will fill in the blanks and make a complete image so you can still recognize the pattern.
Source: Eduard Volianskyi
For example, when you look at the image above, you most likely see a zebra even though the image is just a collection of black shapes. Your mind fills in the missing information to create a recognizable pattern based on your experience.
Examples of the closure principle
The closure principle is used often in logo designs at a variety of companies including IBM, NBC, Zendesk, and Funding Circle.
Principle #7: focal point
The focal point principle states that whatever stands out visually will capture and hold the viewer’s attention first.
Source: Smashing Magazine
When you look at the image above, for example, the first thing you notice is the red square because it’s different from all of the black circles around it. It’s the first point of interest that grabs your attention, and from there, your attention moves to other parts of the image.
Examples of the focal point principle
Twilio uses the focal point principle to draw your eye to their call-to-action button.
And in the example below, Instacart combines the focal point principle with the figure-ground principle to draw your eye to the white foreground, and then to the green “find stores” button.
How UserTesting can help you test UI design
UI and UX designers alike rely on UserTesting to test prototypes, websites, or apps.
Here’s a glimpse of what you can do:
- UserTesting supports multiple prototyping tools, including Adobe XD Plugin, Figma, Marvel, and more. It’s important to note that technical issues may occur and are even expected, which contributors should be made aware of. Some are excited by getting a first glimpse of a design and their feedback being used to shape the final result. Don’t be afraid to show contributors a rough sketch of early ideas—this ensures you’re on the right path before investing more time, money, and effort. Additionally, consider asking contributors to evaluate specific elements or how well they understand what you’re promoting.
- Whether your website is newly launched or long due for a refresh, UserTesting offers multiple testing options from card sorting, tree tests, to preference tests. Web hosting company GoDaddy leveraged UserTesting to evaluate how users felt after visiting their website. After replicating their original tests for a second round of testing, GoDaddy’s team found increased appeal among customers and further insight on next steps.
- Our customers have tested both existing apps and unreleased iOS app tests. The possibilities are endless, with contributors being able to use the front-facing and back-facing camera to record themselves or their surroundings (depending on the test and its tasks).
Final thoughts
If you understand how the human mind works, it’s easier to direct people’s attention to the right place. And keeping these principles top-of-mind will help you keep the user at the center of your product development process.
FAQs
7 Gestalt Principles of Visual Perception: Psychology for UX? ›
What are the gestalt principles of design? The classic principles of the gestalt theory of visual perception include similarity, continuation, closure, proximity, figure/ground, and symmetry & order (also known as prägnanz). Others, such as “common fate,” have been added in recent years.
What are the Gestalt principles of visual perception in UX? ›What are the gestalt principles of design? The classic principles of the gestalt theory of visual perception include similarity, continuation, closure, proximity, figure/ground, and symmetry & order (also known as prägnanz). Others, such as “common fate,” have been added in recent years.
What is the Gestalt theory of UX design? ›Gestalt Theory is the theory of visual perception and how our brain pieces together reality. The theory sheds light on how cognition factors into the way viewers read a piece of design. In the German language “Gestalt” means form or shape.
What are the 7 Gestalt principles of design? ›The seven most common Gestalt principles are figure-ground, proximity, similarity, continuity, closure, simplicity, and symmetry. But some newer theories are also regarded as Gestalt principles, such as uniform connectedness, parallelism, common fate, focal points, and past experience.
How psychological concepts such as Gestalt are valuable to the UX designer? ›The Gestalt Principles can help UX and UI designers understand how the end user will interpret and navigate their work. They provide a framework to effective and easy-to-understand designs that are visually appealing.
What are the visual design principles that impact UX? ›Summary: The principles of scale, visual hierarchy, balance, contrast, and Gestalt not only create beautiful designs, but also increase usability when applied correctly.
What is an example of Gestalt principles of perception? ›For example, when watching a football game, we tend to group individuals based on the colors of their uniforms. When watching an offensive drive, we can get a sense of the two teams simply by grouping along this dimension. When looking at this array of dots, we likely perceive alternating rows of colors.
What is an example of Gestalt psychology design? ›An example of gestalt psychology in everyday life is in the way people complete jigsaw puzzles. Rather than looking at each piece as an individual unit, they form meaningful relationships between the pieces to see the big picture more quickly and efficiently.
What is psychology in UX design? ›User psychology is a combination of neuroscience, cognitive psychology, social psychology, and human-computer interaction that approaches UX design through the lens of human behavior. Every UX designer should have a deep understanding of human psychology.
How important are principles of Gestalt to creating a good user experience? ›Understanding the Gestalt Principles is an important way that UX designers can use underlying assumptions about negative space, alignment, and symmetry to influence the user experience positively.
What are the 5 principles of Gestalt psychology explain each? ›
Gestalt principles are the different ways individuals group stimuli together in order to make a whole that makes sense to them. These principles are divided up into five categories: proximity, similarity, continuity, connectedness, and closure.
What are the 10 Gestalt principles? ›There are ten primary Gestalt principles: simplicity, figure-ground, proximity, similarity, common fate, symmetry, continuity, closure, common region, and element connectedness.
What is the basic rule of the Gestalt principles? ›The fundamental law that governs a Gestalt principle is that we tend to order our experience in a manner that's regular, orderly, and recognizable. This is what allows us to create meaning in a complex and chaotic world.
How is UI UX related to psychology? ›Once again, UI/UX design is all about human psychology. You design not a product — you design interaction with the user. This is why you have to know your users, their human nature, their inclinations, weaknesses, strong points, and fears.
How do the concepts of Gestalt psychology relate to personal development? ›Gestalt Therapy deems that people cannot be considered as separate from their environment or from interpersonal relations. The individual is seen as being self-regulating and is able to motivate oneself to solve problems. Individuals are able to work towards growth and develop as their environments allow.
What is the proximity principle in UX? ›Definition: The principle of proximity states that items close together are likely to be perceived as part of the same group — sharing similar functionality or traits.
What are the three C's of UX design? ›The 3Cs of Design
To summarize, the 3 elements of design are: Consistency (Systems–based Design) Clarity (Clear instead of Clever Design) Content (Design is Communication not Chrome)
Visual design is about helping users see controls, menus, buttons and areas of a screen where they perform an action, for example. UX Design helps define what should go on the screen, in the first place, and helps define interactions that reinforce Key Performance Indicators like engagement, adoption and task success.
Why is visual design important for UI UX? ›Aesthetic-Usability Effect | Laws of UX
While this may seem obvious, its worth pointing out that visual design is a discipline in and of itself for good reason: because products and services that look better have higher overall user engagement, conversion, and retention.
- Similarity. The principle of similarity states that if objects or units look similar to one another, then they will be visually perceived as part of a group, structure or pattern. ...
- Continuity. ...
- Figure and Ground. ...
- Proximity. ...
- Closure.
How do Gestalt psychologists explain perception? ›
When trying to make sense of the world around us, Gestalt psychology suggests that we do not simply focus on every small component. Instead, our minds tend to perceive objects as elements of more complex systems. A core belief in Gestalt psychology is holism, or that the whole is greater than the sum of its parts.
What Gestalt principles are commonly used to explain how perceptions are organized? ›Gestalt principles such as figure-ground relationship, grouping by proximity or similarity, the law of good continuation, and closure are all used to help explain how we organize sensory information. Our perceptions are not infallible, and they can be influenced by bias, prejudice, and other factors.
How is Gestalt psychology used today? ›Gestalt therapy can help people with behavioral conditions like bipolar disorder. It's also an effective therapeutic method for treating substance abuse, compulsive gambling, and PTSD.
Is Gestalt psychology still used today? ›One of the most notable ways Gestalt psychology is applied to treating patients today is through Gestalt therapy. You've probably seen this method of psychotherapy depicted in popular culture: the patient explains their problems while the therapist listens.
What is an example of Gestalt psychology in logo? ›For example, the NBC logo uses the same petal shape, in different colors, to create the wings of the peacock. Because each shape is the same, it is perceived as a unified whole, even with the color difference.
What is the role of psychology in UX? ›Bringing psychology and technology together is at the heart of UX design because UX is people. However, you do not need a degree in psychology to understand the basics of how humans function. Most psychological principles that are relevant to UX are easy to understand but make a big difference when applied correctly.
What psychology should I study for UX design? ›Design psychology is a combination of neuroscience, cognitive psychology, social psychology, and human-computer interaction that approaches user experience design through the lens of human behavior.
What are the theories of UX psychology? ›There are two position theories, the recency effect, and the primacy effect. The primacy effect is the idea that people can recall information they see first in a list easier than later information. The recency effect is the idea that people remember information they see last easier than information previously seen.
What are the Gestalt principles of web design? ›Ultimately, Gestalt design follows the concept that the whole is greater than the sum of the parts. We will cover five of the key Gestalt principles that can be applied in web design – proximity, similarity, continuation, symmetry and closure…
What is an example of the Gestalt principle of proximity? ›For example, a headline must have more space before it than after. By being closer to the section it belongs to, it feels more connected to it. Line height is another example. Space between lines must be bigger than between words, but small enough so they form a paragraph.
What are the principles of perception in psychology? ›
Five principles of perceptual organization are proximity, similarity, continuity, closure, and connectedness. These principles help us interpret what we see.
What is the Gestalt law of symmetry? ›Gestalt Principles. The law of symmetry captures the idea that when we perceive objects we tend to perceive them as symmetrical shapes that form around their center. People tend to prefer symmetry.
Which of the following is not a Gestalt principle of visual perception? ›Explanation: Differential principle from the list is not Principles of Gestalt Perception.
What type of personality is a UX designer? ›The average Ux Designer tends to be a thoughtful, cautious communicator who values consistency, stability, and loyalty. The average Ux Designer is likely an easy-going, cooperative supporter. Because of their calming presence, they have a gift for helping others feel comfortable in otherwise stressful circumstances.
Is UX part of human factors? ›Human Factors is an amalgamation of several disciplines, including psychology, engineering, interaction design, and — yep, you've guessed it — user experience.
How do Gestalt principles of Gestalt psychology influence visual perception? ›Gestalt Principles are principles/laws of human perception that describe how humans group similar elements, recognize patterns and simplify complex images when we perceive objects. Designers use the principles to organize content on websites and other interfaces so it is aesthetically pleasing and easy to understand.
What is the main goal of Gestalt psychology theory? ›The goal of Gestalt therapy is to teach people to become aware of significant sensations within themselves and their environment so that they respond fully and reasonably to situations.
What types of concepts were Gestalt psychology interested in? ›Gestalt psychologists were interested in how we perceived more complex stimuli. Gestalt psychologists sought to break down integrated processes of perception into constituent parts to understand how the human mind integrated singular processes into the "whole" that is perceived by the brain.
What is Gestalt theory in UX? ›Gestalt Theory is the theory of visual perception and how our brain pieces together reality. The theory sheds light on how cognition factors into the way viewers read a piece of design. In the German language “Gestalt” means form or shape.
What is a UX principle? ›The Interaction Design Foundation defines UX principles as “fundamental points of advice for making easy-to-use, pleasurable designs as we select, create and organize elements and features in our work.” Design principles, therefore, form the heart and soul of UX design.
What are the three principles of visual perception? ›
The Gestalt psychologists described three principles of perceptual organization; similarity, proximity and continuity. Content that looks similar will be perceptually grouped together. The difference in the way the content looks, separates it from one another.
What does the Gestalt principle of proximity state when we perceive visual objects? ›The Gestalt principle of Proximity is that the relative distance between objects in a display affects our perception of whether and how the objects are organized into subgroups. Objects that are near each other (relative to other objects) appear grouped, while those that are farther apart do not.
What are the 5 stages of visual perception? ›The five stages of perception are stimulation, organization, interpretation, memory, and recall.
What are the 5 components of visual perception? ›- Visual discrimination. The ability to distinguish one shape from another.
- Visual memory. The ability to remember a specific form when removed from your visual field.
- Visual-spatial relationships. ...
- Visual form constancy. ...
- Visual sequential memory. ...
- Visual figure/ground.
Start with the six principles of design: balance, pattern, rhythm, emphasis, contrast, and unity. Just as instructional design models and methodologies shape your training strategy, so should these principles shape your basic visual strategy. By applying them, you can create high-impact visuals.
What are the gestalt principles of web design? ›Ultimately, Gestalt design follows the concept that the whole is greater than the sum of the parts. We will cover five of the key Gestalt principles that can be applied in web design – proximity, similarity, continuation, symmetry and closure…
What are the gestalt principles of visual perception in graphs? ›It refers to the patterns that you perceive when presented with a few graphical elements. The Gestalt Principles consist of several principles that describe how the human brain sees visual information, namely – proximity, similarity, continuity, closure, connection, and enclosure.
Why is the gestalt theory important? ›Gestalt theory is also important in that the idea of the whole being different than its parts has influenced our understanding of the brain and social behavior. Gestalt theory still impacts how we understand vision and the ways that context, visual illusions, and information processing impact our perception.
What is a real life example of proximity Gestalt? ›Application of proximity
For example, when looking at a line of dots on a page without knowing their purpose or order, we tend to group them in clusters if they are close enough together, instead of seeing individual dots. This understanding can be used in design by arranging related elements close to each other.
Gestalt – “An organized whole that is perceived as more than the sum of its parts.” This theory maintains that the brain follows holistic, self organizing tendencies where visual stimuli are seen in their entirety before perception breaks them into individual components.
What does Gestalt theory argue visual perception is the result of? ›
"Gestalt theory argues that visual perception is the result of organizing visual elements or shapes into groups." Similarity- Objects that look similar will be grouped together by the brain.
What are the 5 Gestalt principles identify and explain? ›Gestalt principles are the different ways individuals group stimuli together in order to make a whole that makes sense to them. These principles are divided up into five categories: proximity, similarity, continuity, connectedness, and closure.
What are the principles of perception? ›Five principles of perceptual organization are proximity, similarity, continuity, closure, and connectedness. These principles help us interpret what we see.