CTAs | Contents

This page is a work in progress and still a draft

Overview

1. General notes

Our source language is EN-US (US English)
Remember to hand off designs to the Localization team
- Confluence Localization Operations Team / Slack #prj-translations

2. Content design only: Use Writer plug-in to flag and replace CTA-related terms to avoid and/or add propose additional terms to avoid via governance process

Definition

A call to action (CTA) is a prompt that asks users to perform a specific action, like uploading a logo, saving changes or buying a product.

CTAs can appear as a button or as hyperlinked text.

Best practices

Use action-oriented language

Format

[verb] [noun]

[verb]

Aim to use [verb][noun] format on buttons
- For example: Save template
Exceptions: If the context makes it clear what the action accomplishes, a verb alone might suffice. This may be the case with some common actions like Save and Edit
- For example, if a user is in a clearly-labelled address section and they want to edit the address, the CTA can just be "Edit", as long as it's placed close the the address field
Use strong, clear verbs that drive immediate action
Keep it short (4-5 maximum)

Use descriptive link text

WCAG guidelines recommend that the purpose of each link should be determined from the link text alone. Use object-oriented language so that it's clear what we are linking to.

Mandatory (A and AA) WCAG 2.2 standards to adhere to

Describe the purpose of a link in the text of the link (AA)
- For example, Compare shipping prices
Use labels/ text alternatives consistently for CTAs with same functionality (AA)
- For example, a page has a generic search field at the top of the page and another generic search field at the bottom of the page, both should be labeled the same "Search"

Demonstrate value proposition

Communicate clear benefits of the CTA to the user
Focus on what the customer gets /what happens when they select the CTA

Create honest urgency

Create time-sensitive motivation when appropriate
Use urgent language thoughtfully and honestly
But avoid false urgency that could damage trust (otherwise known as a "deceptive pattern")
Don't make promises the CTA doesn't fulfill

Be clear

Be explicit about what happens next
Avoid vague or generic language
Avoid jargon or overly technical language

Avoid these terms in all CTAs

These are terms that are not best practice for CTAs. Some aren't accessible nor inclusive (for example if a user can't type or is blind, etc.), or they aren't action-oriented

Click
See
Type
View
Watch
Never mind

Use active language and avoid passive language

Passive versus active language

Active language:

Starts with strong verbs
Speaks directly to the user
Is shorter and clearer
Creates a sense of immediacy
Makes the action and benefit immediately clear
- For example:
  - Browse templates
  - Go to past orders

Passive language typically:

Uses helping verbs like "can be," "will be," "should be"
Takes longer to convey the same message
Feels less personal and direct
Often includes unnecessary conditional language
- For example:
  - Templates available to browse
  - Go to orders made in the past

Examples: Do's and Don'tsAccessibility & inclusivityCTAs and page hierarchy

DO	DON'T
Copy design	Clone design
Start designing	Get started
Sign up for updates	Sign-up for updates
Show design	View design, See design
Select color	Click here
Save payment preference	Retain payment preference
Add to cart	Submit to cart
Copy design	Clone design
Start designing	Get started, Design

Additional examples

1. "Click here" → "View product details"

Problem: Assumes mouse use
Excludes keyboard and screen reader users
Provides no context about destination

2. "See pricing plans" → "Compare pricing plans"

Problem: Relies on visual ability
Excludes users with visual impairments
Better version works for all users

3. "Hear our story" → "Learn our story"

Problem: Assumes audio capability
Excludes deaf or hard of hearing users
Better version is inclusive of all abilities

4. "Watch video" → "Start video"

Problem: Emphasizes visual action
May exclude users with visual impairments
Better version focuses on the action/outcome

5. "Point and select" → "Choose design"

Problem: Assumes specific input method
Excludes keyboard-only users
Better version focuses on the task

6. "Drag file" → "Upload file"

Problem: Assumes mouse/touch capability
Excludes keyboard-only users
Better version works for all input methods

7. "Click to edit" → "Edit profile"

Problem: Specifies mouse action
Excludes keyboard and assistive tech users
Better version focuses on the task

General

Focus on the outcome, not the interaction method
Use device-agnostic language
Be clear about what will happen next
Avoid words that exclude users that have a disability (see, view, watch, type, etc)
Avoid assuming any specific ability or input method

As you consider page hierarchy, here are some examples of how CTAs can be organized:

Homepage heroes

Primary: Design business cards
Secondary: Browse templates
Tertiary: Upload image

Product

Primary: Customize design
Secondary: Explore more options
Cart Add: Add to cart

Terminology to use

This content is in draft

To help ensure we’re implementing usable and inclusive language consistently, the UX Content Design team has defined a series of controlled vocabulary choices for some common CTA use cases across our product experiences and touchpoints deemed in scope.

Use case definitions	Verb variants for common identifiable uses cases
Description of what the action is and will achieve for the user	A primary verb variant: This is the preferred verb to use wherever it’s contextually accurate
	Secondary verb variants (where applicable): Alternative verbs that can be used if the use case is nuanced and the primary verb is not appropriate or accurate in a specific context

Use case themes

Engage with account service

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Other Notes
Begin creating a user account in a way that's intended to enable long-term / permanent engagement.	Sign up	Create	-Sign up for account -Create account	All other variants such as “Register”	N/A
Connect to a user account temporarily.	Sign in	N/A	Sign in to account	All other variants such as “Log in”	N/A
Disconnect from a user account temporarily.	Sign out	N/A	Sign out of account	All other variants such as “Log out”	N/A
Remove a user account permanently in a way that blocks access to services and stored data.	Delete	N/A	Delete account	All other variants such as “Remove”	“Delete” can be used in other use cases too. Check the data disconnection theme.

Create new data

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Notes
Begin making something brand new.	Create	Set {up} Build Add	Create Brand Kit Set up new domain Build new website Add new address	All other variants such as “Generate”	Due to its ambiguity, “Design” should not be used as a primary verb. ”Add” can be used in other use cases too. Check the connect data to data theme.

Retrieve existing data

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Notes
Find something on our site using keywords or phrases.	Search	Find	Search all products Find a previous order	All other variants such as “Browse”	Search is subtly different to browse: Search = a focused activity to locate specific data Browse = more exploratory activity to surface data Users can search for something, then browse the data.

Surface existing data

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Notes
Expand product categories and products available for purchase.	Shop	Show	Shop business cards Show more business cards	All other variants such as “Find”	"Shop" is exclusively used for product categories and products. Do not use it for digital services Do not use it for product options or design templates
Expand a connected data source that’s not yet visible.	Browse	Find Explore Show Open	Browse templates Find a designer Explore design options Show transaction history Open a recent project	All other variants such as “View”	Browse is subtly different to search: Search = a focused activity to locate specific data Browse = more exploratory activity to consume data with known but broad parameters Users can search for something, then browse the information.

Select existing data

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Notes
Select a specific data item(s) which can then be used or applied later.	Select	Choose	Select a design service Choose template	All other variants such as “Pick”	N/A

Connect data to data

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Notes
Pick an existing data item(s) to use or apply immediately.	Add	Use Apply	Add to favourites Use this address Apply discount code	All other variants such as “Enter”	N/A
Apply a digital file to an existing data source.	Upload	Attach	Upload image Attach file	All other variants such as “Include”	“Upload” is exclusively used for files like design assets (images, logos, etc), invoices or spreadsheets.

Disconnect data from data

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Notes
Remove data from a data source in a way that does not delete it permanently from our system.	Remove	Clear Empty	Remove item from cart Clear search results Empty cart	All other variants such as “Erase”	N/A
Remove data from a data source in a way that does delete it permanently from the system.	Delete	N/A	Delete project	All other variants such as “Clear”	N/A

Modify existing data

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Notes
Begin modifying details in existing data.	Edit	N/A	Edit address	All other variants such as “Customize”	N/A
Replace existing data with new data in a way that overrides all attributes simultaneously.	Change	Replace Switch	Change address Replace image Switch templates	All other variants such as “Edit”	N/A

Store Data

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Notes
Store a new data item or changes to existing data.	Save	Update	Save design changes Update payment details	All other variants such as “Change”	N/A

Approve data

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Notes
Clarify agreement to a data item or changes to existing data.	Confirm	Accept Agree	Confirm refund request Accept privacy policy Agree to terms	All other variants such as “Save”	N/A

Engage with a process / activity

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Other Notes
Begin a process / activity.	Start	Get started	Start designing Get started with your design	All other variants such as “Go”	“Get started” should only be used if contextualised with a noun. E.g: Get started with your design
Progress forward through process / activity.	Continue	N/A	Continue to payment	All other variants such as “Next”	“Continue” should always be contextualised with a noun.
Regress to an earlier stage of the process / activity.	Back	Go	Back to order summary Go back to order summary	All other variants such as “Return”	It’s preferred to prefix the adverb “Back” with a verb such as “Go” “Back and “Go” can be used in other use cases too. Check the access data source theme.
Choose to end a process / activity in a way that reverses all activity	Cancel	Discard	Cancel design changes Discard design changes	All other variants such as “Abort”	N/A
Choose to end a process / activity in a way that fully removes user from current process / activity.	Exit	Close	Exit project Close chat	All other variants such as “Back”	“Exit” and “Close” can be used in other use cases too. Check the access a data source theme.

Access a data environment

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Other Notes
Redirect from current data environment into a separate data environment.	Visit	Go Enter Check Open	Go to help center Enter account area Check frequently asked questions Open favourites	All other variants such as “View”	N/A
Remove user from current data environment and return them to an environment visited previously.	Back	Go	Back to order summary Go back to business cards	All other variants such as “Return”	It’s preferred to prefix the adverb “Back” with a verb such as “Go”.
Remove user from current data environment and place them in a separate environment	Exit	Close	Exit help center Close project	All other variants such as “Remove”	N/A

Communicate with Vista

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Other Notes
Contact us via a yet undefined method.	Contact	N/A	Contact us	All other variants such as “Get in touch”	N/A
Contact us via a device that enables voice calls.	Call	N/A	Call us	All other variants such as “Phone us”	N/A
Contact us via a device that enables an online chat or messaging service.	Chat	Send	Chat with us Send message	All other variants such as “Message”	N/A
Contact us via a device that enables emails.	Email	Send	Email us Send email	All other variants such as “Mail”	N/A

Invite Vista to take action

Use case definition	Primary verb variant	Secondary verb variants	Examples (Do)	Examples (Don’t)	Notes
Initiate Vista to do something that the user desires or requires.	Request	N/A	Request callback Request invoice Request refund	All other variants such as “Ask”	“Request and “Ask” are subtly different in our context: Request = purposefully invite Vista to do something specific Ask = inquire about something or seek clarity