More useful UI/UX stuff on my Twitter:
@ascensus_mdbThe art of prioritization
As designers, we often have a very personal approach to the projects we create. It's quite normal. However, the problem comes when we get too emotional and lose our objectivity.
In such situations, when creating an interface, we start to think that each element is equally important.
If, for example, we spent a lot of time polishing some secondary button with barely additional information, it's hard for us to accept that the user may not even pay attention to it.
We wrongly assume that the user will approach our UI with great enthusiasm and will want to spend an unlimited amount of time with it, thoroughly exploring every, even the smallest, detail designed by us.
And that's when we start emphasizing too many elements in our UI, which inevitably leads to cognitive overload of the user and ultimately to a worse user experience.
How do you feel looking at the dashboard below?
In fact, what is the most important element here? So many intense colors, so many expressive components, so many words screaming for attention.
In my opinion, this dashboard is like a rainbow. A rainbow can be beautiful, but you can't say that one color is more important than the other 6. There is no visual hierarchy in a rainbow and it's hard to get practical information out of it.
So don't let your interfaces be like a rainbow.
Yet another hard to accept truth
The hard to accept truth is that most often the user does not care about our design and only wants to find the content / information that interests him as soon as possible.
Everything that brings him closer to this goal he considers "good", and everything that hinders him "bad".
He's not going to spend more time in our interface than necessary. So we really only have a moment to catch his attention and help him find what he wants.
That's why we have to be very careful in choosing what to emphasize, deliberately reducing the weight of everything around it.
In short - we need to learn the art of prioritization in UI design to be able to create a clear visual hierarchy.
Practical tip with an example
Don't
Avoid presenting too much information to the user at once, especially when it lacks a clear hierarchy and all actions seem equally important. In the example below there is a navbar with 4 links that look identical, although only one is really crucial. It takes extra effort on the part of the user to find it.
View demo on desktop
Do
Hierarchy is fundamental. The user should always know what the main action is expected of him. Don't add more than one key action per view and make it stand out from other interface elements.
In this case, such a key action is the "pay" option, which has been changed from a simple link into a distinctive button. The remaining links have been placed in the dropdown menu ("more") as additional options.
View demo on desktop
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.