The Importance of a Visual Hierarchy on a Page

The Ultimate Conversion Webpage Review Webinar reviews a number of websites to establish where many site owners go wrong in their conversion optimization efforts. The next page reviewed was Homeserve, a British site that sells home coverage for products. For example, if you have a boiler system that needs repair, and you’re looking for coverage, then they are the people you are looking for.

In this webinar, Convert teamed up with Creative Thirst‘s Bobby Hewitt to review a number of things many websites do wrong which ends up hurting their conversion rates. Conversion can be very important for a website, and if not done correctly, it can hinder the progress of your business. For the complete webinar series, you can watch its entirety here.

Competing for Attention

One thing that stands out from the page is the explosion of color and many visual elements competing for attention: Stay in touch on Facebook, Google+, Twitter; there are rated plans; there is a plumbing service; a giant red image – it’s difficult to discern where one should really start looking. There are multiple green buttons as well and each one is competing for attention too, not to mention the lack of a visual hierarchy in the buttons. According to an article by Sandra Niehaus,

Establishing a clear visual hierarchy is key to creating a well-optimized web page. Because of the way our visual systems are wired. We tend to quickly scan and analyze many bits of visual information such as edges, contrast, sizes, and motion in order to assess and understand our surroundings. This is true whether we’re looking at a field or a web page.

In her article, she also discussed the 9 characteristics that have a strong influence on visual hierarchy. Visual hierarchy dictates what each user should see first and which images or copy should be prioritized. The 9 characteristics are:

• Motion
• Location
• Size
• Shape
• Padding
• Contrast
• Hue
• Saturation
• Face

So, on a page like Homeserve, which is more important than the rest for someone to click on? When you check the ratings, for instance, you could decide to go with the five-star rating which ought to be important, not just because of the high rating, but also because it seems to be one of the main elements. A successful webpage should have relevant elements placed next to each other. This helps create a flow on the page and leads the visitors to a call to action.

[Tweet “Avoid adding visual distractions that can make visitors lose interest and avoid taking the desired action”]

Another thing that you notice on the page is that you are eligible. So, looking around to know what is and what is not covered, that eligibility suddenly goes away. As such, this page could be accused of having some usability problem. It is important to know what your users see first on your website and then determine if that is really what you want to present first on your page.

Clear Differentiation would be Wise

When you get to the website page: My Home Manager Insurance, assuming you are a home owner, you are prompted on where to start and immediately, it lets you compare the different rates. Again, assuming you are selling based on price, what’s the difference between the top and bottom rates? It doesn’t tell. Same case goes for the Gas Boiler section: it immediately notifies you about the different rates, but no difference between them is shown. These are some of the areas that need to be tested on this particular page.

Towards the top of the page, you also encounter a step-by-step conversation about why the 5-star rating was important, as well as what you are going to get and how you are eligible, and this is really kind of beating around the bush with no real purpose. There’s also the button that says ‘Start here’ and assuming you go ahead and click, you are forced to compare on the prices. This is made even worse by even more explosion of color. And again there is no differentiation as to which offer is the right one for you – the best offer if we may.

You know what that does? It makes visitors really start to think and having an e-commerce website – whether B2B or B2C – this is the last thing you want prospects to do. As soon as you set the conditions for making people start ‘thinking’, they’ll be fleeing in droves. It is important to keep them in line with your call to action and lead the, where you want them to go; hopefully to your subscription page. If you want to find out more about this, or if you want to view the fill webinar, you can view the full presentation here.