7 principles for designing better interfaces

19 May 2021 - by Adeline Radius
Adeline Radius
7 principes pour concevoir de meilleurs 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?

Image
Dalmatien

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. 

Image
Principe de plan

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.

Image
Principe de similitude

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.

Image
Infosan - Exemple

World Health Organization - Infosan Plateform

3. Principle of proximity

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

Image
Principe de proximité

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.

Image
Ecolint

International School of Geneva (Ecolint) - Intranet

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.

Image
Principe de région commune

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

Image
Infosan

World Health Organization - Infosan

5. Principle of continuity

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

Image
Principe de continuité

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.

Image
Principe de clôture

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.

Image
Point focal

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. 

Adeline Radius
Adeline Radius
Art Director

Adeline delivers high level creative work to allow users to access content intuitively and interactively.

Contact our experts and let's build your digital transformation together.