Best Practices for Buttons: The User Experience of colors

There’s a ridiculously simple way to increase your buttons CTA (Call to Action) conversion rate. In this article, I will share my best practices for buttons.

And once you know what they are, and how it works, you’ll want to kick yourself for not trying it sooner.

Today I’m going to show you how two of my customers — an e-commerce website and an analytics mobile app — used this trick to boost their CTA conversion rate by an average of 30% over 6 months. There are many ways to consider colours and the psychology of colours. Today I am not going to write “rules”, but I just want to show you my idea about those two projects in relation to CTA buttons.

I’ll also give to you a free .sketch buttons mockup. (See the bonus pack at the bottom)

The User Experience (UX) of Buttons

[Free bonus pack at the bottom]

 

If we look at the user experience of Gmail, the interface is very simple and it looks like the first-stage of a wireframe.

It has a very simple design, very simple colours (monochromatic) and it works!

The UX here is incredibly contextual.

gmail

Did you see that nice blue button “send” for sending the emails?

The colour and the position, in this case, is more important than the text “Send”. They could have used a generic symbol instead of the text, with no impact on the user’s actions.

In fact, in the mobile app, they haven’t used a text in a button, but a simple blue Arrow-Airplane icon that stands in such stark contrast to the rest of the page – and looks sufficiently button-like – that users have no choice to consider it as the primary call-to-action.

iphone

How to grab the user’s attention with buttons?

[Free bonus pack at the bottom]

 

Designing call to action buttons for web interfaces requires some discretion and planning; it has to be part of your prototyping process in order for them to work well.

You can create a great call-to-action button for your website and improve its conversion rate drastically by combining scientific studies on colour with some design principles. In my projects I’ve always considered 6 important tools to achieve this:

  • Position: It’s very important to give your CTA button a prominent placement. The placement of buttons is critical to drawing the eyes of visitors. Placement in prominent locations (distinguished area, top or center layout, in the angles for form’s buttons) can lead to higher conversions because users will likely notice the call to action button and take action;
  • Clear message (or icons for mobile devices): Use the right words, be original, and use verbs to encourage actions (buy, download, watch, test, etc.). By experience, there is a big trust problem in the user’s feeling. To increase click conversion and to build trust, anticipate users’ scepticism and tell them what they will gain by taking the action you’ve presented to them.
  • Shape: Rectangular buttons are better than circular ones;
  • Size: The size of an element relative to its surrounding elements indicates its importance. Remember: the larger the element is, the more important it is. Decide how important certain site actions are, and size your buttons accordingly.
  • Colouring: I believe the most important part is deciding what colours use for call to action buttons because they interact with the psychology of the users. I suggest to use colours with a high contrast relative to surrounding elements and the background;
  • Offer alternative actions: A web page can have multiple calls for actions. Sometimes it’s necessary to offer a secondary action in order to convince the user to later take your desired primary call for action.

The Psychology of Colours

[Free bonus pack at the bottom]

Now I have a question for you: Do colours really matter for conversions?

It’s a well-known fact that colours can provoke emotions, every colour evokes a different feeling or mood with people and, therefore, results in a different reaction when seeing the colour (of course, it is relative as different cultures perceive colour differently). So, choose the colour of the call-to-action button depending on the emotion you want to inspire.

For example:

  • Red: Power, passion, love, negative;
  • GreenGrowth, money, environment, positive;
  • BlueTrust, peace, loyalty, safety, positive;
  • Black: Formality, luxury, sophistication, neutral;
  • Grey: disabled;
  • BrownOutdoors, food, earth;
  • OrangeConfidence, cheerfulness, friendliness;
  • PurpleRoyalty, mystery, spirituality;

Another tip: Contrast is the key!

You can use a complementary colour for the background if you want a design element to stick out.

I suggest to choosing a colour that is less prominent (relative to the surrounding elements and the background) for large buttons, and a brighter colour for smaller buttons. But whatever colour you may choose, make sure you design the button in such a way that it is noticeable without interfering with the overall design.

Remember, contrast isn’t just about complementary colours on the colour wheel. It’s about value.

A light button won’t stand out against a light background as a dark button would. On top of that, the copy needs to stand out against the button, too.

colorwheel

This image is included in the free bonus pack at the bottom.

Best Practices for Buttons

[Free bonus pack at the bottom]

 

Well, now I am going to show you the simple guideline for buttons that I’ve used for my customers in their CTAs, forms and popups (so take this as an example).

As I told you before, I identified few colours to represent four important feelings:

  • Positive (CTA: Save, Send, Download): Blue, Green;
  • Negative (CTA: Delete, Block, Reset): Red;
  • Neutral (CTA: See more, Alternatives, Discover): Black;
  • Disable: Grey;

So, if we use for this example a white background, you can feel better what I meant before about colouring and contrast:

wrong-right-button-configuration

Get free this .sketch design, download the bonus pack.

 

If the contrast is the same for two buttons very close in the screen, the attention of the users will be confused. As you can see, colour plays an important role on the User Experience (UX) of your product, driving your users to the action.

 

button-guidelines

Get free this .sketch design, download the bonus pack.

Does your website need help? Do you want to increase your conversion rate? Book a FREE call with me to discuss about that.

Download Free Bonus Pack 3

  • 4 Colors guide images;
  • The colours in the cultures (image)
  • Button Guidelines .sketch
Download

 

 

 

 

 

 

 

 

Luca Longo

Luca Longo

8 years of experience in User Experience. Mobile Specialist. Expert in UX/UI, Customer Experience Solutions, Prototyping and Product Management.

  • Hi, amazing article really interesting. But I just wanted to let you knnow your “Download panel” is actually not working when I clicked on Download I couldn’t see the content of the box (Chrome/Firefox/Safari have the same issue). I had to use my keyboard and press the “tab” key to arrive to the “Share to download” link 😉

    My screenshot in attached.

    Keep doing this amazing work.

    • Thanks Cecile for the feedback. I fixed the problem.

  • Color is life. Color is a culture. Color is communication. Color is philosophy. Color is psychology. Color is everything we develop and create. Color is an appetizer. Nature’s love for colors is evident from the fact that every object possesses a color. Colors support our feelings. Websites tend to attract visitors. Colors are an important ingredient of website design. Here is Article shows the importance color mechanics when it comes to developing a simple yet attractive website: http://www.cloudways.com/blog/colors-effect-on-user-experience/

  • Pingback: ¿Qué es un funnel o embudo de conversión? | SeoBlogin()