This post was updated on 5th September 2016 with latest research and case studies. Give it a read for a fresh insight into how visitors’ eye paths lead them to the conversion goal.
How you arrange information on a page determines where people look. Position page elements in the easiest sequence possible so that it intuitively leads visitors to the conversion goal.
Understanding influential visual cues and basic online scan behavior will allow you to come up with a persuasive design that guides visitors’ eye flow for maximum conversions.
1. ‘Fold’ Isn’t As Important As You Think
With that being said, it is still important to remember that ‘above-the-fold’ space is the prime real estate of your website. And you must use it wisely by dedicating it to your most crucial elements and offers.
Don’t try to cram the space though. In a test run by Marketing Experiments, they crammed important sales information above-the-fold. While most marketers in the audience believed that this page will outperform the original, the page actually proved to be a dismal failure with a huge negative lift.
While the best practice suggests that your call-to-action should always be above the fold, several case studies have proven otherwise. The call-to-action should be positioned when visitors have all the information they need to take action and no sooner. Fold matters but not as much as you think.
The more complicated or expensive the product/offer, the lengthier your page needs to be so that you could address all your customers’ anxieties and concerns.
2. Media Attracts Instantly
An image or a video on a page will immediately catch your visitors’ fancy. See Google search results below from Moz’s eye tracking study:
Results with videos thumbnails are clearly getting more attention than textual results. Similar results were seen with images as well. This is great if videos or images are an important part of your prospects’ decision-making process.
One of our eCommerce customer saw a 9% increase in sales when they tested larger product images on his website that sells electronic gadgets and home appliances. On the other hand, if images are not an important part of your target audience’s decision-making process — say in the case of a machine tools supplier website — increasing image size might not have a positive impact on conversions.
Similarly, Crazy Egg’s monthly revenue increased by $21,000 after they added a product video.
Realize that since images and videos immediately attract people’s eye balls, you must use relevant media. Don’t use them as fillers to break the monotony of the text. They must act as supporting content for the conversion goal. This is why when Exact Target replaced their landing page image to align with their conversion goal, it gave them a conversion boost of 40.18%.
3. Apply the Contrast Principle
Before-after examples allow easy comparison and force people to pay attention. In this video by the behavioral psychologist Dan Ariely, he shows how the “useless” pre-sale price is used by people to evaluate their purchase decision.
Robert Stevens of ThinkEyeTracking.com conducted an experiment to confirm this behavior in real life. The first group of people were shown only the promotional items. The second group of people were shown promotional items stacked with full-price items.
His eye-tracking study showed that these believed-to-be useless ‘pre-sale’ prices are not that useless after all. Consumers from the second group took note of the full-price of items during the purchase and were more satisfied for getting a good value for money rather than the other group which was shown promotional items only.
Encircled image shows consumers engaging with the full price of items that are stacked with promotional items
4. Adapt to F-shaped Reading Pattern
F-shaped reading pattern means that as we move down the page, the lesser attention we pay to the right-side of the page (as shown in the image below).
Left side of the page is clearly more important than the right, insists another study. Of course, this makes one thing clear — that you should keep important content on the left-side of the page.
Underwater Audio, one of our eCommerce customers, used this information to their advantage. An important testimonial was switched from the right to the left side of the page, so that it is noticed before the call-to-action. As hypothized, the testimonial influenced prospects’ thought sequence. This increased sales for the company by 35.6%.
Similarly, Baby Age website challenged the common eCommerce design convention of keeping call-to-action (CTA) buttons on the right. When they switched the CTA to the left, they got a 16% sales boost.
F-shaped pattern also suggests that a website’s header gets a lot of attention. You should put information, such as free shipping, contact number, search bar, money back guarantee, et al. This might have a huge impact on website conversion rate. It’s no surprise that most websites have either top or left navigation menus.
5. Guide Them with Directional Cues
Human eyes tend to follow the direction it is pointed to. Because call-to-action is your most important page element, point visitors to its direction. Notice how the arrow brings attention to the search bar immediately, making the purpose of the page very clear for prospects:
But using an arrow is not the only way you can guide people in a certain direction. With images, it gets more subtle than that. See this walking path below as an example:
Didn’t you naturally look where the path is leading in a quick first glance? That’s because the defined path is guiding the way where your eyes should be looking.
Similarly, eye tracking studies have shown that it matters where subjects in images are looking. Subconsciously, people tend to follow the gaze of subjects and look in the same direction. This is illustrated in the image below taken from an eyetracking study:
Make your subject look or point in the direction of your call-to-action and test it to see how it impacts your conversion.
ConversionXL conducted a research on which visual cues drive most attention. They created variations of a leadgen page featuring different visual cues. The variations had one of the cues each from the following:
- Human looking away from the form
- Human looking toward the form
- Triangular graphic
- Prominent form
The following graph shows results of how different cues impacted the average time of users looking at the form. Clearly, the variation showing arrow pointing towards the form won.
6. Don’t Make Them Dwell on the “Dead Weight”
An important Fitt’s law principle states that an element’s “weight” in the visual hierarchy determines the attention it attracts. Your call-to-action should ideally have the highest weight on the page. But if a less important, non-clickable element carries the weight that diverts visitors from the call-to-action, you must take measures to fix visual hierarchy. A great example here is TechWyse’s case study. See their original page below followed by its heatmap:
Heatmap of the above landing page:
The “No Fee” badge is attracting maximum attention on the page. But the problem is that it is a non-clickable and hence stealing away the thunder from the main call-to-action. Removing the badge fixed the flaw in visual hierarchy of the page and got the call-to-action the attention it deserved:
Go back to your website and check that you’re not making this mistake.
7. Use Whitespace Wisely
Any space that is free from images or text is whitespace, no matter what color it might have. Appropriate use of whitespace increases legibility and allows easy eye flow on the page. As a result, important page elements get the necessary emphasis for better conversions. Placing call-to-action and headline on whitespace helps to make them stand out on the page.
When you use a larger-than-life images as the backdrop, it serves as perfect whitespace to reel people in. Square Space pulls this off nicely:
Whitespace is extremely important to improve readability as well.
Use of whitespace comes with a disclaimer though. Too much whitespace can also give a sense of disconnect between the elements. This is why when one of our customers displayed their product price closer to the ‘Add to cart’ button, it increased sales.
8. Tune Your Typography
How you style or present your text is what makes people decide if they want to explore your site. Crammed text like the one shown in the above image will obviously dissuade people from reading it. But only taking care of text spacing isn’t enough either. Headings and subheadings must stand out to adapt to online scan behavior. Give them relevant h1, h2 tags. Use short paragraphs and sentences.
See how you can easily spot headline and subheads in the squint test below in the left image:
Bullet points in the text also come handy in giving a quick overview to readers about the important points.
Sometimes knowing what to emphasize can make a big difference. When Royal Discounts increased the font size of sale price on their product page, their conversions improved by 36.54%.
To know more about how typography affects conversions, you can read this article.
9. Encapsulate What’s Important
Frames draw eyes to what’s inside them. Call-to-action buttons, lead-generation forms, or even some important points listed in a box can all work really well for your conversions. Ozscopes rests buyer anxiety by addressing their main concerns in a neatly-designed box that cannot be missed on their product pages:
You should give this a shot.
All the above points are necessary to understand how you should guide visitors’ eyes on a webpage for better conversions. But the foundation of a good visual hierarchy is based on prioritizing your website goals (that are aligned with your business goals). That’s where you need to start.
Exercise For You
It’s time to analyze your webpages now. Do this:
- List key points that your visitors might need to complete the conversion
- Arrange them in the order of priority for your average visitor
- See your page design
- Arrange them according to their visual importance in the current design
- Now evaluate: Does the current visual importance of elements match the visitors’ importance for them?
For many elements, the answer would be ‘no.’ Get to work and fix the eye flow of your page. Don’t forget to run a split test before hard-coding the changes on the site.