Gestalt Principles for UX Design

Gestalt Principles for UX Design

Vimlesh Gautam
3
 min read
Schedule a Demo

Gestalt principles are nothing but a set of principles by which human brains organize and understand complex patterns of design by subconsciously arranging the provided disparate elements into a whole new arrangement. These principles have been in existence since the 19th century and are now being used by UX/UI designers to organize content that is aesthetically pleasing on websites and other interfaces.

In this article, we’ll explore 5 of the most common gestalt principles and laws that modern designers can put to practice. There are almost 10+ laws in existence but most of them overlap with each other.

Closure:

Law of Closure states that no matter how many blank spaces present, our human brain tends to put together the available pieces and always perceives the image as a whole. In other words, when we look at a complex arrangement of visual elements we happen to regard it as a single recognizable pattern. Some very common examples include the IBM logo which comprises of blue horizontal lines arranged in three stacks. WWF logo also depicts the closure principle as distinguishable patterns are put together behind a white background that takes the shape of a panda.

IBM logo depicting the law of closure.

Common Region:

Though Facebook posts have a lot of elements like –  likes, shares, and comments, they can be easily differentiated from one another. This is attributed to the law of common region principle that states that humans generally group together different patterns when located within the same closed region. This can be deliberately done by adding borders or other visible barriers creating perceived separation between groups. Pinterest also uses the common region principle to separate each pin from others – this in fact including photos, titles, description, and contributors.

Real time application of law of common region.

Figure-Ground:

The figure-ground principle states that people spontaneously perceive objects as either being at the back(ground) or at the front(figure). Whenever there is an image/shape/pattern on a background first thing the users’ do on each screen is to determine which is the figure and which is the ground. With the figure-ground principle, you can immediately tell your users where and what to focus. Right usage of the figure-ground principle can also help your users to lessen their cognitive load.

Credits: Toptal

Similarity:

When things appear to be similar to each other we tend to group them together and this phenomenon is called the law of similarity – this grouping can be done with respect to shapes, color, fonts, and much more.

Credits: Creative Beacon

Proximity:

The Law of proximity states that patterns/things that are close together tend to be more related than things that are farther spaced off. This even holds true when other factors like color, shape, and size are similar. ie: the law of proximity is so strong that it overrides most of the other principles that help in grouping things together.

When designing a website/product it is always important to direct user’s attention to the right place. I would recommend all the UI/UX designers to thoroughly understand these gestalt principles before they get into any sort of product development process. Always prioritize your users’ intentions and build accordingly.


Create a more beautiful user experience

Schedule a 30-minute demo to learn how UserExperior can help you visualize critical issues on your app and correct them faster.

Related Posts