As you begin a website project, the branding of your company plays a huge role in the outcome of your online presence and your buttons can make a fundamental difference as to whether or not you get that sale or collect that lead. Moreover, just by simply changing the colour of your call-to-action (CTA) you can see major differences in how your users use your website. There are a variety of factors that can affect your User Experience (UX) on your website’s pages and understanding the importance of designing buttons can help you achieve success.
One key statistic that marketers look for is the click-through rate (CTR) of a button, the CTR is a ratio of users who clicked on your specific button/link in comparison to the number of people who looked at that button/page it is on. Therefore, the higher your CTR the more people click on your link who saw it.
Believe it or not, just by changing the mere colour of your website’s button, you can greatly improve your CTR and achieve your objectives. There have been numerous case studies from companies such as HubSpot that have tried and tested button colour psychology and have seen great results.
Therefore, at this stage of your branding, it is important to make the correct choice of button colour, so what are the 3 major reasons behind choosing a specific colour for your button links?
3 Reasons for Choosing a Button’s Colour
1. Your Brand
When you choose the colour of your CTAs, more often than not, it will be complimentary to your brand. If your website and your company use a colour palette that mostly revolves around blue/green colours, then you wouldn’t often see a totally random colour such as red.
Your button colours will compliment your branding in one way or another, this will ensure consistency of your website’s design and familiarity with your UX. Additionally, it will make sure your User Interface (UI) is clean and nice to look at, which your audience will benefit from.
2. Your Audience
When designing a website, among keeping aspects consistent with your brand, it is important to design with your audience in mind. This concept is the same for button design and for choosing your colours.
For example, if you run an e-commerce store and you sell shavers for men’s beards, you would try to research and find some colours that men favourite, considering your audience will be mostly men (with the exception of other users buying gifts for men).
According to a study, conducted by Xerox Corporation, 57% of men favour blue, therefore, in our men’s shavers example, having a colour that does not represent your audience can have negative effects on your business.
Gender is one demographic that can be used to define your audience. However, many other factors such as age, cultural background, occupation, family status etc… can all be used to help define the correct colour for your website’s buttons.
3. The Effects of Different Colours
Finally, the effect that different colours have must be taken into consideration. But what do we mean by this?
Every colour has its own psychological effect that we subconsciously acknowledge in our day-to-day. We already use many examples of this when we browse the internet, buy items, sell goods, watch videos and so on.
For example, you know that, more often than not, a red button may indicate “cancel” something or “delete” something. So, using “red” as a button colour can create this feeling in your users on your website. So, let’s take a look at some colours and their psychological effect on people.
a. Black Buttons
When you see a black colour, this tends to represent a series of meanings and feelings. Some feelings are of mystery, sophistication, glamour or even a mark of excellence.
If the colour is used as your website’s button, it tends to generate a feeling of sophistication and seriousness. This can translate to being an effective e-commerce add-to-cart button colour. While there are many button types, an add-to-cart requires the user to take action, to actually pay and enter their card details, which will only be done if a company is trusted and taken seriously.
Major companies tend to stick to using black for their add-to-cart or add-to-bag buttons, and websites, such as Nike, Kufiya and Mango use black-coloured buttons for their CTAs.
b. Blue Buttons
Blue is one of the most common colours and most recognisable colours for buttons, but why? Firstly, blue is the most commonly liked colour between both males and females, this allows you to use a colour that will be well-received by those two genders.
The psychology of blue also induces a sense of calmness, stability and reliability, one of the reasons why some of the major social media companies (Facebook, Twitter, LinkedIn) all use blue as their primary colour.
Notably, hyperlinks have always traditionally been a form of blue, whether you are writing on a word document or in HTML, blue hyperlinks have been a standard format for some years now. Therefore, it is immediately and typically associated with being a link and can help your website buttons to stand out.
c. Green Buttons
Green buttons are great for your website and can provide a feeling of peace, calmness sustainability and innovation. Therefore, on many charity websites and environmental websites, you will tend to see a type of green CTA. This not only reflects the company’s ethos but also the types of users that will be engaging on the website and clicking the buttons.
Green has also typically been seen as a colour of approval, we can see it in our traffic lights, for example, when the light is green, we can now go. So, using a green colour can subconsciously create a sense of positivity.
d. Red Buttons
Using the correct button colours can drastically help your users navigate across your site. Whether you want them to fill out a form, buy a product, subscribe to your newsletter or much more, just by using a certain colour, you can direct and help your UX to take your users where they need to go.
By having red buttons across your website, you can stand out from the crowd, a strong red colour is clear and concise and will be easily seen by your users. However, we do not just want it to be seen, but we want the button to be clicked on.
Red is a powerful colour, therefore, by clicking on a red CTA, you would expect some direct action, so they make perfect buttons when a user can delete something, and even download, but you should use this button colour with caution as it can easily mislead users if not used correctly.
Stats about the Importance of Colour in Branding
- 84.7% of consumers rationale that colour was the main reason for buying a product.
- 62-92% of website judgement is based on colour.
- 52% of shoppers will not return to a website if they do not like the UI.
- 93% of consumers will look at the visual appearance when looking to buy.
Concluding Thoughts
The importance of your button’s colours is not to be underestimated, it can be the overriding difference in the success of your website and your online business. Therefore, we highly recommend putting in the research and testing to make sure you get it right.
It can be difficult and will take some luck to get the perfect colour straight away because it is always best to test with live data, so how can you do this? A/B testing different types of colours, as long as they meet the 3 focal criteria points, we mentioned at the beginning of this article. You can chop and change your colours until you see the results you are looking for; some companies have A/B tested and have seen increases of 20-60% in their CTR.
While colour is a hugely important factor in your button design, there are also other factors that will need to be addressed. For a full overview of designing the best button, check out our comprehensive button design guide here.
