Interface design tips. Part 1 – Gestalt

If you often ask yourself questions like: Did I build the home page correctly? What’s the best way to highlight the CTA button, so it doesn’t get lost in the multitude of objects? How do direct the user to the right place and control his gaze? Let’s try to figure it out together. 🙂

Usually, articles about the psychology of design or Gestalt principles in design are quite artificial and filled with inanimate examples. In this article, I will try to correct this misunderstanding, which may allow you to get a better understanding of it all.

In brief, we will talk about: the Gestalt principles, techniques for dealing with user attention, mental models that a user follows when performing an action, and a whole range of psychological models that ultimately influence the user’s behavior.

All these confusing substances people typically call anchor objects, psychological effects, or just five, six, seven (etc.) tips for building a design.

These rules will help organize objects and assemble an aesthetically pleasing layout or visual and design the best possible navigation. They should be used as basic mechanisms in design.

The Law of Equal Connection and the Law of the Common Region

When elements that are connected by a line, a color, or a common frame feel like a whole. Elements that are not part of a connection group feel like separate objects from that group. In this way you assign common characteristics to this group.

Important: When combining objects, do not resort to multiple grouping and close spacing, as this will worsen the picture and create a lot of extra noise and crowded layout.

Where is a good place to apply this principle?

1. When you need to organize/group objects, or highlight content. For example: Highlighting a favorable plan in subscriptions.

2. When creating a logo or icon. That is, when some parts are missing, our brain will still correctly read the image and finish drawing the necessary connections, and the elements themselves, which are on the same trajectory and move in the same direction unite the form and create a complete silhouette.Look at the example of the butterfly below: we automatically finish drawing the wings of the butterfly, although they consist of different elements.The main principle is the simplicity of the figure. We make it so that complex objects form something simpler.For example: logos from the Dribble sit

3. In the text. When I created this article, I used the principle of equal connection. My headlines and text are tied together. The indents between blocks of text allow you to quickly scan the article and highlight the information that is important to you. For example: article on tilde.

4. On the site. For example, when you want to highlight a feedback form, a login form, or a subscription form. Note that the forms are most often framed or highlighted with a bright backdrop.

The Law of Similarity

It is when our eyes perceive similarly shaped objects into something coherent, when objects are separated in space. I would classify it more as a creative application. But it can also be used in menus. On websites, for example, or in mobile applications.

Important! When designing, keep in mind that your buttons, links, and navigation elements are different from regular objects and text blocks. Not only visual objects should follow this law, but also animation of navigation blocks, links, buttons when hovering – should belong to different groups.This allows you to understand that the different fragments are related to each other. Once it is discovered that one of them is a link, the user can easily navigate to the right area.

Examples of using the effect.

1. On the main pages of the site. Here the linear graphics are located in different places, but are perceived as one whole due to the style of the figures. In the second example, the drawing cards are located in different places, but form a single composition.

2. The blocks in the menu help to divide the information into different categories, which makes it easy to scan the right section.

The law of proximity in space

At first glance it may seem that this principle is very similar to the previous one, but it is not. It is based on the correct use of white space. The bottom line is this: the objects next to each other are grouped together to encrypt some logic, or a common resemblance to each other. Even if the objects have a different shape they are united by a common space, creating a coherent group of objects.

Important! When designing an adaptive design, pay attention to the links of groups! They should not get lost! Let’s say you designed the desktop version, and divided objects into linked groups. In the desktop version, everything is fine. There’s enough space to make it noticeable. But when you switch to mobile design, you might find that the connections are lost. Immediately it’s clear that it’s due to lack of space. To avoid such cases, for example, you can apply the mobile first methodology.This effect is stronger than the law of similarity (the one using different shape colors), so always try to combine it.

Where does this principle apply?

1. In news articles. They show very well which group the news blocks belong to, although not all objects are similar in form. Notice how the empty space works. It helps separate the categories of the news feed.

2. In the product listing. We clearly distinguish product categories based on a common attribute. Or when placing an order (in the checkout) it’s good to use this principle, highlighting different groups of objects, combining them into one space.For example: Utkonos highlights its product categories, and Skilbox separates the product cards from the filters, uniting the categories by a common design and different indentation between blocks.

In design, you will always use several laws of UX design. Ordinary templates with drawn circles and squares won’t help you understand them deeply. Practice your knowledge on different jobs. Try to analyze your own work or that of your colleagues. I, daily use different web services, and already made a habit of immediately try to dig out something in someone else’s design. This is what helps me quickly navigate my own projects.

In the next part I will tell you how to design interfaces effectively covering another important part – cognitive psychology. Which also has different psychological objects of attention, perception, memory, and problem-solving abilities.