7. Make the call to action obvious
Some e-commerce sites opt to use things like ghost buttons for their main call to action, while others use colored or underlined text.
That’s generally not a very good idea.
For your buttons to get clicked, at a minimum, users should be able to tell that they’re buttons (obvious).
So, it’s critical that your CTA button looks like a button. Ideally, there should be a solid color block around the text. If your template allows for rounded buttons, that can help drive attention to the button as well.
The more the CTA looks like a button, the more you can make it pop on the page, and the more likely it is for users to click them.
Make the call to action stand out
Given that the call to action should grab web users’ attention, one of your priorities is to ensure it jumps off the page. This means using a color that contrasts with your site’s background for your CTA.
There is no question, for instance, about what users need to click to add a product to the cart on Beard & Blade’s PDP, as the CTA pops:
Another technique available to you is to leave the immediate area next to the CTA empty. Utilizing negative space will help make your CTA visually salient.
Create visual hierarchy
If you have more than one CTA on the page, their order of importance should be obvious. You can make secondary CTAs less visually interesting by making them duller, smaller, or demoting them to a text link.
It’s easy to identify, for example, that Pottery Barn primarily wants users to click on “Add to Cart” because of its placement and contrast against the page. “Add to Registry” may be the same size as the main CTA, but it’s demoted to a ghost button and sort of blends into the background: