De-emphasize with no mercy

You have to be ruthless when designing the UI. Forget the ideals of equality and egalitarianism.

In the brutal reality of user interfaces, not all elements are created equal. And it's your job to make the secondary really look like the secondary so that the primary can shine.

You may ask, why do we have to be so cruel to secondary elements? Wouldn't it be enough if we just emphasized the primary elements more?

This is not always possible, especially if you want to avoid grotesque-looking primary elements in too large sizes, too intense colors or too thick fonts.

Take a look at the example below - we have typical pricing here, with three cards, each with one main "Buy" button.

Typically, with such a layout, one of the options should be highlighted the most to immediately suggest a solution to the user, minimizing his mental effort.

Most often, the suggested option is the middle one, because it is in the middle that we direct our eyes by default.

However, there is a problem - all three buttons look the same and have the same weight. They fight for the user's attention with the same intensity and no option stands out above the others.

We can try to emphasize the importance of the middle option by increasing the size and weight of the middle button. However, the effect is bizarre.

A better way is to de-emphasize those elements that are less important - i.e. the buttons on the right and left.

Look now - the result is not only aesthetic but also functional - now there is no doubt which option will attract the most attention of the user.

What is really primary?

The biggest challenge is figuring out what's really important in our UI.

We are often tempted to think schematically and, for example, treat Call to Action buttons as the most important thing by default.

Take, for example, this article listing. Here we have a series of cascading cards with a photo, title, short description and of course the "read more" button, which naturally acts as a Call to Action and encourages the user to perform the most important action for us - to read the article.

Unlike pricing, here we cannot highlight one most important option - all articles are equally important.

So we have the impression of a bit of chaos and overload, as six Call to Action buttons fight for our attention.

However, if we think deeper, we will notice that it is not the buttons that should be the most important here.

It is the photos that should catch our attention the most. In the era of Instagram and visual content, users scan the interface with a pattern in search of attractive graphics.

In addition, it is already standard that clicking on the photo takes the user further, so why do we need buttons at all?

So if we assume that graphics are the primary elements, we can de-emphasize everything else as secondary:

• get rid of the buttons
• remove shadow from cards (shadows make this already dense layout even denser)
• shorten the descriptions under the photos
• give the descriptions a lighter color

And now our primary elements, i.e. photos, can really shine.