Design is in the details.
The smallest of tweaks or a change of color can make all the difference between a good design and a great one. This may be especially true for web design. While we might tend to focus on the large photo headers or nice typography in a design, there’s much more going on than just the aesthetics. There are people who spend a lot of time studying and testing how users interact with websites — where their eyes travel first, what they click on, how much time they spend on certain pages.
And if you have a website where you’re trying to get visitor to do something — say, buy a product or sign up for a newsletter — then these types of metrics become even more significant. This is when the design of details like call-to-action buttons (the clickable ones that might say things like “Buy” or “Sign Up”) can have a measurable effect on the way visitors interact with your site (the user experience, or UX) and the results of those interactions. A well-designed call-to-action button should help convert curious visitors into customers, donors, subscribers, account holders — or encourage them to take whatever other desired action you have in mind.
So how can you design an effective call-to-action button that entices visitors to follow through? Let’s take a look at some tips and tricks, along with examples from around the web:
How to Design a Call-to-Action Button
01. Make It Visible: Size
If you want visitors to your website to answer your call to action by clicking a button, then that button needs to be highly visible — easy to find at first glance. Making the button large enough to attract attention (in proportion to other elements on the page), yet not so large that it makes the page layout look unbalanced, is key. You can balance the size of the button with other characteristics like shape and color to optimize visibility.
Not sure if your button stands out enough? Try the trusty (if low-tech) “squint test” — step back from your computer screen and squint at the web page so all the details blur and you just see general shapes; if the button still stands out, then you’re in good shape.
02. Make It Visible: Color
According to Ott Niggulis at ConversionXL, there’s no magic button color that converts the best, but color is still an important choice. Different colors have strong cultural and psychological associations, so you may want to consider those, in addition to making sure your choice harmonizes with any existing color scheme you have for your website.
This color scheme takes a page from traditional color theory by pairing a lime green button with the orangey red hue that dominates the rest of the page. Complementary pairs that are opposites on the color wheel, like red/green and blue/orange, have high visual impact and are sure to attract attention.
Color can also be balanced with size to enhance visibility. For instance, a large button (already easier to see because of its size) could overpower the page if it’s in a bright color; so a more subtle shade may be appropriate. On the other hand, a smaller button might benefit from a bolder shade to make it extra visible.
03. Make It Look Clickable
Your call to action may be a lost cause if visitors don’t even realize they’re able to click on it. In web design, the use of buttons is more than just a design feature that replicates a real-life, tangible experience — it’s also a functional, interactive tool that users look for and have come to expect when navigating websites.
So it’s important that your button actually looks clickable. Shape is a big consideration here; buttons are most commonly rectangular with either sharp or rounded corners. If you opt for a different shape, you’ll want to make it visually obvious that your button is clickable. Some effective options include using shadows, highlights, or other subtle effects that give the button a slightly 3D appearance.
04. Consider Contrast
Contrast is an important quality for any design, but for a call-to-action button, you’ll want to think about it in two ways:
1) Button Color vs. Background Color: If the color of the button blends in with the background color of the webpage, your call to action might get overlooked. You want your button color to stand out sufficiently without clashing with the background or other colors on the page.
In the example below, not only does the dark blue contrast nicely with the yellow background, but the second button (an opt-out alternative to the call to action) has also been made less visible with a golden color that’s similar to the background and comes across as a less appealing option with a clever bit of copywriting.
2) Text Color vs. Button Color: You don’t want users straining to read the text on your button. Aside from picking a legible font at a large enough size, choosing an appropriate color for the text will help enhance readability. You’ll want to avoid colors that are too similar to the button itself and also colors that are just hard to see when paired together (e.g., white text against a yellow button). White against darker colors and black or dark blue against lighter colors are generally safe choices.
05. Pick a Good Position
After you’ve designed your button, nailing down its placement within the overall page design is the final step. Deciding on a prominent position will depend mostly on your particular page layout.
A general guideline is to place your button “above the fold.” That’s an old newspaper term for placing the most important information on the front page of a paper above the fold, where readers look first. You can apply the same idea to your webpage by positioning your button in the area that visitors first see without having to scroll down. That will usually be at or near the top of the page. Wherever you place your button, surrounding it with some extra white (or blank) space — not crowding it too close to other elements — will help draw attention to the button and give it visual prominence.
What to Write on a Call-to-Action Button
01. Address the User Directly
Using active verbs that speak to the user and ask them to take a specific action will come across as much more engaging than plain nouns. For example, which do you find more appealing? A button that says “Buy Now” or “Checkout”? Or one that says “Try It for Free” or “Free Trial”? If your audience feels that your call to action is a personal one, they’re more likely to answer it.
02. Create a Sense of Urgency
But sometimes a personal appeal to users isn’t enough to get them to click that button—you need to give them an incentive. That may be simply in the way you phrase the call to action, using time-sensitive words like “now” or “today.” Or you may want to arrange a limited time offer or, if you’re selling something, limit its availability or set up a temporary discount.
However, while it can be an effective tactic make visitors think they will be missing out on something if they don’t act immediately, you should actually deliver on any statements or promises you make; don’t purposely (or unintentionally, for that matter) create false impressions with your call to action or mislead users into thinking they’re getting a deal or benefit that they really aren’t.
03. Start a Conversation
You never want visitors to your website to feel coerced or manipulated by the language of your call to action. If the tone is friendly and welcoming, they’ll feel more like you’re starting a conversation rather than pushing a sales pitch. Casual, conversational invitations like “Let’s Talk!” or “Join In!”, as in the examples below, communicate positivity and a personal interest in the people you’re hoping to interact with on your website.
04. Keep It Short and Simple
Your call to action should make it immediately clear what users should expect and what the result of clicking the button will be. Keeping the text on the button short and clear will help avoid any confusion that might cause users to hesitate. Although, sometimes, that might require more explanation than you can fit on the button itself. In that case, you might consider including extra information outside (usually underneath) the button. As you can see in the image below, this will typically be smaller-sized text that adds value for the user and/or offers clarifying information.
05. Add Visual Cues
Enhancing the text on your button with a visual cue such as an icon or small illustration can help create immediate associations and add clarity. Think, for instance, of a shopping cart/basket for purchases, upward and downward errors for uploads and downloads, etc. If you do add a visual cue, make sure to include enough negative space between any text or other elements and the edges of the button so it doesn’t look overcrowded.
Case Studies: What You Can Learn From A/B Testing
Many web designers take advantage of a method called A/B testing to compare the effectiveness of two different design approaches and collect data on how they perform. Those with the know-how can set up a test themselves, or take advantage of tools like the ones listed here. The folks at ContentVerve.com have shared several case studies they conducted on call-to-action buttons. Although what works for one website will not necessarily work for another (that’s why testing is important), let’s look at a few and see if we can pull out any general pointers.
01. Button Color:
This test changed an “Add to Cart” button from blue to green and saw a significant increase in sales as a result. It would seem that this is simply a visibility issue — the blue button was the same color as the text, so it blended in; while the green button was both bigger and brighter in color, so it stood out more effectively. The takeaway? Pick a high-visibility color that’s not already featured prominently on the page.
Here’s another button color case study, this time focused on the effect of text and button colors combined:
In this case, the change from a black to yellow font color decreased clicks — I would suggest that this is an example of the text being too similar in color to the button, an issue mentioned earlier in the “Consider Contrast” section. The takeaway? Pick a font color that contrasts well with the button color. Black against lighter colors and white against darker colors usually work well for visibility.
02. Button Wording:
Being clear and specific about what users should expect from clicking the button (which we also discussed earlier under “Keep It Short and Simple”) presumably helps put visitors at ease and gives them confidence in the process of interacting with websites. That’s certainly what seemed to happen in this test, which changed the wording on a button from “Get your membership” to the more specific “Find your gym & get your membership,” adding the “find your gym” part first, since that’s the first step in the checkout process. The results were dramatic, with a 200+ percent increase in clicks. The takeaway? Create value for users by explaining exactly what’s going to happen (or what they’re going to get) when they click the button.
To Sum Up…
Details DO matter — in design in general and when creating call-to-action buttons. If this article has inspired you to take a fresh look at your own buttons and maybe change them up a bit, check out this free call-to-action button generator and experiment with different design approaches. As always, happy designing!