I know this may seem counterintuitive, but hey, here's another inconvenient truth - labels in UI aren't as important as most people assume.
What's more, they can even be harmful, as they make it difficult for us to create a visual hierarchy.
Where does this sentiment for labels come from? I suspect that mainly out of respect for the tables and database-like scheme.
It's hard to resist the impression that in our chaotic world, tables bring a sense of order and proper organization.
The label: value scheme seems so reasonable.
And it often is. But not always!
Don't treat the user like an idiot
Sometimes labels not only do not bring any benefit, but they can give the impression that we treat the user like an idiot.
Let's take a look at the product card below:
Does the user really need additional support to understand that:
- "Elegant dress" is the name of the product?
- "-15%" means a discount?
- "Dresses" means a category?
- Stars mean rating?
- "$101" is the price?
Of course he doesn't! So let's take him seriously in our UI.
Free your mind from the database-like schema
Whenever you have to use a label, ask yourself - Is it really needed? Am I treating the user like an idiot? Am I falling into a database-like scheme?
Don't take it wrong - labels are still important and useful.
They often provide much-needed context and information about a particular element or action. However, they can also clutter the interface, make it harder for users to navigate, and slow down their interactions. When used excessively, labels can cause cognitive overload, leading to confusion and frustration.
By avoiding labels (if possible), we can create a cleaner and more streamlined UI.
If you can't avoid the label, de-emphasize it
We talked about this in the previous lesson - even in situations where the label is necessary, it is rarely the most important element of the interface.
Therefore, it is often the best approach to treat labels as secondary elements and lower their visibility so that primary elements can get the attention they deserve.
In the example from the previous lesson, the card titles ("Users", "Page views", etc.) serve labels and cannot be removed. We need them to identify what the statistics are about.
However, it's not the labels that should be the most important here, but the main stats. Therefore, we should de-emphasize the labels by reducing their size, font weight and changing the color to the lighter one.
14 567 13,48%
51 354 23,58%
Practical tip with an example
Don't overdo the labels. A database-like schema can be tempting because it uses a simple label: value formula. However, such a UI makes it impossible to apply a clear hierarchy because all the elements seem to be equally important.
|Year of production
|Sandra C Stuart
Usually, it's not the labels that are most important, but the data. And in the vast majority of cases, the data does not require a label because it is clear enough on its own.
Take advantage of this trait and give up labels wherever possible. At the same time, impose a clear hierarchy so that the user can easily identify the most important information.
Mountain bike - 12 years old
Sandra C Stuart
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.