Briefing

Category

UX

Date posted

08 Jul 2024

Read Time

Related Articles

UX

Personalisation in a cookieless world

UX

Are your digital touchpoints driven by inclusivity?

UX

Are you making your key user journeys easy to navigate?

To guide users efficiently towards their goals, using good visual hierarchy on your website is essential. 

The term “visual hierarchy” refers to the way in which elements, such as text, buttons and images, relate to one another on the page. We can use elements like size, colour, and grouping to help our brains naturally rank-order the importance of information.

Having a consistent visual hierarchy on your website makes it easier for users to navigate. It can tell them what is and isn’t important without having to waste time or effort reading unnecessary content.

Understanding online user behaviour

Users do not read on the web, they scan. 

We can help users to scan-read by telling them what order to read information in, and how important each piece of information is.

By making interactive elements, like calls to action, stand out through size, colour, or placement, designers can subtly nudge users towards them. A clear and prominent “Buy Now” button will be far more effective than one buried amongst text.

When applied consistently across a software, visual hierarchy makes interaction and navigation effortless. Users can predictably and easily find conversion opportunities and important information which ultimately leads to increased conversion.

Design elements that create good visual hierarchy

There are several design elements that create good visual hierarchy:

  • Size, colour, contrast and position can be used to indicate priority and importance.
  • Clear, informative headings help users understand what they’ll find in the next segment or page.
  • The introduction of three tiers of type (headline, subheading, and paragraph text) will aid scan-reading.
  • Implement design layouts that leverage established reading behaviours, like the F-shaped and Z-shaped patterns.

Need help using visual hierarchy to optimise your user journeys? Speak to our UX team.