More useful UI/UX stuff on my Twitter:
@ascensus_mdbSize matters
Size matters in the visual hierarchy, but contrary to appearances, bigger does not mean better.
We talked about this in the previous lesson. When we exaggerate with emphasizing primary elements, the effect can be grotesque and bizarre. And that's just the beginning of the problems.
Practical tip with an example
Don't
It is true that the CTA buttons are the most important element of the interface, but you still need to be moderate in emphasizing their importance.
For example, by exaggerating the size, we can easily disrupt the hierarchy, which will make the user's attention completely absorbed by the absolutely dominant element (in the example below by the huge CTA button). This can create a so-called "banner blindness" effect that will make your heading and its message not noticeable anymore.
We can offer you the best price in the market
But you probably won't notice it because the big button below grabs your attention.
Do
Look for the golden mean and keep in mind the hierarchy of elements. Thanks to this, the user looking at your interface will easily find the path he should follow.
We can offer you the best price in the market
And you will notice it because nothing distracts you.
Typography
Things are a bit more complicated in the case of typography, especially since the semantics of HTML elements (like H1 or h6) tell us not very practical sizes.
If we wanted to rely on HTML heading sizes to build a visual hierarchy, we could end up with a monster like the one below.
Here we used h3 elements for card titles ("Users", "Page Views" etc.) and smaller h4 headings for main statistics and even smaller h5 headings for previous period statistics.
Semantically everything is correct, but honestly looking at this UI I have no idea what is the most important here and what should I focus my eyes on.
Users
14 567 13,48%
Previous period
11 467
Page views
51 354 23,58%
Previous period
38 454
Average time
00:04:20 23,58%
Previous period
00:05:20
Bounce rate
32.35% 23,58%
Previous period
24.35%
Let's try a different approach. First of all, let's agree that HTML semantics will not dictate what the element should look like.
This means that, for example, the title of the card, although it will remain an h3 element (i.e. semantically with the highest weight among those present in this card), we style it so that it looks less important.
Why? Because it is only a label, which, although important, should not dominate over the most important element - the main statistic.
Then, instead of relying entirely on typography size, we'll also use font weight and color to establish hierarchy.
Users
14 567 13,48%
Previous period
11 467
Page views
51 354 23,58%
Previous period
38 454
Average time
00:04:20 23,58%
Previous period
00:05:20
Bounce rate
32.35% 23,58%
Previous period
24.35%
What we did here:
- We lowered the importance of the card title by reducing its size and changing its color to a lighter one. To slightly compensate for the loss of priority, we converted the text to uppercase.
- We increased the importance of the main stat by increasing the font weight, because this is really the most important element in this UI (and not the title of the card).
- We reduced the size of the percentage change statistic because it is a secondary item.
- We reduced the importance of the "previous period" section by reducing the size and using a lighter color.
So, by judicious manipulation of the font size, color, and weight, we were able to emphasize the primary elements and de-emphasize the secondary elements, thus achieving the desired visual hierarchy.
How do you feel about this now?
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.