How do you capture a customer’s attention with a couple of words and push them towards a conversion? How do you create a CTA button which is irresistible to click? Is it possible to find web design templates where CTA-buttons would meet the requirements? In this blog post we’ll figure out the anatomy of the CTA buttons and reveal the Secret of a Proper CTA button. But in order to know how to use these buttons well, we need to look at the process in reverse. Is having a CTA button mandatory?
The first example about it being unnecessary to have a CTA button is clear, but what about the second and the third examples? As already mentioned, marketers rarely use a No-CTA-Button policy. Recall all the websites you’ve seen lately, and you may not even remember a website without a CTA button. However, they exist. Here’s an example.
This website has a clearly depicted product in its design [see point 2] and a minimalistic design [see point 3].
When on this website, you don’t get side-tracked by a large number of items. Thus, you may choose not to use a CTA-button if you have a small online store. Furthermore, the hierarchy of the content blocks is calibrated so that every block is taken as a separate almost-call-to-action. See? A big image on a negative space, attracting a viewer’s attention.
An interesting fact:
A human’s perception, when seeing a CTA button, devolves back to an instinctual basis, when men were tribal and in order to survive, they needed a leader. Instinctively, obeying meant surviving in life’s harsh surroundings. We’ve developed enough to think before obeying (and deciding if we should listen to the order at all), but not enough to eliminate it completely from our nature.
In this example you won’t see frames, just Call-to-actions. ‘Start Film’. ‘Share’, ‘Shop’ - these words have amazing hover effects, which seem to hypnotize you. If you are looking for an unusual design, you may check out themes for art gallery website, they often offer something remarkable.
This design is one of the most airy I have seen lately. Pay attention to the Call-to-action, it is placed on a semi-transparent banner. On one hand, it has some boundaries, which, on the other hand, are not exactly traditional boundaries, and they are not noticed by a viewer.
Even without visiting the website, you see a sharp dark text ‘Scroll to Discover’ before you read the big letters “ALL HAPPY BY DESIGN”. Is the call-to-action effective? We’ve just proved this ourselves by reading ‘Scroll to Discover’.
This website is incredibly rich for motion, it seems to be constantly moving, regardless of whether or not you move your cursor. This is an interesting case, because here the call-to-action has only one line under it, and the ‘button’ is, by far, not the first thing you would notice in the design. This underlining is like a part of the button, which nevertheless attracts attention, after the smiling lady (1) and big “FW’16” letters (2).
Don’t forget that pop-ups need to have neat and clear call-to-action.
By nature, a pop-up is an extra attention-driving design detail, and adding a proper call-to-action here is vital. I bet that most of us, even after all these years on the Web, are still caught off-guard when a pop-up appears on the screen. Good for web designers, they never put the same time interval for a pop-up. I, personally, sometimes get so taken aback that I even subscribe to the newsletter.
Here are some examples of buttons which look natural in their design.
A golden ghost button with text “Start Experience” looks natural and incredibly elegant in this design.
This is another great example of how a design of CTA-buttons may be performed. No visible boundaries, although a button looks well-cut.
Use contrasting colors for your background. The button will catch the eye by itself.
If you can’t decide on the color which you need, choosing between the colors green and red, you may consider an idea of a two-colored button. Hover effects provide the magic.
Always look deep - a CTA button incorporates the essence of what you need from a person. According to statistics, verbs in a text work better. That means, that if you write “See More Products” instead of “More Products”, the conversion (or the number of clicks on a CTA button) will be higher.
The main rules are:
Ergonomics. By nature, people tend to like softened angles. Of course, sharp angles convert well, too, but this issue is worth a separate blog post. If you’d rather learn more about this now, you may read further details about softened angles in this document and in this brilliant blog post.
For your visitor:
We are all customers of various businesses, and most of us, if not all, appreciate a good web design. With a flawless customer experience we may find our perfect product, and our service provider will find its customer. That is a win-win situation,right? Besides, rarely do visitors spend more than several seconds on a less than clear website which vaguely explains what it offers. It could be either a scam, or a poorly established business - and neither of those evokes trust in us.
Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.