As designers, we are often placed in a situation where we must choose between the path of aesthetics or conversions. Making the definition between the two can be one of the more important things we do each day.
In one hand, we have the aesthetics of a website. While it is true that an unattractive website is unlikely to convert because the trust ratio is low, if the design is not initially set up to convert the audience, is it serving its purpose?
Then, on the flip side, we have a conversion based design. When using a conversion based design we can often find ourselves moving from our usually strict style guides to take advantage of the analytical data we have gleaned from the website’s performance.
The trick? Combining them to create the ultimate aesthetically pleasing conversion based design.
To get us started, here are 4 tricks you can use to up the anti when designing a website.
Your CTA is the most important element for conversion, don’t sacrifice the aim of your page for pure aesthetics – make the two work together. Limiting the use of your brightest color, reserving it for your CTA only, can be an excellent way of providing power to the areas you need most. If the CTA still doesn’t stand out consider placing it inside a box or creating a larger space around the button or text.
Following on from our previous point, don’t bother creating a CTA if you’re just going to stick it anywhere and not give it the breathing space it needs. If your audience has to play hide and seek to find your CTA they will become impatient and most likely bounce. This brings us to whitespace. You can think of whitespace as your canvas, the background of your site. You need enough space around your CTA so that it is easy to view but not so much that it feels disconnected from the relevant content.
Interaction is such a deep-seated part of human nature; we understand body language and hand signals without conscious effort. Why not apply the same principles to the web? For example, we know if someone is pointing at an object they want us to pay attention to the object. Arrows or lines can help to indicate areas in which we desire the viewer’s eye to go.
Another good example comes from a study conducted by Sunsilk. The direction of the model’s eyes towards the bottle of shampoo encourages our eyes to follow the same path.
Visual hierarchy is the path the viewer’s eye takes as it moves across the page. Rather than random wandering, we want to dictate where the viewer’s eye goes. The most common pattern for eye movement across a website is in the ‘F-Shape’ pattern. This pattern starts with the eye focused on the top left, moves across the site to the right, then jumps down to underneath the original position. This movement continues down the website, slowly tapering off as the progress continues.
At its core, the point of your website is to communicate the benefit of the product/service and encourage curiosity to fuel further education and hopefully, a conversion. These 4 points are great examples of small and easy changes to adopt in your design process that can give a huge boost to your conversion rate.