Often times companies have well designed websites with great user experience and a nice visual flow, but for some reason can’t quite get people to click on links or buy a product. There can be a lot of different factors that lead to this user behavior, but you would be surprised on how some simple visual design changes can change how often a user decides to click on a button or learn more about a product.
Below are some solid tips on just little things (I’m talking they’ll take you 20 seconds to change or recognize on your website) that can surprisingly increase your conversion and click rates. Along with it is some some real data to back up the claims so you don’t think I’m full of it.
1. What color is that button?
Button color. Does it really make a difference on how many people click through? You would think no since that doesn’t quite make sense, but data shows us otherwise. There’s also been a lot of talk about the color button Orange converting the most – which may be true – but let’s talk about it for a second.
Now here’s the thing I have with changing the button colors – it relies a lot on context. Stating simply ‘if I change my button color from blue to red I’ll convert more people’ doesn’t quite make sense, because that button is set inside the context of the website around it. All of these details play into the effectiveness of a button.
In order to make a button effective, it should stick out as a separate object on the page. It should look clickable, and tell the user what it’s going to do. This is way more important than any single color change, especially since I don’t know what kind of context you’re working with.
Which button do you think is better?
Let’s go with captain obvious here, it’s easily the one on the right since it stands out more on the page, yet it’s just so subtle and simple in it’s changes. This is more or less what I’m talking about – getting the button to stand out. Is your web page or brand dominantly the color blue? They don’t make the button a lighter/darker blue! Make it orange, or a color that won’t ‘fit’ in the page so users know it presents a different action.
You might have come into this article learning about how orange buttons are supposed to convert the most against other colors, and the reason that is true in mostly all contexts is that orange stands out the most. The only website I could imagine where an orange button wouldn’t work might be the University of Syrcause’s site, because they’re quite literally ‘the Orange.’ Here at Interact we use orange buttons, but that’s because our site is largely blue. Orange stands out the most in it!
If you want to wrap up this section with the final tip after that mini-rant, I would say go for an orange button, unless of course your website or brands main color is orange. Then it obviously makes sense to go for a different color. The goal here is to pick the color that stands out the most, and clearly communicates to the user that it is a separate action. Except yellow, don’t ever use a yellow button.
2. Single Column Layout
Now I will say that there’s a time and a place for multiple columns, especially blogs. But, when you’re promoting a product or working on the home page of your site, you should always be using a single column layout. It’s less distracting to the user, keeps them focused on just one area of content, and all they have to do is the simple task of scrolling down to learn more.
One site I love reading articles on excellently displays this, and that’s medium.com. With they’re preset design on how user’s articles will look, it truly is distraction free reading.
See how much easier it is to set up an experience for the user – it’s one area of content that you can pretty up and make all about your product or service, and it’s a single canvas for the user to focus on.
You don’t need multiple columns because you don’t need your user to go anywhere else then that homepage, and the last thing you want to do is distract them with somewhere else to go. If you can’t get the main point across on your home page, then you have an issue you need to figure out.
3. Simple Registration Form
There are few web related things I hate more than overly complicated sign up forms. Especially in the start up world I see unnecessary sign up forms all the time. No, you really don’t need my mother’s maiden name in order to sign up for an A/B testing service.
Okay I can’t say I’ve ran into an A/B testing site that has asked for that, but I have seen multiple examples of companies that ask for too much information for a free service. I’m all about getting the user through with as little information as possible.
Here at Interact, we ask for three things when you sign up – username, email, password. No separate lines for first and last name, nothing to scare the user away, but just three lines, three things to fill out, and boom – you’re at your dashboard in our site. It takes 10 seconds.
Here’s our simple sign up form compared with another complicated, yet well designed form. Also, the use of captcha on that form dropped it’s conversion by 20%, so don’t use those for your website unless you absolutely need to for whatever reason.
4. Get your point across quickly at the top of the page, and repeat it below
Latest statistics show that you have 15 seconds before half of the users that visit your site drop off. And to be honest, I feel like that’s a pretty long time, depending on how interested the user is in your product. So what’s the design tip? Make the top of your web page get the whole point across to by summarizing everything else on the page, and if the user wants to explore more they’ll start scrolling down.
I actually think most companies do this really effectively these days. You need to wrap up your product in the form of a sentence or two, and then have a call to action form or button at the top. Everything below basically acts as an argument for why a user should perform the action they first saw at the top of the page.
With that in mind, you never know which one of your product points is going to convince them to sign up, so make sure you have multiple avenues down the page to get them to your sign up form.
In speaking about Principles of Persuasive Web Design, Peep Laja observed the conclusion that even though modern web times call for a much more scroll oriented experience, parts of the page that were above the fold rendered 80% of the user’s attention, while below the fold it fell to just 20%.
That statistic alone makes it crucial that you get your point and action across in those first few hundred pixels (top 600px is what I recommend). If not, you could be losing quite a bit of your audience who isn’t quite interested enough to scroll past that.
So, we have learned 4 simple things to help increase conversions on our site. Seriously, each of these items takes minimal time to change and think about, and you’ll be surprised at the success you see and an increase in conversions once you go about changing them. So get at it!