Calls-to-action (CTAs) are a primary focus in writing marketing copy. And your in-app help is a form of marketing. You may want to include a CTA as link text, but often you want to highlight the action as a button. Why should you do that and when? In this post, we’ll look at how you can write great calls to action.
At each point someone is using your application, they’re making decisions. To click or not to click? And what to do next? The microcopy on your link text and buttons will have a significant influence on users.
Writing clear instructional text on your walkthroughs, and clear calls-to-action will make the choices easier for users. Good CTAs are important no matter what your goals are.
Whether encouraging users to engage more or supporting users to get the most of your application, the calls to action make it happen.
Stay in style
Users don’t see your in-app guidance as any different from the other microcopy within your app. Your in-app help such as walkthroughs and articles appear within your application, and the experience should be consistent.
Usually, people on marketing and support teams are creating walkthroughs and in-app guidance with Inline Manual. It may be that you have a style guide for marketing, and guidelines for User Interface text. Sometimes these guides don’t overlap, nor do they sync up.
Will you capitalize every word or not? Mailchimp’s style guide, indicates their developers should capitalize every word, including articles. Your guidelines may be different. Make sure to stick to your style guide when writing copy.
Now is the time to connect those dots. If your application has a style guide for UI text, make sure to follow it. Keeping a consistent style in your text and CTAs will be a subtle way to maintain a smooth experience for users. Set Guidelines and keep them up to date.
Tip! Translate the defaults for your control buttons. For example, change “End” button to “Finish” or “Done”.
Calls to action
Make it clear. What action will users take by clicking this link or button? “For example, the copy on a button shouldn’t tell users to click it. It should say where they will go next, or what will happen when they press it.” - Gather Content
Tip! Create a custom button in popovers.
When you're writing button #copy, try and finish the sentence "I want to.." & make that the button. Ex: "Save My Spot". :) #marketing #tips— Chelsea Scholz (@ChelseaScholz) May 12, 2016
Sometimes you use Walkthroughs to invite users to take action such as registering for an event.
Confirmation buttons pose a classic UI dilemma. Which is the best order for confirmation dialog buttons? Should it be ‘OK’ on the left with ‘Cancel’ on the right? Or vice-versa? The point is, it doesn’t and shouldn’t matter.
“It's often better to name a button to explain what it does than to use a generic label (like "OK"). An explicit label serves as "just-in-time help," giving users more confidence in selecting the correct action.” Nielsen Norman Group
Andrew Coyle, Product Design Lead at Flexport wrote about designing confirmation. He highlighted three good practices.
- Present the action as a question in the header.
- Explain the outcome of the action in the body.
- Restate the action in the confirmation button.
Tip! Add custom buttons
"Got it" is the new "OK" (Matthew Ellison) #uaeurope— UA Europe Conference (@ua_europe) September 28, 2016
Visual design - Making what’s important more obvious
How can you draw attention to the most important actions? The visual design of links and buttons is certainly a way to help draw user’s attention.
Our brains will tend to notice something which is different in our environment. Making the button larger will get attention, but bigger buttons don’t always lead to better results.
Microsoft’s User Interface Guidelines advise making the most important actions and buttons more obvious in two ways:
- Make less-important actions into Link text, and using a button design for the most important action.
- Put the key actions first for the user.
Tip! You can use the design tools to change the button appearance, or you can use custom CSS, here's an example of moving a button to the right.