Blog.

Hierarchy Of Conversion Importance banner

Quick Navigation.

Resources Center. Go!

Guides, research, and more

Stay in the loop.

The best source of information for customer service, sales tips, guides, and industry best practices. Join us.

Quick Navigation.

Learn how to improve the conversion rate of your landing page, by establishing a hierarchy of importance that appeals to your ideal prospect, and draws their attention exactly where it needs to be.

By Sebastian Alberti, Digital Marketer
Published January 5, 2022 | Read Time: 3 min

Ever click through to a website, take one glance and say, “hmm that’s way too confusing”, whilst you look for the exit button?

Bad hierarchy or no hierarchy, can keep visitors from engaging with your brand.

That’s why it’s important to understand the key principles that will help you draw your audience in, retain their attention, and generate conversions.

Here’s a quick and simple guide on how to level up your landing pages using the fundamentals of hierarchy of importance.

Wix website creation

Hierarchy of importance is the way you can arrange the content and elements on your landing page, to show order of importance through Visual Hierarchy and Information Hierarchy

By relying on principles relating to order, size, placement, contrast, spacing and more, you can influence how visitors interact with information on the page.

The truth is, nobody has time to read all of the information on your page.

When there is too much information to process, our brains can’t physically take it all in at once, so we look for cues.

These cues help us pinpoint what we really need to pay attention to, in order to make sense of the information in front of us.

If there are no cues, the brain finds it difficult to navigate the information and unpack the key message of the page.

Often this confusion will lead to a visitor becoming frustrated, and exiting your site.

The cues that our brain needs to navigate information filled pages are established through a clear hierarchy structure.

If a clear hierarchy structure is established and cues are easy to follow, the visitor will know which path of least resistance to choose in order to reach their goal.

Whatever that goal of your page is, your hierarchy structure should help guide them there.

So, the question is, are you using hierarchy to your advantage, or are you running with a landing page that was created by guesswork?

Every landing page is built with a core group of elements.

rounded rectangle

A unique selling proposition

rounded rectangle

A hero section

rounded rectangle

The benefits you’re offering

rounded rectangle

Some form of social proof

rounded rectangle

A single conversion goal

Each element is designed to be used in combination with one another to effectively persuade the prospect to take the desired action on the page.

So what is the best way to structure/order them for maximum conversion output?

Unfortunately there is no set formula to this, but there is a philosophy that can be applied.

With Google reporting that 80% to 90% of visitors decide to bounce from a landing page within the first three seconds of being there, it’s extremely important to serve your most important content first.

It turns out that most landing pages that convert well do so because they have a hierarchy embedded deep within their anatomy.

So how do you structure your page effectively?

It’s simple. Think of your page as a triangle.

triangle of importance

At the top of the triangle (your page), you will need to place your most important element/ information.

Remember you’ve only got three seconds to impress a visitor, and this will be the first thing they see, so make sure it packs a punch.

Within the middle section of the triangle (the body of your page), place your moderately important information.

The key here is to visualise the elements that would best support what you’ve placed at the top.

Then finally, within the last section of the triangle (bottom half of your page), place your least important elements, making sure they align with what you’ve placed above.

You may not get this right the first go, but you’ll then be able to find unique and clever ways to change the order, based on the feedback you gather from both your data & your customers.

visual hierarchy

Every landing page you build should have a visual hierarchy that draws the attention of a visitor to the most important information first.

When a clear visual hierarchy is established, the pathway to the intended goal becomes clear and easy to follow, even if the page is packed with information.

Before we go ahead and reveal some of our tips to achieving a strong visual hierarchy, let’s take a look at a few examples of bad visual hierarchy on landing pages.

Example 1

sample website

Example 2

sample website

Now that you’ve seen what poor visual hierarchy looks like, here are some of our tried and true tips for establishing a strong visual hierarchy on your page.

Tip number one image

Using F and Z patterns to maximise the readability of your information

The positions in which you place the elements on your page will determine whether or not your audience will pay attention to them and for how long.

Through various tests, customer behaviour scientists have proven that there are two ways our brains typically scan for information in the shape of the letter F or the letter Z.

The F Pattern – is where a user will scan sites from top left to top right, then back to left, and make their way down and across the page.

pattern

The Z Pattern – is where the user will follow the path from top-left to top right, then down to the bottom left, and then pan across to the bottom right hand of the screen.

Z Pattern

When building your landing pages, you’ll want to be sure that the most important info you have is positioned within those two patterns. This will ensure that the majority of people who visit your page, will scan over it, take it in, process it, and keep reading.

Here are some great questions you can ask yourself when placing the different elements on your page

Q1 image

Is my page content heavy? If it is, maybe I should consider an F pattern

Q2 image

Which way do I typically read the content? Is it optimal?

Q3 image

What is my focal point? Is that in line with the typical viewing pattern?

Tip number two image

Using SIZE to your advantage

When looking at a landing page, our eyes are naturally drawn to the elements that are larger first (images & text).

Take a look at this hero banner. What’s the first thing you noticed?

The lion in the funnel was the first thing that grabbed your attention. Right?

Even though there is other information presented in the hero banner, your eye is drawn to the image first.

After that, your eye will automatically gaze across to the headline (second largest element), and then down to the subheadline, call to actions and so on.

This means you can use the size of images, landing page copy & other elements to draw the attention of what needs to be processed first.

Sample website image
Tip number three image

Draw attention to important elements with colour & contrasting

Colour is another way in which you establish hierarchy on your landing page.

That doesn’t mean your design should include as many colours as possible. Instead, what types of colour combinations work together to draw attention to important elements on the page.

Remember, we are conditioned to be drawn to brighter colours, so use that to your advantage to bring your CTA buttons and images to life.

Take a look at how Shopify colour on their homepage.

Shopify sample site

Thanks to their off white background, the headline, CTA buttons, and images, stand out over other elements on the page.

This level of colour contrast instantly pushes these elements to a higher level of importance, compared to the body copy which is simply in black.

When creating your landing page, look for opportunities to capitalize on grabbing the attention of your prospect through the use of colour & contrasting.

Here are some great pointers

Q1 image

Change the colour of key elements on your page

Q2 image

Highlight important phrases or key bits of content

Q3 image

Be conservative, a splash of colour is all you need to draw attention

Q4 image

Bring elements to life by having a contrasting background

Tip number four image

White spacing creates emphasis

Ever heard of the term less is more?

This concept comes into play when you’re trying to emphasise a certain focal point on your page.

If you fill the space around the element, then the emphasis is taken away.

This is why adding white space is key to pulling visitors into key bits of information, staple images and other important elements.

Check out Apple for example.

Their focal point is their products. So rather than crowding the space around the product, they leave it blank. This automatically draws your eye to view the product being advertised.

sample website

After reading this, you may be tempted to try everything at once. Don’t!

Before making any changes, be sure to have a clear plan in place. You’ll want to track what changes have been made, when they were made, and what was the outcome.

Rolling these changes out slowly, and one at a time, will ensure that you don’t end up with a mess that has no hierarchy at all.

To test changes effectively we recommend using A/B split tests.

A/B split tests are great for comparing the impact of two changes, to see which change was more effective in bringing in better results.

Remember, establishing an effective hierarchy on your landing page is all about ranking your elements in order of importance.

Once you narrow down what you want to focus on, and match it to your audience’s needs, that’s when you’ll have a page that is generating amazing conversion results.

Here are some tools you can use to help you along the way

Enjoy this guide?

Related Articles

Hierarchy Of Conversion Importance banner
Conversions

Hierarchy Of Conversion Importance

Learn how to improve the conversion rate of your landing page, by establishing a hierarchy of importance that appeals to your ideal prospect, and draws their attention exactly where it needs to be.

Get great E-Commerce insights delivered to your inbox every week

CX

JOIN OUR LIST

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

By downloading, you agree to converxion’s Privacy Policy and Terms of Use

CX

Ready to Download?

By downloading, you agree to converxion’s Privacy Policy and Terms of Use

CX

Ready to Download?

By downloading, you agree to converxion’s Privacy Policy and Terms of Use