One of the core principles of good UX design is that every page should have a single primary purpose.
If you can’t answer the question “What is the one thing you want the user to do on this page?” then you can probably improve its effectiveness.
With ecommerce websites, there’s a funnel that almost all sites in this sector follow. The buttons that appear with their calls-to-action (CTAs) are important signposts to help users find their way through to purchase and are a key part of UX design. They arguably matter in the world of ecommerce more than anywhere, as a successful user journey has a monetary value.
Related: Download 38 ecommerce icons—free
This article will take you through the 4 key steps in that funnel (landing, search, product, checkout) and will tell you how to create an effective primary call-to-action for each page. If you want to make sure you’re not leaking customer dollars along the way, read on.
Landing: Show how to start shopping
A homepage or landing page has 2 clear purposes:
- Quickly explain the site
- Get users to take the next step in buying
In order to pull off that second purpose, you’ve got to get the primary ecommerce CTA right.
“Don’t use generic wording like ‘See more’ for your primary CTAs.”
An effective primary CTA should be a button in a contrasting color to your main website color scheme to help it stand out. This primary action style should ideally only be used once per page, and it should look the same across the site so users can easily recognize it. On the landing page, you’re teaching the user what to look out for on the rest of your website.
In most cases, your button is going to take people through to the search page where they can browse a product selection. The CTA should be clear—use button copy like “Shop now” or “Search,” not something generic like “See more.”
If the user needs to enter parameters for their search (like location and dates for a travel site), the CTA can be part of a module, but it should still stand out with clear space around it—don’t let it blend in with the content.
Don’t repeat links
If you’ve decided that your most important CTA is to send people to search, it can be tempting to repeat it multiple times. But with every extra link, you’re creating more things for people to understand. Each repeated link increases the complexity of your page, which makes your site harder to use.
I understand the temptation to increase click-throughs, but it’s better in the long-term to simplify your landing page and construct a clear primary CTA.
“Each repeated link increases the complexity of your page.”
Search: Any buttons required?
A good search page lets users easily view a range of products and have enough information to compare them and make a decision on which to learn more about. Since it’s a page with lots of product links, it has the potential for lots of CTAs.
If your ecommerce site has product images on the search page, then having CTAs saying “View product” isn’t necessary. It’s understood that titles and images on search results link to other pages—after all, Google results don’t need “View site” links. Individual CTAs will just look messy and distract the user.
An aspect of a search listing you’ll find on some websites is an “Add to cart” (or basket) button. Do you need these CTAs on search, or should they only exist on the product page?
There are couple of questions I ask to determine whether a search listing should have such a button:
- Are the products you sell something users buy often?
- Do users tend to order several different products at once?
If the answer to these is yes, it’s likely you’d benefit from “Add to cart” CTAs on search. Supermarket websites are great examples of sites that need this functionality, while luxury brands don’t.
Product: Make it easy to buy
The product page needs to do a few things:
- Show off the product at its best (generally through images and video)
- Explain features and specification
- Reassure users through reviews and social proof
- Make it easy for a user to buy
The clearest CTA on a product page should be to buy that product (or add to cart). If you’ve got the user this far, they shouldn’t have to guess at how to give you their money. This page has one important goal, so help the user reach it.
Don’t blend it in, don’t make the wording unclear, and don’t prioritize other actions on the page (like adding a product to a wish list). If the CTA is prominently positioned, then it doesn’t need to follow the user around the page in a floating navigation.
Avoid deactivating or greying out this button—even if you want users to do something like select a size first—since users are likely to think they can’t buy it. If they click the button without selecting a required size, you should pop up the size selector with an explanation. When something actually is out of stock, you could replace it with a link to a contact form so they can ask to be notified when it’s available again.
Product: Secondary alternatives to purchase
The ecommerce funnel can cause users to end up in dead-ends, since even if users love a product they may not be ready to buy yet. This is particularly true if it’s an expensive product or one that requires other people’s approval before purchase. Rather than users only having a choice between buying now or leaving the site, consider having a softer secondary CTA that doesn’t clash with the primary one.
This is where things like wish lists can be useful. Perhaps the user is still in the research phase, in which case being able to add items to a list for later is helpful. It’s also a solid reason to ask for their email address, which means you can remind them to return later.
Another good secondary option is an enquiry form with a CTA like “Ask a question.” This way, if the user is uncertain about buying or has further questions, you give them a way to ask for help. This could then lead to a conversion over email or phone at a later date.
Checkout: Keep CTAs the same
A checkout flow is where users give you their personal and payment information to complete a purchase. It’s essentially a form-filling exercise, but a good checkout is pain-free and gets out of the way of the user.
CTAs gain in importance as we reach this sharp end of the funnel—clicking them here is the difference between users paying or not. If you have a multi-step checkout, then the CTAs should look and read the same on each page.
Think of your CTAs as training the user into what to expect. If the first 2 steps use the word “Next” or “Continue,” you should keep that the same on the third. You’ve built the expectation that this button will take them forward in the process. It harnesses the familiarity principle to help people know what to do.
Having each CTA say something specific to the next step (“Continue to payment details”), or adding extra copy underneath to reassure, can cause users to question rather than act instinctively. On one project I worked on, we pushed up the conversion of a checkout step by 25% by changing a differing CTA to match with the others in the flow.
Related: How Netflix does A/B testing
The exception is the final button to complete the transaction, particularly if you’re sending users to another site to pay—this is something you should make clear so they aren’t shocked when it happens.
Summary
The trick to good CTAs of all types is wording that clearly describes what action will happen when the user engages with it. This is particularly important for the primary ones that guide users to buy.
When it comes to the standard ecommerce funnel, 3 of the 4 steps (landing, product, checkout) should have only 1 primary action. The exception is the search page, which is going to contain multiple links—so lots of primary CTAs would be confusing and unnecessary unless your search is helped by a shortcut to “Add to cart.”
If you find yourself repeating the main CTA on a page to try and increase conversions, look at improving the design of the button itself. Make it bigger, put more space around it, and generally make it unmissable.
Want more ecommerce UX design advice like this? You’ll need my book Designing Ecommerce Websites, which features 54 illustrated tips and tricks for highly effective online stores—available in paperback and for Kindle.
Have you recently improved your CTAs? Share your story with us on Twitter @InVisionApp.
You’ll love these posts, too
Matt is a UX consultant who helps ecommerce sites improve their design via qual and quant data. Unlike other consultants he specialises in working with growing startups. He has been a UX designer since 2008 and has taught multiple workshops with General Assembly. His latest book is called Designing Ecommerce Websites and features over 50 UX tips and tricks.
