A major part of any online ad is the CTA ("Call-to-Action") button. This is the virtual button that is meant to prompt a user to click it and take action. This could lead to the user downloading an app, buying a product, subscribing to a service, etc, etc. How do we make it stand out yet look seamless and part of the other graphical elements of an ad? Here are a few tips.
#1 Color and contrast
User behavior towards different colored buttons varies by platform, industry and culture. There are some guidelines though.
- Green, blue and orange are pleasant to look at as buttons. However, taking a testing and an iterative approach is recommended to discover which actually works best, especially when using contrast.
- Black and white as buttons, do not convince too much as these are neutral colors which have little-to-no "take action" effect. Exceptions are if these palettes are part of a corporate branding or a particular campaign. They can also be used as a theme for secondary buttons so as to give way for the main button.
In line with this, great contrast works well with most colors. If the viewer can see the button as it stands out and apart from the rest, then the viewer’s eyes will be directed there.
Starbucks uses the gold palette to the main button which is “Join Now”, to convince users to sign up.
#2. Fewer text with direct-to the point messaging
Buttons are meant for action to be taken and not to be mini articles! Stick to 1 to 3 words for your button. One glance and it should convince the target person to actually click the button. “Go” is a favorite word in buttons but it does not tell you more about what action you will be taking after you click the button. “Join our class”, “Download Now”, “Pitch your idea” is explicit and gives the viewer an instant idea of what will happen next without further explanation needed.
Coursera’s home page has the three-word “Join for free” which is incredibly simple and yet direct as well as to the point.
#3. Highlight the deal or if it is FREE!
If you have got a 10% discount for the month, highlight it on the button or near the button. Discounts have highly convincing powers! If it is free, highlight it by making it bold or use uppercase letters. You can also simply add the fact that it has a discount or that it is for free. In this world where almost everything is a matter of money, who doesn’t want something for free?
Avast makes good use of it's free antivirus as its initial selling point.
#4. Let your button “breathe”
As in any other creative work, creating space means clarity for the viewers, which means the viewer can be directed on what to do after reading the details. Create sufficient space around the button and inside the button too. It’s a great practice to create space around the text inside the button.
Microsoft Word’s page has an enormous negative space on all of it elements making it looking tidy and clear.
#5. Make it simple and stylish
In this industry where flat style is becoming the trend or even the standard, it can be hard to stand out and yet be current. Simple gradients, drop shadows and subtle elements can make a button more engaging and persuasive. A reminder that you should ensure that the styles go well with the button. It doesn’t have to be fancy and look like you really put in tremendous effort to create it but it should be obvious that it is a CTA button.
Bubble witch 3 Saga’s button is fancy and playful yet so simple.
Hope these would be helpful on your next project!