Properly Writing UX copy for buttons and links - Unmasp - experience exhibiting blog

Post Top Ad

Post Top Ad


Properly Writing UX copy for buttons and links

Writing UX copy for buttons and links

This is an excerpt from our upcoming UX Writing book, exploring how we (as designers and copywriters) can write copy that helps people use and love our products. Sign up for book updates here

It’s widely known at this point that people don’t read, they scan. That makes your button and link text, in some cases, even more important than your body copy.

We have been trained to look for the Next button, click the Accept button or tap “Next” instead of reading introductory text. Our eyes go straight to the CTAs.
So your link or button copy serves two purposes: To set the user’s expectations and propel them forward. Meaning, one or two words can make or break your product experience.
First, the difference between buttons and links:
Buttons are generally used for the most important actions we take on your site or within your product. Think: clicking “Buy Now,” adding an item to our cart, completing a purchase.
You will also likely use buttons rather than links when guiding your user through a series of steps to complete a task, i.e. a “Next” button in a survey.
Links are typically used within body text as a soft CTA. You’d include a link within an article to link to other content. While buttons signal an important action, links encourage browsing.
Your copy may change slightly depending on whether you’re writing for a link or button.

Button copy should match the action

Your button should always clearly describe what action the user takes when they click it.
When they’re moving to the next step: “Continue”
When they’re completing payment: “Complete payment”
When they’re signing up: “Sign Up”
You get the idea. If someone is surprised by the result after clicking a button, it’s your copy’s fault.

That said, subtle differences in word choice can have an impact

A friend of mine working on an adventure resort website was tasked with increasing online conversions for trip estimates. After years using “Request pricing” for the button text, they A/B tested it with the text, “Get a quote.” The second option won by a landslide. Their theory: The word “pricing” seemed like a harder commitment. Getting a quote, on the other hand, felt less intimidating. They changed the button text and conversions skyrocketed.
Both “Request pricing” and “Get a quote” describe the action. They are both technically correct, in terms of best practice. But the second variation got more clicks.
If you’re focused on a specific conversion, it’s worth testing different copy for your CTA. You’ll never know if “Sign up” or “Create an account” (both of which say the same thing) perform better for your audience until you try both.
Just be careful to not get too clever. “Join us” is vague, and potentially confusing, compared to the straightforward “Sign up.”

Link copy can be more ambiguous

Since we’re not usually committing to anything or changing our experience in any significant way when clicking a link, the stakes are lower. You have more room here, both in length and tone, to be playful and exercise your brand voice.
However, descriptive, clear copy usually wins here too.
Your link could read simply, “Download the guide” or it could say more descriptively, “Download the quick start guide for easy set-up.” If I were scanning, I’d know immediately what the latter leads me to. Otherwise, I might have to read the surrounding text for context first.

Beware the “Learn More” trap

The classic “Learn More” button text is a cop-out I’m guilty of using myself (on this blog, even) with both links and buttons. Sometimes, it does the job. Most of the time, though, we can do better.
Take our Studio edition page for, for example. Most features link to their own sub-page, and we could have easily slapped “Learn More” or "Buy Now" on these buttons like we do elsewhere. Instead, we use the buttons almost as supporting text for body copy. Buttons like:
See all Grids
View Demos
Get Studio
See How it Works
Every button aims to play off the body copy above it. We’re not getting poetic or using puns, mind you. The text is still plain and clear, describing the action and setting expectations. Yet we’re using the buttons to build on the story and push the user forward.

Buttons & help text: The perfect pairing

Think about how your user feels and what they know or don’t know when clicking your button. Are they about to spend their money? Are they sharing their personal information? Are they wondering how much longer this will take?
The copy preceding your button should answer any questions they may have, but in some cases, help text can validate their decision, alleviate any concerns and give that final push they need to click.
With a short sentence beneath your button, you can assure them their payment is secure, their information won’t be shared, or that they’re about to make a great decision.
Airbnb knows its users are making a relatively big commitment when booking a place to stay. They understand you may be weighing options before you book. So, assuming the user may hesitate over that “Reserve” button, they assure you beneath that you won’t be charged yet.
Experian knows its customers worry that checking their credit score hurts their credit, so they explain with their button help text that it doesn't. The New Yorker knows you've been burned by subscriptions in the past, so they write "cancel anytime" below their subscribe button. It's here, with your buttons, that empathy (a word designers love to throw around) comes into practice. By thinking about how your user may feel when deciding whether to click your button, you can write copy that ensures they do.
This is another place your voice can come into play. Just make sure your message clarifies and supports, rather than distracting or adding complexity.

Related Posts

No comments:

Post a Comment

Post Bottom Ad