7 principles for designing better interfaces

While taking the UX-PM certification a few weeks ago, I was captivated when the trainer mentioned the “Gestalt theory”. His explanations immediately spoke to me as an interface designer but also as a UX designer.

I am indeed lucky to have come to UX through design. After several years of pure interface design for my clients, I logically went back to the roots of my work in a permanent desire to give meaning to my mandates. I then realized that I was not only working for my clients but also for their users. From then on, there was no return. A new playground was opening up in front of me.

The Gestalt theory

Also called configurationism, the Gestalt theory tries to show that the brain processes forms as a whole and not as individual entities.

A well-known example is this one: What can you see? A cluster of dots or a Dalmatian?

Shapes are interpreted through sensory schemas constructed through experience. These schemas will organize our perceptions, bringing the shapes into a cognitive framework and establishing relationships between them.

The theory is developed around 7 principles:

1. Principle of figure-ground
2. Principle of similarity
3. Principle of proximity
4. Principle of common region
5. Principle of continuity
6. Principle of closure
7. Principle of focal point

In UX design as in interface design, cognitive aspects are to be taken into account because a user never arrives on a page without any experience.

When I started my research, I realized that without knowing it, I was already applying many of these principles. Content hierarchy, block display, header layout, white space settings etc. 

1. Principle of figure-ground

People instinctively perceive objects as being either in the foreground or in the background. 

Example of the figure-ground principle

The UICC.org homepage shows a nice example of using this principle. The different colored backgrounds will make the elements appear sometimes either on the front or in the background. This allows the user to instinctively know what to ignore and what to look at carefully. The baseline, values and key sites of the organization are then brought to the forefront in a striking manner.

2. Principle of similarity

When things are similar, the brain groups them together. If we apply this principle to a digital product, we could even say that the brain will attribute the same functions to them. On the other hand, we can better dissociate the elements that do not have the same function.

Example of the similarity principle

The collaborative platform we created for Infosan is a good example. The different action zones are delimited by different background colors. The upper navigation, on a dark background, stands out clearly from the rest of the page. The lower part presents elements of the same nature and is therefore perceived as a set of results. The white part presents filtering options.

3. Principle of proximity

Objects that are close to each other are more related than those that are farther apart.

Example of the proximity principle

The display on the Fribourg Hospital website shows how the proximity between the text and image demonstrates that they are linked together as an entity. Conversely, the large space between each entity makes it possible to immediately identify them as separate.

On the intranet of the International School of Geneva, the proximity between the image and the text allows them to be associated as a single element. The separators and spacing between the elements allow them to be distinguished from each other.

4. Principle of common region

The common region principle is closely related to the law of proximity. When objects are located in the same closed region, we perceive them as being grouped together.

Example of the common region principle

This principle is used on Infosan - the World Health Organisation's collaborative platform - to show that the like, react and share action buttons are associated with a specific post (and not with those around it).

5. Principle of continuity

Elements that are arranged on a line or curve are perceived as being more related than elements that are not.

Example of the continuity principle

To present the key figures of the Centre Iconographique de la Ville de Genève, the principle of continuity has been used to encourage a linear reading of the key figures. The structure of each entry is identical and having them aligned encourages the user to read from left to right.

Same idea for the International Federation of Dentists.

6. Principle of closure

The brain is programmed to recognize shapes and interpret them. When we look at a complex arrangement of visual elements, we tend to look for a single recognizable shape.

Example of the closure principle

The titles of the banners on the Swiss Better Gold Association website appear to be contained within a speech bubble. However, only the lower part of the bubble is represented. It is enough to suggest the whole shape.

7. Principle of focal point

Everything that stands out visually captures and holds the user's attention first.

Example of the focal point principle

The homepage of the Centre Iconographique de la Ville de Genève, shows how the use of color can highlight important entries. The elements in orange stand out clearly in contrast to the elements in gray. Here, the search is clearly identified as the main functionality.

To conclude

These 7 principles contribute to the fact that a page makes sense to the viewer. Taking them into account in the interface design contributes to a quality user experience.

References

UserTesting: 7 Gestalt principles of visual perception: cognitive psychology for UX

UX Republic: La théorie de la Gestalt ou Psychologie de la forme

Wikipédia: Gestalt Psychology

Want to know more?

Inovae is a digital agency that places user issues at the center of its concerns. For each project, we use all our skills and know-how to follow a meticulous creative process in order to provide your visitors with an immersive and unique experience on each page. 

Please don’t hesitate to contact us if you would like to know more about our methods and solutions.