The Applications of Gestalt’s Principles in UI/UX
Gestalt principles are a theory of design that explains how cognition plays a role in the way people view and perceive design. The phrase ‘the whole is greater than the sum of its parts’ is commonly used to explain the Gestalt theory, with ‘Gestalt’ meaning ‘form’ or ‘shape’.
It is better to view the idea of all elements of design as a complete whole rather than isolated parts. Wertheimer made the original development of Gestalt principles. He discovered that the human brain could perceive motion, even where there is nothing more than a rapid sequence of individual sensory events. Wertheimer made this discovery with the help of a toy stroboscope. He experimented with flashing lights in quick succession (much like Christmas lights that flicker around the tree). This effect came to be known as ‘apparent motion’, and it is applicable as the primary principle in making motion films and videos. You may also check the integrated degree courses here.
You May Also Check:
Visual perception helps us make sense of all the diverse stimuli that we perceive in the world. One way to bring order and clarity into our perception is our ability to group similar things. This way, we can reduce the number of items that need to be processed by our brain. We can also better decide which things belong together or to the same object. Each principle demonstrates the fundamental law that our brain naturally combines distinct parts of an object to form a complete picture. Take a moment and scan your surroundings. You will perceive a coherent, comprehensive, and continuous array of figures and backgrounds. You do not perceive holes in objects, or old stains on a wall. If a magazine is concealing a part of the edge of a table, you still smell the table as a continuous and complete object. Let’s have a closer look at the Gestalt principles in UI design. Learn what is ui in mobile here!
Gestalt Principles – Figure-Ground
What happens when you walk into a room? You perceive that some things stand out (e.g., faces in photographs or posters). Others fade into the background (e.g., undecorated walls and floors). A figure is a highlighted object against a backdrop. People almost instinctively view items in or against some kind of retreating background. In other words, our brain can separate a figure (foreground) from its environment.
Similarly, in Figure 1.3, we perceive either a white vase against a black background or two silhouetted faces looking at each other against a black background. It is virtually impossible to see both sets of objects simultaneously at one time. Although you may switch rapidly back and forth between the vase and the faces, you cannot view both of them at the same time.
Application of Gestalt Principles in UI Design
The homepage of the e-commerce website, Forever21, applies the figure-ground relationship to post an alert message when you first visit the homepage. When the message appears, the rest of the page goes dim, pushing it into the background. The user can still scroll the page, but the alert message remains fixed to the page, reinforcing it as the figure set against the ground.
Gestalt Principles – Proximity
To understand the proximity effect, let’s take the group of circles in Figure 1.5 as an example. The first arrangement of hearts on the left is perceived to be one group wherein the elements are related to each other. However, we perceive the second image on the right as two distinct groups, and we understand that there is a difference between them. You may enroll for the latest batch of the Top UX Design Course here.
The proximity effect considers how closely we place elements next to each other. Proximity is said to be stronger when the elements overlap each other. Sometimes, we can achieve closeness by simply grouping objects in a particular area. The opposite also stands true, of course. By applying a space between the elements, we can imply distinction even when their other characteristics are the same. Proximity is so powerful that it outweighs the similarity of color, shape, size, and other factors that might distinguish a group of objects.
In Figure 1.6, we notice that there are three distinct groups of red and green hearts. It shows that the relative closeness of the elements has a much more substantial impact on grouping than just color.
Application of Gestalt Principles in UI Design
Familiar news sources and online blogs apply the proximity principle as shown in Figure 1.7 to differentiate between headlines, news images, descriptions, and content.
Gestalt Principles – Similarity
The similarity effect proposes that when objects appear similar to each other, our brain automatically puts them in a group. We also believe that they serve the same function or purpose. For instance, Figure 1.8 appears as if there are two separate groups based on shape, i.e. circles and diamonds. What’s even more fascinating is without much thought, we group all the circles to form the shape of a square.
A multitude of design elements, like color, shape, and categorization, can be used to create similar groups. In Figure 1.9, for example, even though all of the forms are the same, it’s clear that each row represents a distinct group based on color.
Application of Gestalt Principles in UI Design
Websites and apps apply the Gestalt Principle of similarity in designing user registration and log-in forms. As seen in the figure below, the empty spaces are all the same shade of grey, but due to the differences in sizes and length, we can quickly tell that each grey space is asking for a piece of different information. You can also learn more about universal design in hci.
SourceForge applies the similarity principle in two ways, as shown in Figure 1.11 below. First, they use it to separate different sections. The viewer can instantly tell that the orange section at the top is separate from the black section, which is also distinctly different from the features that appear in the white space at the bottom. Second, they use the color neon blue to focus on ‘browse’ hyperlinks. It communicates that all of the bright blue text shares a standard function.
Gestalt Principles – Continuity
The Gestalt Principle of continuity states that the arrangement of elements along a line or curve is perceived to be more closely related than elements that are not on the line or curve. In Figure 1.12, we closely relate to the yellow emojis rather than the scattered green emojis. It is because our eyes naturally follow the progression of a line or a curve, making continuation a more decisive factor of relatedness than the similarity of color.
Application of Gestalt Principles in UI Design
Fig 1.13; Amazon applies the Gestalt Principle of continuity to convey to its users that each of the products above is similar and related to each other.
Gestalt Principles – Closure
Gestalt Principle of closure suggests that when we look at a diverse arrangement of visual elements, our brain still perceives it to be a complete whole. In other words, when we look at an object or a pattern that has missing parts, our mind will automatically fill the gaps to form a complete image so we can recognize it as a meaningful pattern.
For example, Figure 1.14 is commonly perceived as a football, even though the image is just a collection of disjointed black shapes. The mind fills the gaps in missing information to form an overall familiar and easy-to-recognize image based on past experiences.
Application of Gestalt Principles in UI Design
We significantly apply the Gestalt Principle of closure in day-to-day examples of logo designs of renowned brands and companies such as Adobe, NBC News, WWF, and Adidas.
Gestalt Principles – Focal point
The focal point principle states that any feature or element that stands out visually will attract the viewer’s attention more readily. When you look at Figure 1.15, for example, the first thing you will notice is the red sun right in the center because it stands out from the rest of the black squares. It’s the central point of focus that grabs your attention, and from there, your attention moves to other parts of the image.
Application of Gestalt Principles in UI Design
As seen on the homepage of the website below, they have applied the Gestalt Principle of the focal point in designing their call to action button ‘Get a free API key’.
Gestalt Principles – Common Region
The Gestalt Principle of the common region is related to the Gestalt Principle of proximity. It states that placing objects within the same area allows us to perceive them as one group. But if you signify a distinct border or enclosure around some of the items, it becomes different from the rest.
Application of Gestalt Principles in UI Design
In Figure 1.18 below, even the Pinterest board has an overall common theme and a pink aesthetic, by placing white borders around it, we can differentiate each picture.
Gestalt principles in architecture
Whether symmetrical or asymmetrical, architecture always tries to achieve design balance.
For example, when we view a building from any angle or distance, we may apply one of the Gestalt Principles of design. Such principles usually grasp upon a combination of elements reflecting patterns like similarity, closure, figure/ground, etc. Figuring out how we as a species understand patterns and balance is an absorbing subject, and understanding why the wiring within our brains for symmetry can provide profound insights.
For architecture to achieve a certain kind of balance, designers synchronize elements, so, each interacts with the other – eventually composing a kind of system. At its core, architecture is composed of a rhythmic language to bring balance by using multiple elements. As architecture is a composition of all the senses we humans possess, coming about design balance is a complicated endeavor. However, using beliefs like the Gestalt Principles, architectural design can become intuitive and creative.
Conclusion – Gestalt principles of design
The fundamental idea of Gestalt’s principles of design is that our mind is always looking for order and structure, even when there is chaos. We tend to give shape to ambiguous information to form meaningful experiences. Perceiving things to be orderly, organized, and familiar provides us with a sense of completion. When understanding users’ reactions to products and why they behave a certain way, having a solid understanding of the cognitive principle helps in a myriad of ways:
- As a UX designer, it will help you define which design elements are most operative in a given situation. For instance, deciding in what cases it is suitable to use a visual hierarchy, whether to opt for a particular background shading or gradients and how to group similar items and separate, distinct ones.
- These psychological principles have a significant impact on visual perception, which allows designers to attract and sustain users’ attention to specific points of focus, get them to take particular actions, and create behavioral change.
- Finally, at the most complex level, the Gestalt principles help design products that solve the user’s problem or fulfill the user’s need in a way that’s satisfying, positive, seamless and interactive.
