If you’re looking to build a new website, or completely revamping an existing site, you’ll probably hear lots of talk of “conversion rates” – especially if you’re selling a product or service.
Conversion Rate Optimisation (CRO) is a crucial part for any website planning to generate money. In short, we are focussing on how a new visitor to your website progresses from simply ‘being a new visitor’ to becoming a ‘paying consumer / new registration’, and the journey they make to get to that point. What brought them to the site? What page did they first land on? What did they buy? What convinced them to purchase? It’s a fascinating subject that we could discuss for days on end, but today we’re only interested in one thing: Could your website’s design be losing you conversions?
How people use the internet has changed in recent years. With more to distract us and other things to keep people occupied, the average attention span of users online has dropped dramatically, from 12 seconds in 2000, to just 8 seconds by 2015. Therefore, there are some crucial questions you should ask yourself when analysing or designing a website:
“Is this design easy to navigate?”
“Does this layout make sense?”
“What will the audience make of this design and will they understand where to go?”
“Is there anything that might confuse clients, and if so, how do we solve that?”
This ever changing, ever growing field relies on a huge range of variables that can either boost or hinder your conversions. Today we’re going to simply touch on some of the key essential trends and tools that I’ve found useful over the years, which should hopefully help get you started with building a more successful website!
Page Design Trends over the Last 10 Years
When it comes to page design, a lot has changed over the past 10 years. I’m going to share some examples of the worst offenders from 2006, and then some good examples from 2016, which will give you some simple tips and pointers for your CRO.
Now, keep in mind that there has been a LOT of changes in technology and hardware since 2006 so a lot of limitations from 2006 no longer apply in 2016, however the rapid usage of mobile phones and tablets has greatly inspired Interface design in websites, as you will see below.
Brown University’s website has come a long way since 2006. If you visited their website 10 years ago, this was their homepage, the first thing you’d see. The use of sliding elements was an emerging trend in web design at this point, but Brown took it one step further and made their whole navigation out of sliding elements. So even if, by some miracle, you recognised that this was a navigation menu, you still have to wait for the image to change before navigating to the page you wanted.
It’s slow and clunky to use, not at all intuitive, and it hides the target pages and elements behind an image, which is itself hidden behind a navigation menu. Many people would leave before progressing any further.
While the website for Tampax was good for its time – it’s bright, colourful, and interesting to look at – it did have two major failings. One was the weird navigation menu down the side, making it a bit more difficult to read. Also, once the page loads, it lists some (I assume) frequently asked questions in an illegible format, with white text on top of a light blue background.
Why is this bad? The two light colours on top of one another makes it difficult to read, and if your user can’t read your site’s contents, they’re highly unlikely to stick around.
You need to always ensure your text is legible and of a high contrast. Don’t make your user work to read your content, so try turning the brightness or contrast up or down on your monitor. If you can’t read your text, then you need to fix it.
The worst offender, look how much content and buttons they’ve tried to cram into the space! Meeting a wall of text will make most users leave almost immediately. Padding and white space is your friend. The worst thing is, this site still looks like this in 2016!
Now this is a much nicer and enticing site to navigate, Unlike the previous example, we can instantly identify where the navigation is, where the links will lead us to, and it’s clearly spaced out and marked up, which is ideal for mobile usage.
Most users anticipate navigation menus to be within the top 15 – 20% of the page on load, so if your navigation menu is elsewhere, for whatever reason, make it apparent and easy to identify.
UX Designer Melanie Daveid’s website beautifully demonstrates how important a high contrast is between copy and background elements. She’s made the copy as legible as possible, and through adding padding she’s removed any and all difficulty in reading her content. The result is a highly inviting website.
One hugely important thing to keep in mind when designing your site is how you might best use the space given to you by modern screen sizes. According to w3schools, in 2006 57% of users around the world had 1024px x 768px resolution. In 2015, with cheaper monitors and more powerful graphics cards, nearly 82% of people globally have resolutions of 1366 x 768 or higher.
Instead of packing as much information as possible into that space, its far more beneficial to strip back content to the necessities, and utilise a large attractive image if possible. For example, as soon as you land on Beoplay’s website, you’re greeted by a beautifully produced image of the product, accompanied by some simple flavour text, a price, and a buy button. Everything is clear, functional, and attractive. And best of all, the user will have already read the content without realising it, encouraging more sales and a far better conversion rate.
Short and sweet, with clear calls to action, give your users nice and big attractive buttons to press.
As you can see from the examples, we’ve moved from very busy and colourful websites, to clean, spacious, high contrast designs. But why have we done this? It’s simple: To make our websites easier to navigate and easier to understand. And now that users have shorter attention spans, it’s vital that you communicate your information as quickly and effectively as possible.
How Can I Tell If My Design Is Working or Not?
Google Analytics is a powerful tool that allows you to add a tracking code to your site’s HTML, enabling Google to monitor where each user has come from, where they went, what paths they took to get there, and crucially, at which point they left your site. This provides an invaluable wealth of information that you can use to better lay out and design your website with CRO in mind.
CrazyEgg offers a lot of the same features as Google Analytics, but it also creates a visual “heatmap” of your design. This is incredibly useful, as you can see exactly how people are viewing your site, how far they scroll down, where their mouse cursor goes and clicks, and you can tell you right away if a link is working or not. Though this is not a free service, you can sign up for a free 30 day trial, and a basic package is only $9 a month, making it ideal for some A/B split testing and comparing the results quickly and, more importantly, accurately.