We all know CTA buttons. Those little nuggets are responsible for conversions, customer engagement, and the collection of users’ data.
There are hundreds of guides on the e-Commerce CTA button design and most of them feature advice on color choice, button size, and placement. We considered them all when designing the CTA buttons for our clients but we verified all assumptions with A/B tests.
In some cases, the tests revealed quite unexpected results. Below we will share the top-5 surprising takeaways about CTA buttons that caused higher conversions and better engagement despite the conventional design rules. Give them a try, maybe these tricks will work for your store as well and give you some ideas on how to improve your design while you work on Magento theme development!
A muted CTA is a secondary button that is placed next to the primary one. Companies use muted CTAs when there are different conversion points that they want to target.
While primary buttons come in bright colors and can be instantly spotted, the muted CTAs usually come in the form of ghost buttons (with no background color). In this way, the designer emphasizes the primary action to take but also leaves the option of taking another one.
Case: Confectionary Products Store
Our client is a European-based company that sells confectionery products online. The company also has a blog that features recipes and best tips on using the products.
Even though customers claimed the blog to be useful and signed up to receive alerts on new posts, they did not proceed to the posts list from the landing page. Instead, they found it in search results and that was the primary source of discovering the blog.
The client wanted to fix that and asked us to make the blog more visible on the website. What we instantly thought of was adding the CTA button to the page.
The page already had one large and converting “Top Picks” button. At first, we hesitated to place another one next to it but then decided to give it a try.
We performed A/B testing to see which option would work better:
- Both CTA buttons have bright colors.
- The “Discover recipes” button has no background.
The results turned out to be interesting. When presented with two equal options, the majority of the customers did not choose any and preferred to browse the product gallery independently. The second option, in turn, retained a high amount of traffic for the “Top Picks” but also drove the traffic to the blog.
As a result, the traffic to the blog grew by 68% and eventually led to 21% more sign-ups for the newsletter.
One of the main rules for creating a converting CTA is to avoid lengthy copy.
At the same time, another rule states that your CTA copy should be personalized. That means it may be a bit longer than a couple of words.
By personalized copy, we mean the one that does not have any clichés and is built around the store and its products. Considering that personalized CTAs show 20% better performance than standard ones, we were eager to test it.
Case: Glasses Store
The client is a USA-based company that sells eyeglasses and sunglasses and ships them worldwide. One of the USPs of the company is the “buy one get one” offer. That means when the customer orders two frames, the second one will come for free.
The client initially addressed us with a request to increase conversions and optimize store performance. However, when we started working, we noticed that the information about the free frame was mentioned only after the customer added the product to the cart. So we suggested placing it on the landing page to let the users know about it from the start and thus increase customers’ engagement.
Once we created a banner with information about the offer, it was time to craft the CTA. We tested two options:
- “Shop now”
- “Choose my free frame”
Though two times longer than the first one, the second option showed 3.5X more conversions.
After implementing the banner and the CTA button on the landing page, we got a 37% higher conversion rate and 2X higher traffic to the product pages.
Your CTA button can be incredibly beautiful and appealing but customers still need a valid reason to click on it. So you must explain the value that the users will get after hitting the button.
There are a few ways to do so:
- make a separate page with information about the value (i.e. description of courses or subscription);
- add an image to go along with the CTA;
- add a banner;
- add text.
Choose the method in accordance with your store design and make sure you clearly explain the value.
Case: Makeup Products Store
The client is based in the UK and sells affordable and high-quality makeup products. For better customer engagement, the client recently launched a YouTube channel with free makeup lessons.
When the client addressed us, he wanted to boost the speed of the store, improve navigation, and add the social media buttons to the website. Another issue to address was the YouTube channel. Even though it had many views and visitors, only a few customers proceeded to the channel from the website. The client wanted to fix that and asked for our help.
We examined the store and saw that it had a big “Subscribe to YouTube” button on the landing page but it did not seem to convert much. We guessed the reason was that customers did not understand why they needed to subscribe and thus avoided the button.
To see if we were right, we tested two options.
For the first one, we left the CTA as it was. For the second, we created a banner where we described the courses and the value the users would get.
The A/B testing showed that adding the banner to the CTA led to 78% higher conversions. This, in turn, increased the amount of traffic to YouTube from the site.
We are used to the fact that CTAs come in the form of buttons. But what about anchor text CTAs?
The anchor text contains a hyperlink and encourages the user to take action. Anchor text CTAs can be used either in the text (i.e. a blog post) or supplement the primary CTA button. In the latter case, the anchor text provides additional value and offers one more action for the user to take.
Case: Footwear Store
The client sells footwear for women across Europe and has a big online store with many categories and products.
We helped the client migrate the store from Magento 1 to Magento 2 and were asked to make the store more user-friendly. One of the things that we decided to optimize was in-store navigation.
Even though the client had well-organized categories we still felt we could improve the navigation. So we suggested adding a small intro to each category on top of the page and include anchor text CTAs in the copy.
We tested the pages with and without the intro to see which option would perform better. The results showed that the customers actively engaged with the intro and the anchor text CTAs drove 37% more traffic to the pages than the category block on the left side of the page.
It’s common knowledge that certain words cause better customer engagement.
This makes sense: everyone is tired of “Shop now” or “Explore more” clichés that we see all across the Internet.
The good news is that there is a list of converting words that are the perfect choice for the CTA buttons. By using these words, you can increase the chances of conversion.
But that’s not all. In fact, the use of informal words or even slang can boost your conversions even more and we have a case that proves it.
Case: Women Apparel Store
Our client is based in the UK and sells women’s apparel. The brand positions itself as a “sisterhood” and actively promotes its loyalty programs.
Due to the store expansion, the client decided to switch to Magento and asked for our help. At the same time, the client asked us to suggest any ideas on how to increase customer engagement and the number of premium club members.
When we started working with the site, we immediately noticed a pop-up that invited us to join the club. Even though it was driving conversions, we felt we could make it better.
So we tried to adjust the CTA content to the brand tone and replaced the “Sign me up!” message with “I’m in!”. We then tested both options to see which one would perform better.
The “I’m in!” CTA button resulted in 84% more conversions than the old button and naturally led to an increase in the sign-ups.
CTA buttons are an essential part of the e-commerce UX design.
If you feel like your store could be a bit more converting or you simply want to make sure everything is OK, request a Magento UX audit from Onilab, we will not miss a thing to ensure your store is eye candy.