How to guide your online visitor using visual hierarchy

Have you ever considered why some websites feel more comfortable and easy to browse than others? In this post, you’ll get a brief overview of how the visual hierarchy affects the user experience, and how you can use it to guide your visitor step by step through your site.

What is it? 

Visual hierarchy is the order the human eye perceives information. Something that’s big and has high contrast will, for example, be recognised before something that’s small and with low contrast. Most of it is just common sense but often forgotten as an important aspect of creating a functional design. 

How it affects your online presence 

By creating a visual organisation, you can affect where the visitor’s eye go, and in what order they explore the information on your site. If you do it correctly, you will be able to grab their attention and guide them to relevant content before they lose their interest. 

Here’s a list of a few things to consider when working on the design and content for your website to be able to create a visual order. 

Colours & contrast

1. Bright colours stand out more than muted, and something colourful in an otherwise black and white design will draw the users attention. 
2. Don’t overuse colours if you want to highlight something. Adding the same colour to many elements won’t make anything stand out. 
3. Try to colour code different elements to connect parts of the site and make it feel familiar to the user.
4. Consider which colour to use for what element. Colours themselves have a hierarchy, for example, red stands out more than yellow.

Space

1. Make sure to add enough space around the elements you want to highlight, in a clutter of images the visual impact will be too much and no message will come across.
2. Consider that elements that are placed close together will be perceived as belonging together.  
3.  Align all elements in a grid to create a visual order and enhance the visual hierarchy on the site. 

Size

1. Size is especially important when it comes to typography. People read big things first. If you want the user to be able to scan the text, make sure to use subheadings and find a clear logic for when what font size is used. 
2. Use size to create a clear structure. If everything is big, nothing is big. 
3. Elements that are bigger are easier to engage with, consider increasing the size of calls-to-action and links to make all interactions as smooth and easy as possible for the user.