UX: Fundamentals of Hierarchy

Though aesthetic plays a huge part in design, one should never ever neglect the importance of visual hierarchy. No clue what visual hierarchy is? You’re in luck, I’ll be covering what visual hierarchy is and 6 ways you can use to ensure your design flows naturally.



Visual hierarchy is the order a user process information by importance. If hierarchy is being used wisely, the mind can automatically group and prioritize elements to give them a specific order, which facilitates the understanding of what you want to communicate. A common problem in interface design is the excessive use of elements or components scattered on the screen, which end up making everything screaming for attention. This not only causes overwhelm it also takes greater effort in navigation which might eventually lead users to quit the website or mobile app.

To create an enjoyable user experience, make sure you take this 6 fundamental rules into account.

Text is also a block of colour that comments attentions

Primary button usually will have sharper colour compared to secondary button. Whilst, secondary button usually in lighter colour or outline (ghost button). If both buttons have same colour, user will be confused and wonder if both of them are equally important which usually not the case.

Position plays a big role when comes to presenting pricing plans. Use position to highlight the pricing plan which you want user to subscribe. As user will have the mindset that the one being stressed on brings more values compared to the rest.

When all the groups are too close or too distant to each other. User will wonder if they are all belong to each other or the other way round. Making it difficult for user to navigate.

Repetition creates consistency throughout your design which instantly make your website, mobile app or system intuitive.

The more the better is not always right. Only show what is necessary and take away the rest.

wendyquah

Leave a Reply

Your email address will not be published. Required fields are marked *