More useful UI/UX stuff on my Twitter:
@ascensus_mdbThe power of visual hierarchy
If you can only take one sentence out of this course, please let it be this:
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:
Your shopping cart
€59,00
At first glance, everything seems fine.
- the button representing the destructive action "clear cart" has a warning red color
- the "checkout" button has an inviting green success color
- the "continue shopping" button has a pleasant and expressive blue color
This kind of scheme is common in Bootstrap projects, as Bootstrap offers predefined colors of the buttons, each of which serves a specific semantic purpose (that is, yellow is the color 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.
Your shopping cart
€59,00
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 color 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?
Your shopping cart
€59,00
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 tetiary buttons, however, can appear many times (but be careful not to overdo them as well).
About author
Michal Szymanski
Co Founder at MDBootstrap and Tailwind Elements / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.