×

Login

Enter Your mobile here *

Enter the OTP send to

Register

A password will be sent to your email address.

Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our privacy policy.

The Applications of Gestalt’s Principles in UI/UX

Gestalt's Principles

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.

explaining the principle of apparent motion

Fig 1.1; in the gif above, the flickering blue spots appear to be in motion, explaining the principle of apparent motion.

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 background. You do not perceive holes in objects, 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.

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.

darker surrounding area to reveal the word “ground.”

Fig 1.2; in the figure above, we perceive the light-coloured lettering as the figure against a darker background. But if you take a closer look, you can see that the darker surrounding area to reveal the word “ground.”

we perceive either a white vase against a black background or two silhouetted faces looking at each other against a black background

Fig. 1.3; based on the figure-ground principle, we either perceive a black vase against a white background or two silhouetted faces looking at each other against a black background.

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 this 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 in into the background. The user can still scroll the page, but the alert message remains in a fixed to the page, reinforcing it as the figure set against the ground.

principle of figure-ground

Fig 1.4; the Forever21 homepage applies the principle of figure-ground to separate the background from the main alert message on the foreground.

Gestalt Principles – Proximity

To understood 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.

how we perceive the images on both sides.

Figure 1.5; how we perceive the images on both sides.

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 similarity of colour, shape, size and other factors that might distinguish a group of objects.

how we can imply a distinction.

Fig 1.6; how we can imply a distinction.

In figure 1.6, we notice that there 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 colour.

Application of this 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.

proximity principle to differentiate  content

Fig 1.7; blogs and article sources apply the proximity principle to differentiate their 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 then 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.

distinguish the arrangement of the exterior circles from the interior diamonds based on the similarity principle

Fig 1.8; one can clearly distinguish the arrangement of the exterior circles from the interior diamonds based on the similarity principle

A multitude of design elements, like colour, shape, 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 colour.

each row represents a distinct group based on colour.

Fig 1.9; Even though all of the shapes are the same, it’s clear that each row represents a distinct group based on colour.

Application of this Gestalt Principles in UI Design

Websites and apps apply 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.

applying the Gestalt Principle of similarity in Twitter’s sign up feed

Fig 1.10; applying the Gestalt Principle of similarity in Twitter’s sign up feed

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 colour neon blue to focus on ‘browse’ hyperlinks. It communicates that all of the bright blue text shares a standard function.

Application of the Gestalt Principles of similarity on SourceForge.com’s homepage.

Fig 1.11; Application of the Gestalt Principles of similarity on SourceForge.com’s homepage.

Gestalt Principles – Continuity

the Gestalt Principle of continuity states that 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 colour.

elements that are arranged along a line or curve over elements that are not on the line or curve.

Fig 1.12; relating to elements that are arranged along a line or curve over elements that are not on the line or curve.

Application of this Gestalt Principles in UI Design

Amazon applies the Gestalt Principle of continuity

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.

application of Gestalt Principle of closure closure

Fig 1.14; application of Gestalt Principle of closure closure

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 this Gestalt Principles in UI Design

We significantly apply Gestalt Principle of closure in day-to-day examples of logo designs of renowned brands and companies such as Adobe, NBC news, WWF, Adidas.

Application of the Gestalt Principles of Closure in logo designs of renowned companies.

Fig 1.14; Application of the Gestalt Principles of Closure in logo designs of renowned companies.

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 centre 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.

the red sun right in the centre stands out from the rest of the black squares.

Fig 1.15; the red sun right in the centre stands out from the rest of the black squares.

Application of this Gestalt Principles in UI Design

As seen in the homepage of the website below, they have applied Gestalt Principle of the focal point in designing their call to action button ‘Get a free API key’.

the website Twilio rightly shows the use of the focal point principle

Fig 1.16; the website Twilio rightly shows the use of the focal point principle to draw the user’s attention to their call-to-action button.

Gestalt Principles – Common Region

Gestalt Principle of the common region is related to the Gestalt Principle of proximity. It states thatplacing 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.

proximity principle to differentiate  content

Fig 1.17; applying the Gestalt Principle of the common region.

Application of this 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.

applying the Gestalt Principle of a common region in Pinterest.

Fig 1.18; applying the Gestalt Principle of a common region in Pinterest.

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 composes 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 endeavour. However, using beliefs like the Gestalt Principles, architectural design can become intuitive and creative.

Conclusion – Gestalt principles of design

The fundamental idea of Gestalts 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. By 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 help 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, 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 behavioural change.
  • And finally, at the most complex level, the Gestalt principles help design products that solve the user’s problem or fulfil the user’s need in a way that’s satisfying, positive, seamless and interactive.
ImaginXP is leading the HigherEd revolution offering some of the best future skills certification courses and full time degree programs in Business, design and Technology. We are pioneering the higher educational space with top-notch faculties and industry-led curriculum.

    1 Comment

  1. January 15, 2022
    Reply

    Greate post. Keep writing such kind of info on your page.
    Im really impressed by your site.
    Hey there, You’ve performed a fantastic job. I’ll definitely
    digg it and in my view recommend to my friends. I’m confident they will be benefited from this website.

Leave A Reply

Your email address will not be published. Required fields are marked *

PHP Code Snippets Powered By : XYZScripts.com

Future-proof your career with us!



    By submitting this form I agree to the DNC/NDNC contact clause
    I authorize ImaginXP and its representatives to Call, SMS, Email or WhatsApp me about its products and offers. This consent overrides any registration for DNC / NDNC.
    We use cookies to improve and personalize your experience with ImaginXP. By continuing to use our website, you consent to the use of these cookies. We recommend you to go through our Privacy Policy.
    Uploaded Successfully
    Uploading Please wait