WebDesign Tutorial - The power of visual hierarchy

This is part six. You can find the fifth part, Less is More, here

The power of visual hierarchy

---

If you can only take one sentence out of this course, please let it be this:

Visual hierarchy is absolutely crucial when designing interfaces and fundamentally determines what the user considers beautiful and what ugly.

But what exactly a visual hierarchy is?

In a simple words - it's a concept in UI design that involves arranging and prioritizing elements on a screen to guide the user's attention and create the best possible user experience.

The user should be able to easily identify the key interface elements and the actions we expect from him. At the same time, we cannot overload the user with too much information and expect several actions from him at once. Therefore, interface elements should have a clear and distinct hierarchy.

Let's use an example

Take a look at a shopping cart below:

At first glance, everything seems fine.

• the button representing the destructive action "clear cart" has a warning red colour

• the "checkout" button has an inviting green success colour

• the "continue shopping" button has a pleasant and expressive blue colour

This kind of scheme is common in Bootstrap projects, as Bootstrap offers predefined colours of the buttons, each of which serves a specific semantic purpose (that is, yellow is the colour of warning, red is danger, green is success, etc.)

Take another look at this shopping cart. Although the semantic meaning of each button is clear and Bootstrap's division of buttons seems very reasonable, something is wrong here.

Every action here seems equally important, every button fights with equal intensity for our attention.

In fact, it's even worse - the destructive "clear cart" button attracts the most attention, because the red colour has such a dominant effect on the human psyche (our brain associates red with blood, and thus with danger). And yet we do not really want that the user clicks this button and clears his cart and thus resigning from shopping.

Simply put - this UI lacks hierarchy and the user has no idea what is less and what is more important.

The conclusion is obvious - semantics (color semantics in this case) cannot stand above the hierarchy.

How to set the hierarchy?

The answer to this question is complex and in different types of interfaces and with different types of elements there are different ways to do it. We'll spend an entire chapter on how to establish a hierarchy.

On the example of buttons - user should be able to easily identify which button is the most important (primary button), which is less important (secondary button) and which presents completely additional information (tertiary button).

Elements with strong, filled backgrounds and shadows attract attention the most, which is why button primary should be built in this way.

A delicate background without shadows is less engaging, so it is well suited for button secondary.

The lack of background and shadow makes the element the least visible. These features should characterize the button tertiary.

So what should our shopping cart look like?

Ahh, don't you think it looks better? Compare this to the previous example and think about what your mind is saying.

When I look at the previous example where there is no hierarchy, my mind screams that it doesn't know how to interpret it and that it's tiring to look at. In short - my brain can't cope with the interface, which is unclear and require additional mental energy, so it qualifies it as "ugly".

But when I look at the second example, I feel relaxed and at peace. My mind is happy because there is no doubt what is most important in this interface and it does not require any additional thinking. This gives the mind the impression that it did a good job interpreting the UI and thus more likely to classify it as "beautiful ".

---

Remember: there should be only one key action in a given view, represented, for example, by a primary button. Never use more than 1 primary button in a given view, otherwise you will confuse your user.

The secondary and tertiary buttons, however, can appear many times (but be careful not to overdo them as well).

Next part - The art of prioritization

Material Minimal, which is basically Material Design on steroids can be found here on Figma.
Material Design for Bootstrap is a UI Kit, that uses Material Minimal, check it out here.
And TW Elements, our newest child is based on Tailwind CSS. Check it out!