Your website doesn’t need expensive graphics to drive results, but it does need conversion-centric design. There are a few must-know psychological triggers that make users take action.
Mohita Nagpal from Visual Website Optimizer (my go-to A/B testing tool) was nice enough to break down some examples of visual cues done right. These design elements are proven to convert, so make sure you use them whenever you can…
As a start-up, you can’t afford to burn cash. Every little expense you incur has to be bang for the buck. Getting a website designed or designing one yourself is a big investment and you want to make sure it is aligned with your business goal – increasing sign-ups or sales or whatever you plan to do to make money.
It’s always good to have a website that’s nice on the eye but that by itself is not enough. A beautiful design doesn’t sell by itself. The website has to subtly handhold the visitors towards your business goal. And for that, it has to have a conversion-centric design. Here’s a list of proven techniques you should keep in mind to create a website that converts:
1 – Use Directional Cues
These could be in the form of little pointers, arrows or just the simple gaze of a person. As the name suggests, these are cues directing the attention of the visitors towards the goal on that page – an empty form waiting to be filled or a call to action (CTA) button saying ‘Buy Now’.
See how Wordstream uses the arrow here:
Sometimes, directional cues also work at a subtle level. You might not notice them as a separate entity on a page but they work at the subconscious level to effectively point the visitors towards completing the goal of the page.
A research has found that we automatically gaze in the direction where the person in a picture is looking. We look where they look.
Following is the heatmap report of 106 people who looked at the two pictures individually. The redder the spot, more people looked at that spot.
In the first image, maximum people just looked at the baby as its gaze was in the front. In the second image, more people looked at the text where the baby is looking.
2 – People Read in patterns
Research has shown that visitors consume information in specific patterns on a website. According to an eye-tracking study users read in F-shaped pattern. This essentially means they pay most attention to the information provided in the first two horizontal rows, followed by a vertical column on the page. Take a look at these screenshots below.
As you can see, visitors’ engagement with the right-hand side content goes down as they go down the page.
So you have to essentially make sure that you give out your most important information in these two high-impact places. Read this to find out how Bakker-Hillegom, an online gardening shop, increased its engagement by placing its best deals in the top banner to catch maximum attention.
3 – Keep Visual Hierarchy in Mind
Each element has different level of importance on a page. For example, on an e-book download page, you will have a headline asking visitors to download, some bullet points describing the book, a few testimonials, a picture, a lead generation form and a call to action (CTA) button that probably says ‘Download’.
Now, the ‘Download’ button and the lead generation form are the most important elements on the page as that is what will trigger your conversion goal. You will have to make sure the other elements are not overshadowing the form and the CTA through a stronger use of color, font or image.
WokZone, a project management tool, had the same problem on their demo request page – the colorful customer testimonials were overshadowing the web form. They made the testimonials black and white and this increased their demo requests by 33%. Read the full case study here.
4 – Place Crucial Elements Above the Fold
The above-the-fold theory largely states that visitors are too lazy to scroll down the page, so you should put your most important information above the fold. Or better, have shorter pages. However, here have been enough voices debunking this theory off late.
I would recommend that you take a middle ground here. Make it a point to give your most important message above the fold, but don’t cram up the space so much that it starts looking cluttered.
EcoFoil, which supplies radiant barrier and foil bubble insulation, had its ‘Help Section’ below the fold. They put the section above the fold and this increased their sales by 86%.
5 – Don’t Forget to Breathe
A conversion-centric design just doesn’t mean putting the right elements at the right place, it’s equally about knowing how to use the whitespace effectively. Whitespace is like breathing space, the little pauses and periods that help make sense of complex sentences.
Use too little of it and your page starts looking like a disintegrated piece of furniture. Use too much of it and the page looks visually cluttered. You can smartly use whitespace to make an element stand out – especially CTAs.
Another point to note is that whitespace doesn’t have to be necessarily white. It could be any backdrop or image.
Here, the whole background works as whitespace. This makes Tumblr’s sign up form pop out.
6 – Be Consistent
Whatever style, theme and background color you plan to adopt, use it consistently across all your web pages. All the pages should look like they come from the same book. And the rule applies to even the ‘404 – Page Not found’. It’s a dead-end for most visitors and a logo and a personalized message should reassure the lost souls that they are in familiar territory.
If you want to optimize the 404 page, place your navigation menu so that they can go to some another page of your website.
See how CreativeCommons optimizes its 404 page by placing a navigation menu and search bar.
7 – Make Use of Images
Images and videos do far more than just adding vibrancy to the otherwise bland pages. There are numerous case studies about how larger images work better than smaller ones, how adding images to tweets increase lead generation or how replacing drop down menus with product image and description increases revenue.
There’s even a report from an eye-tracking study that suggests that Google search results which show video thumbnails do better than results which have no thumbnails – even if the one without the thumbnail had better rank.
Want more convincing? Take a look at this screenshot of CrazyEgg’s explainer video.
The video makes CrazyEgg richer by $21,000 per month!
8 – Place Navigation Menu on Familiar Path
One of the foremost reasons cited for high bounce rate of a website is poor navigation. The thing with navigation menus is simple. Place them at either of the two positions most visitors expect them to find — horizontally on top or vertically on left. These are standard places where most users look for the menu.
It’s no surprise that the F-shaped reading pattern (read point 2) lllllso places importance at these two places.
See how eCommerce store Kipling smartly keeps its navigation menu fixed at the top so that visitors can see it even when they scroll down the page.
9 – Use contrast theory
Contrast works at all levels. When you show ‘before’ and ‘after’ discount prices, it works. An eye-tracking study was conducted with two groups of people. One group was shown just the discounted price while the other was shown the full price as well as the discounted price. The study found that the group which was shown the full price along with the discounted price was more satisfied with its purchase.
Contrast also works in the context of colors. See how the green CTA pops out over the black background.
10 – Use Frames to Highlight
Frames can be used to enhance the importance of a particular element. Use them when you want the users to notice some element specifically. It could be a field to insert an email address or a call to action (CTA) button or a limited period offer.
See how it has been used creatively in the sign up form below.
11 – Pay attention to site search bar
According to Jacob Nielsen’s recommendation, a search box should be at least 27 characters wide. If you can’t afford to invest so much of your prime website real estate on such a big search box, then try having a dynamic one like allrecipes.com has. The bar automatically becomes bigger as you click inside the box.
Notice the size of the search bar here
As soon as you click inside the box, it becomes bigger.
12 – Styling matters
People don’t read through entire articles, they mostly skim through content online. If you are going to put large chunks of text out there, there’s very little chance it will get noticed. Break down your content into points for easy consumption. There’s very good chance of visitors getting a gist of what you are saying that ways. And when it comes to fonts, don’t go about experimenting with too many of the on a single page. Simplicity is the key.
Test what works for you
Though I have cited some general design principles and techniques that have worked for many in the past, it’s generally a good practice to test what works for your specific business scenario. Your target audience, goals, situation and website architecture would be entirely different from someone else’s. What works for one individual or organization doesn’t necessarily works for every one and hence the need to test. How to do that you ask?
Suppose you feel the stock photo on your sign-up page is not representative of your company’s image and you think more people will sign up if you take it off. Do you just go ahead and pull it off or do you take a logical decision based on data?
A/B testing allows you to take business decisions based on data instead of gut, intuition and instincts. A/B testing or split testing is essentially creating two versions of a website and then evaluating which one works better.
By using an A/B testing tool like Visual Website Optimizer (did I tell you I work there?), you can easily create two versions without coding and then split your website traffic on them to see which one converts more.
If you have any questions, I will be happy to answer them in the comments below.