One of the biggest challenges when designing a website is figuring out how to encourage users to take the actions you want. While we canโt force our website users to take a specific route, we can use a design element known as a call-to-action (CTA) to guide them down specific paths.
CTAs are one of the most powerful elements to get users to take action on your website. Since a good CTA can be the difference between making a conversion and losing one, itโs essential that they are both user-friendly and accessible so they can be as effective as possible.
What is a CTA?
A CTA refers to a design element that prompts users to take action, such as sign up now, add to cart, start a free trial, etc. CTAs appear in many different places on a website, from the homepage, to product pages, to landing pages, and more. They allow marketers and designers to focus the userโs attention and lead them to a specific conversion.
In the example above from Athletaโs homepage, the primary CTA is the black button in the center of the page, with the text โShop New Arrivalsโ. The verb โShopโ defines the specific action Athleta wants users to take and โNew Arrivalsโ explains what they want users to shop for. This CTA visually stands out on the page and is designed in a way that makes it obvious this is the next step for a user to take on this page, thus encouraging users to select the button and shop their new arrivals.
Why You Should Consider UX & Accessibility When Designing CTAs
User Experience (UX) is all about understanding the userโs needs to create a positive and easy-to-follow experience. Web accessibility focuses on making sure websites are designed and coded so that people with disabilities (and/or people using assistive tools, like screen readers or voice-over) can use them.
UX and accessibility go hand in hand as they are both about putting the user first and making sure products are created with their needs in mind. Considering these two aspects when designing your CTAs will benefit both your users and business goals.
Better Experience for All Users
By understanding the userโs journey and what design elements will make things as easy as possible for them, you can make sure your CTAs seamlessly and intuitively fit into the userโs overall experience.
When you create accessible CTAs, you are opening your content up to more users and making sure your users who are disabled can also have a positive user experience. One of the great things about accessible website elements, like CTAs, is that they are beneficial for all users regardless of who your target audience is. Accessible website elements can help people who:
- Browse websites using devices with small screens, such as a phone or a tablet
- Undergo mobility changes due to aging
- Experience temporary disabilities due to an injury
- Experience situational limitations based on their environment, like bright sunlight or slow internet
More Conversions
CTAs are a crucial step in conversions and moving users down the marketing funnel, so itโs important to design them in a way that will be the most effective for all users. If your CTAs are not user-friendly or accessible, you will miss out on conversions.
For example, if someone is using a screenreader and is tabbing through each of the buttons on the page but they all have a vague CTA that says โshop nowโ or โlearn moreโ with no context, that person wonโt know which button to select and as a result, wonโt convert.
Improves SEO Performance
In terms of SEO, when a website is built and designed with accessibility top of mind, website crawlers can better identify what the content is about since there is more context and labeling included. As a result, the content can rank better.
To create the most effective CTAs, you need them to stand out on the page and provide value for your users. UX and accessibility best practices can help you do just that. So letโs jump in.
9 CTA Best Practices for UX & Accessibility
These best practices range from what the CTA says, how it looks, where itโs placed on the page, what interactive elements it has, and more. By optimizing each of these aspects you can create an effective and accessible CTA that will help you improve engagement and, ultimately, achieve your conversion goals.
- Use Action-Oriented & Descriptive Text
- Check Text Contrast
- Consider Use of Color & Visual Design
- Use Strong Hover & Focus Styling
- Prioritize CTA Placement Above the Fold (w/AIDA Model)
- Include Consistent Labeling & Placeholders For Forms
- Implement Selectable Blocks of Content for Secondary CTAs (Link Shielding)
- Consider Mobile Design
- Test Your CTAs (A/B tests)
1. Use Action-Oriented & Descriptive Text
When writing user-friendly copy for your CTA, active verbs are your friend. A vague โlearn moreโ is not very compelling for users nor is it accessible as it doesnโt provide enough context for users using assistive technology that looks at the links on a page.
By writing a specific and descriptive action, you can better capture the userโs attention and more accurately set up usersโ expectations for what they will get by selecting your CTA.
CTA Example #1 โ Descriptive Text
Letโs look at the screenshot below of Hello Freshโs homepage. The primary CTA on the page is the green button in the middle of the page that says โView our plansโ. If the CTA had said โLearn moreโ the user wouldnโt know exactly what content they would see by selecting the CTA button and might gloss over it. This vague text would also not meet accessibility standards.
By using the specific CTA of โView our plansโ, users can see exactly what value they will get out of selecting the CTA button โ getting to see the plans. This copy is also more intriguing for users since it directly answers a main question users have when looking at a meal subscription service, what do the meal plans look like?
2. Check Text Contrast
Itโs important to consider the text contrast of your CTAs so users with visual impairment can easily perceive content on your page. Text contrast refers to the difference in brightness between the text and its background color. The ratio between these two colors has to be at a certain minimum to be accessible.
Web Accessibility in Mind (WebAIM) has an excellent Contrast and Color guide that explains the current Web Content Accessibility Guidelines (WCAG) two for contrast and color. WebAIM also has an incredibly helpful contrast checker where you can plug in the color code of the foreground and background to see if it meets accessibility guidelines.
CTA Example #2 โ Text Contrast
For an example of a CTA that does not have good color contrast, look at the screenshot below of Archer & Oliveโs homepage. Their primary CTA button is light pink with white text that says โShop Nowโ. When you plug in the color codes for that shade of pink and white, its contrast ratio does not meet the minimum requirement of 4.5:1 and it still doesnโt meet the required ratio when the text is presented at larger sizes.
3. Consider Use of Color & Visual Design
Your CTAs need to stand out on a page and draw users in. What colors you use and how you design the size and shape of your CTAs play a large part in making that happen.
Make sure to use colors that are accessible in contrast with your text color. Itโs important to use colors for your CTA button that are different from your pageโs background and arenโt used in many places on the page. That way, your CTA color is visually unique and stands out.
Your CTA button should also look different from your pageโs regular buttons. This way you can use the visual design to help convey the information hierarchy that your CTA is the number one priority action for users to take.
When visually designing a CTA, donโt forget to consider how it will work with all of the other components on the page. Youโll want to have a good amount of negative space (or white space) around your CTA to help emphasize it.
CTA Example #3 โ Color & Visual Design
Crate & Barrel has an example of a CTA that does not have a good color or visual design. The primary CTA button is a rectangular button in the middle of the page that says โShop Sectionalsโ with a transparent background so the image behind it is showing through. This CTA blends into the background, is difficult to read, and doesnโt visually stand out on the page.
Targetโs product page has a good example of a CTA button that uses their bright red brand color to draw attention to their โAdd to Cartโ CTA. It is the only red button on the page and it stands out against the white background.
4. Use Strong Hover & Focus Styling
An excellent way to emphasize your CTAs is by giving them a strong hover feature and styling them in a way that draws focus.
Hover features are when a userโs cursor hovers over a button and the button reacts in a way to visually show that it is selectable. This interactive element could be adding a drop shadow to the button, underlining the text in the button, changing the background color of the button, etc.
CTA Example #4 โ Hover & Focus Styling
For an example of a strong hover feature, look at Allbirdsโ home page and their primary CTAs to โShop Menโ and โShop Womenโ. When you hover your cursor over the CTA button, the button changes from a white background with black text to a black background with white text. This change in color really makes the CTA pop on the page and focuses your attention on the button since an action is happening there with the color change.
5. Prioritize CTA Placement Above the Fold (w/AIDA Model)
When figuring out where to place your primary CTA on a page, you have to consider your userโs journey through the page. You canโt start by trying to get someone to take action without first capturing their attention and creating interest and desire.
It would be like walking into a store and having an employee ask you if you want to buy a product right away without telling you what the product is, what makes it unique, and why itโs relevant to you. Similarly, in an online experience, the CTA step needs to come up at a natural part in the userโs flow through the page.
The AIDA model is a good framework to help organize the order of your content. AIDA stands for four stages a customer needs to go through before converting: โAttentionโ, โInterestโ, โDesireโ, and โActionโ. In this instance, the fourth stage โActionโ is referring to our CTA.
Now that you have the order of your content, youโll want to make sure your CTA is placed above the fold so users can see it without having to scroll down the page. Itโs already difficult to capture peopleโs attention, so you want to make it as easy as possible for them to see your CTA without requiring any additional work. You could have the most amazing CTA button with the perfect copy but if itโs too far down the page and users donโt see it, it wonโt do any good.
CTA Example #5 โ Above the Fold & AIDA Model
Letโs look at Redbubbleโs homepage. They do a great job of following the AIDA model, which you can see labeled in the screenshot below.
The big, colorful banner image immediately catches your attention. The next element that draws you in is the header โYouโve been acceptedโ. This piques your interest as itโs visually the biggest text on the screen, it talks directly to you by using the word โyouโveโ, and makes you wonder what you have been accepted to. You then see the smaller text located under this header that says, โBring your whole self to campus. Explore designs by artists who love what you love.โ This generates a sense of desire for how your life will be better with Redbubbleโs products.
The design then leads you directly to the primary CTA button โShop Back to Schoolโ which tells you exactly how you can achieve this desired, better life.
These four stages are also all happening above the fold so you can see and experience this just by landing on the page without taking any additional action. You can really see how the thoughtful placement of a CTA can set it up for success and make it much more powerful.
6. Include Consistent Labeling & Placeholders For Forms
If not designed with UX and accessibility in mind, form CTAs that prompt users to enter information (like an email sign-up, payment form, contact form, etc.) can be extremely frustrating and difficult to fill out for everyone and especially for people with disabilities. The Web Accessibility Initiative (W3) has an in-depth tutorial guide on how to create accessible forms.ย
The key steps to take are labeling controls, grouping controls, form instructions, validating input, user notifications, multi-page forms, and custom controls. W3 explains the impact these design steps can have:
- People with cognitive disabilities can better understand the form.
- People using speech input can use the labels via voice command to activate controls and move the focus to different fields
- People with limited dexterity benefit from large selectable areas that include the labels
- People using screen readers can identify and understand form controls more easily since they are associated with labels, field sets, and other structural elements.ย
CTA Example #6 โ Forms with Labels & Placeholders
For an example of a well-designed form CTA that is accessible, letโs look at World Marketโs sign-up form on their website in the screenshot below. This form does a great job of including descriptive placeholder text to explain what specific information needs to be filled out in each field and in what format.
Another crucial element of this form is that when the user inputs information into a field, the placeholder text becomes a label for the field. You can see this highlighted in yellow in the example for the first and last name. This means when a user is inputting their information, they can still see the label for each field and not rely on memory alone that they have inputted the correct information for each field.
7. Implement Selectable Blocks of Content for Secondary CTAs (Link Shielding)
For your primary CTA to stand out, donโt clutter the page with too many CTAs that will distract users from the primary action you want them to take. A solution for a lot of these secondary CTAs on a page, like โLearn Moreโ or โRead Moreโ for additional resources at the bottom of a page, is to take away the vague CTA button and make the whole piece of content selectable with its title as the descriptive text. This is not only visually cleaner but it is also more accessible.
Having the entire content block selectable doesnโt require precise motor skills to select and the descriptive text will give users using assistive technology more context so they can know where this link will take them.
CTA Example #7 โ Selectable Blocks of Content
Barnes & Nobleโs homepage lists a lot of additional content for users to check out below the fold. In the screenshot below, you can see they have square blocks of content that link to different blog posts. For each blog post block, they list a โRead Moreโ CTA that bolds when you hover your cursor over it.
Instead of having this vague โRead Moreโ CTA repeating over and over on the page distracting from the primary CTA, they could remove the โRead Moreโ copy, and have the title of the blog post highlight and/or underline when you hover over it so the blog post title can be the descriptive copy a user can select.
For an example of what more user-friendly and accessible selectable blocks can look like, letโs look at REIโs homepage. In the screenshot below, they have three blocks of additional content similar to Barnes & Nobleโs page. However, REI does not include the CTA to โRead Moreโ for each block but instead has made the title of the content the descriptive text you can select.
In addition, when you hover your cursor over REIโs content blocks, a drop shadow is added to the whole block to slightly pop up the whole block and the descriptive title text is both underlined and bolded. These CTA blocks have descriptive text which is good for accessibility, they donโt have unnecessary vague buttons cluttering the page, and they have hover features that draw your attention to the content block and highlight that itโs selectable.
8. Consider Mobile Design
We live in a mobile-first world, so you have to design your CTAs so they will look and function on mobile as well as desktop. This means the mobile version of your CTA may need to change size and placement compared to the desktop version so it can still be effective on a smaller screen.
For instance, when designing for mobile with usability and accessibility in mind, you want to put your most important content in the center of the screen as this is where mobile users tend to look first. That is very different than how users interact with a desktop. Therefore, your CTAs need to take into account the different ways that people interact with mobile vs. desktop.
CTA Example #8 โ Mobile Design
Half Price Booksโ homepage is a good example of the importance of updating your CTAs for your mobile design. When you look at their homepage on a desktop, there is a large banner with the CTA to โRead the Blogโ that is circled in yellow in the screenshot below. The size of this desktop CTA text is much larger than any of the other buttons on the screen so you can easily tell itโs a priority on the page.
When we then look at the same homepage on mobile, the main banner from the desktop version has been shrunk down but not resized so the mobile CTA that says โRead the Blogโ is now smaller in size than the other navigation buttons. This makes the CTA very hard to read and feel like itโs not a priority on the page.
After looking at the desktop vs. mobile version of this homepage, you can tell Itโs going to be a lot harder for the mobile CTA to help drive conversions since users can barely read it and itโs competing for attention with the navigation buttons. Be sure to consider how your CTAs look and perform on mobile as it makes a big difference.
9. Test Your CTAs (A/B tests)
Test out those CTAs! The best way to find out what resonates with your users is by testing different versions of your CTAs and getting data on what performs well. You can then iterate on your CTAs to create more effective versions.
When A/B testing your CTAs, remember to only change one element of your CTA at a time. If you have multiple elements that are different between version A and version B, you wonโt be able to know which element resulted in the change in performance. For instance, you could change just the color between the two versions of the CTA, or just the text but you wouldnโt want to change both the color and text in one A/B test.
CTA Example #9 โ A/B Test
In the graphic below you can see what an A/B test with two different versions of a CTA button might look like. Version A includes the text โBuy Nowโ while version B includes the text โReview Cartโ. By then showing half of your users version A and the other half version B, you can get data on which version of the CTA button performed better to decide which text to go with.
Wrap Up
By considering both UX design and accessibility with CTAs, you can create a better user experience for all of your customers and make your CTAs more effective at leading to conversions. I hope you found these best practices helpful and can apply them to your own projects.
The post 9 CTA Best Practices for UX Design & Web Accessibility (w/ Examples) appeared first on Portent.