Basics of Hierarchy in Interface Design (UI) – Here are six fundamental properties.

Visual hierarchy is a concept that allows a user to process information in a specific order. Its function in Interface Design (UI) is to facilitate the understanding of information by the user.

Alignment

Alignment can create order between elements. When any of the elements ‘break’ from the overall alignment, it will attract attention. This rule also allows us to relate elements to each other and understand the beginning and the ending of specific information.

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

Color

Bright colors stand out more than muted colors. For instance, yellow is more vibrant and more vivid than white (as white is more muted), so it stands out. An excellent example of this is using a highlighter to mark important words on a sheet of paper. In Interface Design, the most vital color is for interaction, as the user feels the need to take action or receive feedback from the system.

Whitespace

An excellent way to generate attention to specific content pieces is to use space around them: the more space, the more attention. And on top of that, whitespace also makes information easier for the eye to digest, since it gives the layout more breathing room.

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.

Size

A large element on the page will — compared to smaller elements — attract more attention. For instance, with typography, larger fonts (like headlines or page titles) will be noticed first. The concept behind the 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 crucial elements were too large. Creating an extreme 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.

Repetition

Repeating styles will give the impression that content is related. In Interface Design, repetition facilitates a sense of uniformity and consistency throughout the design. For instance, in this post, the headings have the same repeated style. The use of a number, a bold weight, and a larger font size gives you a sense of orientation and hierarchy based on repetition.

Proximity

If elements are close to each other, they will tell our users how likely they are related. If things are further away, then they may not be related. In summary, proximity creates these connections and brings order and hierarchy to information.

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

You can also take a look at my recent blog Basics of Color in Interface Design (UI)