We want interfaces to help users solve their problems. Building your interface with the principles of visual hierarchy can help with that. You can check it with visual loudness guide by Tom Osborne.
Controls on the visual loudness scale
The table lists the main styles of our controls, arranged according to the scale of visual loudness.
|Appearance||Type (||Loudness||Frequency of use||When to use|
|Screech, loud roar. The dovahkin button, every time it appears on the page, it yells at you: ||Rare||The action is dangerous for the user: destructive, irreversible. We need to stir them up so that they don't accidentally hurt themself.|
|Shout of approval. The button winks at the user: ||Often||Good, important accent action to take, CTA. Subscribe or upgrade your Semrush subscription, for example.|
|One-time cry. The button doesn't reach you, but as if slightly reminds that it is ready to do a useful action for you. ||Often||A common accent action in this world of dullness.|
|Rare||It is an invert version of primary buttons for using on a dark background.|
|Conversation nearby. This is a bro button. It will always support you, always with you, but their presence doesn't bother you. ||Often||A common action button.|
|Rare||It is an invert version of secondary button for using on a dark background.|
|Quiet request. ||Often||Accent, but not stressful visual control. Use |
|Link||Often||Accent, but not stressful visual control. Use it in the opposite to |
|Whisper. ||Neither often nor rarely||Non-accent control.|
|Hint link||Often||Non-accent control for additional information.|