Perhaps, too many designers overlook the importance of psychology within the creative process and the impact that some of its principles has in the design choices that are made on a daily basis, whether printed or digital.
In web design, these principles are effectively applied in the field of User Interface (UI) allowing the messages to arrive in a pleasant and dynamic way, guiding the visual perception of it.
And it is precisely visual and spatial perception two of main topics which psychology principles studies.
People group the information received through our five senses and try, either consciously or unconsciously, to give it a meaning in an orderly and comprehensible way.
This is where the Gestalt principles come into play. Gestalt – a german word that means form – is a psychological concept that basically explains how we interpret reality. This concept explores visual perception, proposing a series of principles that describe the way in which we visually group information. Let’s briefly describe these elements and how we can use them in the design of interfaces:
We perceive objects that are close to each other as similar.
We can take advantage of this principle grouping similar information, such as sections within the same page/web application or navigation buttons. Being so close, the white space plays a fundamental role to let the eyes get some rest.
We perceive objects that share the same characteristics (color, shape, size, texture, and orientation) as being part of a set, even when they are not adjacent or closed positions.
Elements that share the same characteristics show us that they are part of a group. These can be elements of an interface of the page/application, such as web links in the nav menu, or some price cards.
We tend to group objects that are symmetrically equal, which allows us to generate patterns based on that symmetry to easily structure the information.
Knowing how to combine symmetry correctly gives us the possibility to organize graphic elements in a fluid, harmonic and simple way, giving stability and structure to what we want to show.
An example of this can be a grid of photos, a list or some product displays.
Our brain will tend to complete shapes or objects even if they are missing something.
A clear example of this principle in design is the iconography that millions see on the everyday web. In any website or app, we have the opportunity to see icons that represent different types of actions, situations or elements in a clear, concise and light way without falling into skeuomorph.
We perceive movement and direction according to some elements, even if this is not explicit.
Continuity is used when certain elements suggest that we should direct our attention to a specific place or direction. Examples of this can be the thumbnails in a gallery, a slide of images, or a drop-down menu.
We group objects that are moving or pointing in the same direction, no matter how different or how far apart they are from each other.
The common destiny is a principle that gives dynamism to a graphical interface, through the movement and the change of rhythm in a synchronic way. The breadcrumbs in the navigation or a progress bar help us to illustrate this principle.
There we have it.
Some of the Gestalt principles applied to the user interface.
Principles that will help us complete our mission in the field of web design: communicate.
At the end of the day, that is what the design of interfaces aims:
to bring in a visual and pleasant way a message to the many users that an application or website has.
Translated by @czapata