As human beings, we are visual creatures. A study conducted to see if visuals affect the persuasiveness of presentations found that presentations using visual aids are 43% more persuasive than presentations without visuals.
So visuals matter. They influence consumers and the decision making process. And what’s even more interesting – it all happens at an unconscious level.
As marketers it’s important to learn how to use visuals on our websites in a smart and persuasive way in order to guide users through the conversion funnel and have them complete the desired actions. This is when visual hierarchy comes into play.
What is visual hierarchy?
In web design, visual hierarchy refers to the way in which elements are arranged on a page as to influence the order in which users perceive them. To put it briefly, it highlights the order and importance of content and its main purpose is to help users understand the information easily.
It’s a fundamental part of UX and it can dramatically influence user behaviour and conversion rates depending on how well it’s executed.
Visual hierarchy is about creating a logical user flow and in a way it’s exactly like telling a story. Therefore, all visual components should be working together to help visitors understand the narrative.
6 key-components of visual hierarchy
To create a clear visual hierarchy that draws attention and engages the audience you need to learn how to apply several principles of web design.
In case you were still doubting, size does matter. As human beings we are wired to think that bigger things are more important than small things and this principle also applies to web design. In fact, playing around with size it’s critical to building a logical and persuasive visual hierarchy.
Visitors’ attention automatically goes to the big pictures and large words. Our job is to determine what content elements are the most important and translate this knowledge into visual design.
In the example below we notice that the headline and the background video are the biggest elements in the ATF area because together they convey the value proposition – the core component of every business. By reading the headline we immediately understand that this store offers a personalized grooming experience for each customer by sending them the right products. The video completes the message by helping us understand more about the target audience.
Colour is an effective tool for visual hierarchy creation. Bold colours help draw attention to certain elements on the page, while soft, pale colours work better in the background. Proper use of colours also helps create contrast, another key-component of visual hierarchy.
A common example here is represented by the way we, as CRO specialists design CTA buttons. We always choose bold colours to make the buttons stand out. The colour of a CTA button should always differ from the main colour palette used in the rest of the web design.
On a white background with black text and green highlights, Hotjar chooses to feature magenta CTA buttons. This is a great example of using colour to highlight the importance of certain content elements compared to others on the same page.
Contrast is the core of visual hierarchy. Only when one element contrasts with the other, people will be able to see the differences between them and to assign a level of importance to each content element.
You can create contrast by producing differences in size, colour and style. However, bear in mind that you should always keep a balance to avoid one component completely obscuring the others.
4. Negative space
While it may not be perceived as a core element in web design, negative space, also known as white space is actually very efficient.
Negative space plays a crucial role in building visual hierarchies because it helps us make certain elements more noticeable than others. It improves focus and cuts through the clutter.
In other words, the more white space we use around an element, the more important that element becomes in the hierarchy of the page.
This technique is often used on luxury goods. Apple does it all the time.
Proximity is one of the most important principles of web design and it plays a crucial role in visual hierarchies. It helps with creating categories and subcategories.
By placing certain elements in proximity, they will be perceived as a group. This is highly helpful in building sections on the page in a logical order and creating a visual narrative.
A good example is a list, for instance the sidebar on a blog listings page. Items that have something in common are separated and they form a group. In the image below recent posts and article categories are perceived as separate visual units and each unit contains similar objects.
They say that repetition is the mother of all learning. It’s no different in web design. The more users are exposed to certain elements, the easier it will be for them to absorb and remember the information they were previously exposed to with high frequency.
Creating a clear visual hierarchy and a seamless user journey is about finding a rhythm. And this can be accomplished by using repetition. Repetition can be achieved by using the same colours, shapes and dimensions for certain content elements.
For example, we expect the logo to be repeated on every page of a website and in the same place. The same applies to menu items. Being consistent helps users navigate the website easily and conveys a feeling of familiarity.
We can also repeat messages. For instance, most CRO experts recommend repeating the value proposition on every important step of the conversion funnel as a way of reinforcing trust and encouraging users to take action.
For Unbounce, the value proposition is building landing pages without coding. As you can see, they expose visitors to this information as often as possible.
By designing a powerful visual hierarchy you will improve navigation and user flow. A structured page and a narrative that makes sense helps users understand the product and its benefits, which makes them more likely to convert.
On the other hand, a poorly executed visual hierarchy can lead to confusion on users’ part. Because they may not fully understand your product or how it can help improve their lives, they will not convert. If this is your case, drop us a line at firstname.lastname@example.org – we’re always ready to help out! 🙂