Design Hitch and Glitch

There’s nothing more disappointing to me than seeing a blog or a website that promotes great design but absolutely fails at making use of their product knowledge to increase their user base and improve their engagement with their existing audience through calls-to-action (CTAs). It’s a prime case of wasted potential.


To help such websites apply their skill and insight in design, I’ve laid out a number of tips for them to follow so that they can communicate their expertise on this ever-important subject to more people.

General Guidelines

CTAs are usually in the form of buttons that direct people to do something, whether it’s subscribe to a newsletter or buy an e-book. To get your visitors to actually click on these buttons, you’re going to have to first make them noticeable.


Bigger is Better

Simply put, size matters when it comes to CTA buttons. Making them larger than all the other text and some of the elements in the web page is the easiest way to attract the eyes of your site’s visitors. If you have other CTA buttons on the same page, it’s all just a matter of prioritizing to set their sizes.


Contrast Colors

It is design 101 to highlight a particular item by splashing it in a color that greatly contrasts with all the other elements’ colors.  If you’re placing the button on top of a green background, paint it red instead of lime or olive where it will just blend. A button on a page with all black text on white should be a bright color so that it pops out.


Space Out

Another really straightforward way to emphasize a CTA button is by merely giving it enough whitespace between the other elements. By having the right amount of separation with no other distracting doodads around the button, it stands out on the webpage.


Highlight Creativity

Besides following a tried-and-tested formula, unleash the creativity you and your fellow designers have on the CTA buttons.


Go Quirky

The design of the button itself can be a subject of debate, but as a designer, you can allow yourself to run a little wild with how your CTA button will look. It’s all about grabbing your visitors’ attention, and having a button that’s in the shape of a star can draw eyes.


Point It Out

Sometimes the best way to get people to notice things is to just point it out to them. Do this with your CTA buttons by drawing arrows directed to them. You can experiment with the designs, as long as they lead the visitors’ eyes toward the buttons.


Hover Effect

People can be mistaken for seeing your button as just another picture on the website. To make sure that doesn’t happen, add a hover effect to the button so that whenever someone’s cursor happens upon it, they’ll know immediately that it’s clickable.


Learn from the Master

The best advice usually comes from the most experienced. Neil Patel, one of my personal web heroes, happens to be one of those individuals who have a wealth of experience to draw from in the realm of online marketing. Here are a couple of his great tips when it comes to CTA buttons.


Tie Button Text to the User

Patel tried using the generic copy “See Pricing and Plans” for Crazy Egg, and it led to a decreased conversion rate. By changing it to the more relevant “Show me my heatmap” copy, the conversion rate shot back up. Let users experience a personalized touch, as if you’re talking to them in person and letting them know that it’s all about them.


Show Buttons When Necessary

Patel also notes that you can control the way your users navigate your site. For instance, he made an example of, a site which had people watch a 30-minute sales video that couldn’t be fast-forwarded before the CTA button appeared. Crazily enough, conversions rose by 144%. Educate your user base first, and they’ll be more likely to click.


Last Ditch Effort

Ever the opportunist, Patel also tried giving readers an offer with a CTA button when they are about to leave the page. The result? A 46% conversion rate increase. It’s a risky move, but it’s worth a shot.


Avoid These Practices

For all the tips that you’ve picked up in this piece, it’s also important to know what you shouldn’t be doing with your CTA buttons. It’s critical to mobilizing your user base so you don’t want to weaken its effectiveness.


Information Overload

If you’ve designed your website architecture in the right manner, you’ll have landing pages dedicated to persuading people to eventually click on the CTA button with not much hassle. You can’t achieve that if you dump too much information on the page, losing the visitor in a sea of text and links.


When the person gets to that page, he/she should already be primed to do something so giving her more information to absorb only keeps him/her from clicking.


Photo Bomb

Just like you can go overboard with text, you can also get carried away with an explosion of images taking up space on the screen. I’m sure that the designer in you has a reason for inserting some artful photographs into the picture, but remember that you want people to focus on clicking the CTA button. Give them less things to look at.


Mixed Messages

A CTA button needs to persuade people to take action in a clear and concise manner, and its surrounding elements all need to lead to that one button. It’s hard enough as it is to direct visitors to do one thing, so don’t muddy up the picture by asking them to do even more. Having two CTA buttons that work is still possible, but it’s definitely a tightrope balancing act.



As much as you’d like for your design blog or website to maintain a sense of “purity” in terms of artistic design, you’ll have to admit that stubbornly clinging to that mindset can disconnect you from your user base and potential visitors. Instead of fighting the more practical route and possibly alienating your audience, utilize your talent to bridge the gap.

Image Source:


Leave a Comment