Visual hierarchy is the order in which the user process information by importance. In interface design, like in any other form of design, this concept is necessary to be functional at sight. With the correct use of hierarchy, the mind can group and prioritize elements to give them a specific order, which facilitates the understanding of what you want to communicate and the sense of achievement by the user.

A regular problem in interface design is the excessive use of elements or components scattered on the screen, which if not placed through a correct hierarchy, generate disorder and greater effort in navigation. The exercise of prioritizing these elements is important to avoid this problem.

The average user tends to “scan” the entire content of a screen. Therefore, the highlights should give a clear idea of what the website or application is about.

This prioritization should not only be treated as an aesthetic problem, but also as an important part of the user experience. Many of the elements included, especially in mobile devices, will be relevant to site navigation. While the hierarchy in graphic design has existed for years, the constant interaction factor is added to the UI design. The fact that users interact with the elements makes it more relevant to design an intuitive interface.

There are seven resources that must be taken into account to create a correct hierarchy:

Size

The larger the element, the more it will attract attention. It is a fact that people first see larger objects, and this includes text and images. The idea behind the use of size hierarchy is to give a focal point to start the visual journey.

If the jump from one text to another is smaller, say from 32pt to 24pt, it can make the reading order more difficult when sending two messages at the same time. This may not be a big problem, but you should keep in mind that this could create a less efficient hierarchy.

It is equally unnecessary that the important elements were too large. Creating an unnecessary imbalance can end up overshadowing the rest of the design and cause other information to get lost in the reading. Like everything else in design, balance is the key.

Color

Bright colors stand out more than muted tones. Color is a powerful visual resource, its proper use can effectively separate the elements in a screen to prioritize or depriorize them. In interface design, often the strongest color is for interaction, because of the user’s need to take action or receive feedback from the system.

There are three ways to create hierarchy using color:

Hue: Some colors stand out over others. The color tone can create several types of conflict for human eyesight, red versus green, blue versus yellow or turquoise versus brown.

Saturation: Saturated colors stand out more than gray colors. Grays and their scales always tend to be relegated by colors of great saturation, which even give the user more sense of closeness. The use of red on a gray background is an example.

Brightness: Bright colors stand out over dark ones and vice versa. Playing with bright elements on dark backgrounds creates an immediate hierarchy, this also applies when we have a white background and some dark elements.

It is important to know that the abuse of color can end up confusing the user, since it creates the illusion that everything is important in the composition. The idea of ​​hierarchy, on the other hand, starts from the idea of ​​orienting oneself on what is most relevant as opposed to what is not.

Proximity

Elements close to each other attract more attention than distant elements. Making groups using distance is a very viable resource when creating a reading order. Human sight tends to categorize elements, therefore, making this aggrupations basically facilitates the mental work of the user.

Proximity is therefore the grouping of objects in a design to create connections and associations. When things are closer, it usually means they must be related. If things are further away, it should mean that they may not be related. In short, proximity creates these relationships and brings organization and hierarchy to information.

Alignment

Any element that separates from the alignment of the others will attract attention. This is because alignment creates order between the elements, any change in this rule will be interesting to human sight and will therefore stand out considerably.

Alignment of elements is very important to create visual coherence in the design of an interface, as it allows to assign relevance to the elements on the screen and also establish the beginning and end of specific elements, either interactive or informative.

The human brain loves patterns, that’s why many of the best websites are symmetrical. This gives us the opportunity to break this rule to strategically call the user’s attention to a specific point. A user will be able to associate these elements according to their alignment or misalignment.

Repetition

Repeated styles give the impression that the elements are related. This type of hierarchy consists of reusing the same or similar elements in an interface. Repetition also gives some preponderance based on visual patterns. If something is repeated, it is because is important.

In interface design, repetition creates a sense of unity and consistency throughout the experience. For example, in this Medium article, the subtitles (h2) are marked with a repeated style, the use of bold and a larger font size give the user a sense of orientation and hierarchy based on repetition. We must know that human nature finds comfort in familiarity.

Negative space

The more space around the element, the more attention it generates. The negative space is the area where the empty canvas is shown, this can be found not only around, but between and inside the same element. It is not proper to a single color, but adopts the color of the background to give the illusion of space.

While some designers may think more is better, the visual perception is very different. Designs with a large load of closed elements cause the interface to be saturated and without a hierarchy indicating which element is more important, causing confusion and a sense of overwhelm on the part of the user.

The idea is that the more important the element, the more negative space there is around it. Isolating one element from the others is not only an elegant resource to create hierarchy, but also serves to give the design a support structure. That is to say, it creates the necessary spaces so that the view can pass from one element to another in a fluid way and without visual noise.

Texture

Varied and complex textures attract more attention than flat ones. The flat surface of a wall will stand out less than the surface of a pavement. This is because complexity will always attract more user attention than minimalism. The use of textures also incorporates other important design elements such as style and atmosphere.

This resource should be used in a dosed manner, as the abuse of textures will end up distracting rather than informing or perhaps leading to unnecessary squeumorphism. Textures tend to overlap other hierarchical resources, including size, so you must take into account the entire composition and everything the user will see on the screen of their device before incorporating texturized elements. Again, balance is the key.

When a design does not have a clear visual hierarchy, the user’s navigation is forced into other forms of reading, such as F and Z patterns. As designers, we can reinforce these patterns or break them to find more dynamic forms of communication. In UI design, nothing is just aesthetic, and the visual hierarchy is undoubtedly one of the best weapons we have for directing the user experience, re-powering design standards and offering a direct path to interface objectives.

Thank you for reading.

References:

1. What is Visual Hierarchy? by Interaction Design Fundation
2. A Graphic Designer’s Guide to Visual Hierarchy by Zevendesign

This article was the Part 1/6 of the series UI Fundamentals

The other parts here: