When people visit our sites, they are often times looking for something: a service, a class, or general information.
It is our goal to get them the information they need in order for us to better help them. So when someone lands on our site, it’s important that we get the most useful information to them first.
So how do we encourage them the order in which to read our site? How do we guide visitors to the most important information without telling them “READ THIS FIRST”? By playing around with different characteristics of the website elements to make them POP into view, or in other words, by creating a visual hierarchy.
What is Visual Hierarchy?
You’ve probably seen this image or something similar floating around, have a look:
Most people will likely read the above image in the exact order that it predicts. Why? Because it uses visual hierarchy techniques to draw our eyes towards particular elements in a particular order. The above image uses font size, colour, and placement to achieve this visual hierarchy.
When it comes to websites, visual hierarchy is a way of styling, formatting, and placing elements (Elements refer to each individual piece of a website: text, images, buttons, sections etc) in a way that makes them stand out and influence the order in which visitors perceive them.
Generally, we want users to read the most important information first, and then we want to guide them through information of decreasing importance. If we tweak the characteristics of our website elements correctly, we can help guide the order in which those elements are viewed.
Some common element properties that affect visual hierarchy are:
Size/Scale: The size of each element
Grouping: When related elements are grouped together
Colour & Contrast: The colour of each element and how it contrasts with the colours around it
Element placement: Where the elements lay on the page
Position/Spacing in relation to other elements: Where the elements are placed in relation to each other
There are many more properties that affect visual hierarchy, but we will only touch on the above ones today.
Common Properties that Affect Visual Hierarchy
Here is a deeper look at the element characteristics that will affect the order in which we read a website. We are going to use the Adobe website to show some examples.
Size and Scale
This refers to the size of your elements. What do you think people will read first? The 54px heading, the 32px subheading, or the 18px paragraph? They will likely read the heading first. Why? Because it is bigger! Scale up an element if you want people to notice it. Font weight will also affect it’s size and impact, so a big heading with a bold font weight will get more attention than a big heading with a thin font weight. Just be careful about how much text you put in. Generally, it’s better to leave large bodies of text for smaller fonts.
Grouping
Sometimes you will see elements grouped together. Grouping items is a great way to let users know that the items are related and encourages the users to read that entire group together first before moving onto the next group of items.
In the below image from the Adobe website we can see three cards, each card groups a bunch of elements together: header image, logo, heading, device icon, paragraph, line separator, and CTA button.
Adobe grouped these elements together because they wanted their visitors to understand that the grouped elements were related, which encourages the visitors to read the entire group first before moving to the next.
Colour & Contrast
I could write an entire blog post on colour and it’s effects on visual hierarchy! But for now, let’s just focus on the basics. Ever notice how your eyes are drawn to certain buttons on a website? Those buttons likely had a bright or contrasting colour in relation to the rest of the site. If you use bright colours or contrasting colours for specific important elements, then our eyes will be attracted to those elements. Note: this only works if you use this sparingly! Too many red buttons will just be visual chaos.
Let’s look at the image below, Adobe has kept most of its elements a standard black, white, and grey. But notice there are a couple of colours that pop out: namely the blue Call-to-Action ( CTA ) buttons at the bottom, that gold border and “Save 60%” flag. These brightly coloured elements are what Adobe wants their customers to take note of.
If the second group of elements didn’t have a gold border and flag, we would probably naturally look at the 1st group, but with the border, we may be more curious about the second group.
See how there are only a couple of brightly coloured elements? It’s not crowded at all, this allows us to see those elements and not get overwhelmed by everything else. Yes there are a couple of other blue elements (the link and the radio buttons) but these are small, and as we learned before, a smaller size will draw less attention.
And lastly, notice that the “free trial” buttons are not bright? Adobe has determined they are not as important as the “Buy now” buttons, so they pop less. If all buttons were blue, it would be too crowded. So Adobe had to choose which button they thought would help their customers out more and make those brighter.
Element Placement
Generally we read a website in a pattern: First we read from left to right in a horizontal line, then we scan diagonally down back to the left side, and then again from left to right in a horizontal line. To simplify: we scan through a website in a “Z” shape, this is called the Z-pattern or Z-layout.
If we place elements on our website in this pattern, people will likely read them in that order. You may notice that in the above-the-fold section of most sites, the text is to the left, this is because the people who designed that site decided that that’s the information they wanted you to read first.
Please note, this Z-pattern mainly applies to cultures that read from left to right.
In the image below, notice how all text elements are placed within that z-pattern. Instead of throwing all the text to the left, we instead see the first text grouping on the top left, the second on the top right, and then the third along with the CTA button on the bottom left. This creates a simple Z shape that’s easy to traverse through.
Position/Spacing in Relation to Other Elements
Here I want to specifically talk about white space. When there is a lot of white space around an element (or group of elements) it draws our eyes into those particular elements.
Look at all of that white space in the image of the Adobe XD page below. Here in the middle of the white space we have a simple message and a couple of CTA buttons, not much content at all. Which makes it easy to read and take action.
Why is it Important to Establish a Visual Hierarchy?
When someone visits your site, it’s usually because they are interested in something you are offering. A good visual hierarchy will guide the visitor to exactly where they need to be and reduce the time and effort it takes for them to get there, this will give them a good user experience, an overall great impression of your site, and most importantly: they get the help they need.
If you ever land on a site, and immediately get overwhelmed and have trouble figuring out what to read first, chances are the site did not have a good visual hierarchy and there’s a good chance you left the site and did not find what you needed!
Conclusion
A visually pleasing site is wonderful, but with a little planning and strategy you can take that pretty site a step further and create a visual flow that looks good AND that helps guide visitors to find what they need and take action.
When we play around with the size, colour, placement, grouping, and spacing of our elements we can make the most important elements stand out and look good. Just remember, moderation is key. Use a mixture of these techniques, but don’t overdo it!
Did you know we teach courses in website and app prototyping with Adobe XD? Check out the course here, and sign up to learn more web design tips and tricks.
Or get in touch to learn more about our services
