This blog post was originally published in the InVision blog on June 26th 2018.
As designers, there are a variety of interface elements that fall under our purview. Whether you’re browsing fonts from a hot new Swiss type foundry or polishing the velvety drop shadows on your interface cards, it’s easy to get distracted.
But there’s a tiny, impactful, part of the user experience that often gets neglected: microcopy.
Microcopy includes the often-overlooked parts of the interface that can really make or break the user experience. The small details that elevate a product, and can persist a brand image inside the product. It has the ability to delight, assist, or direct the user.
The Interaction Design Foundation defines microcopy as, “the ubiquitous text that turns up in tiny chunks (hence ‘micro’) when you need it. It can be the label on a field, a quick set of instructions on what button to push, etc. It’s this tiny text on which much of the UX of a product hinges.”
Small words, big impact
Microcopy can help turn an otherwise frustrating experience into a simple, straightforward one.
This becomes especially clear when designing or writing for destructive actions, such as deleting an item or canceling a service. Since you need to confirm that the user does, in fact, want to proceed, it can get tricky.
Microcopy can make or break a product's usability. So let’s explore a few variations and adjustments that change the look, feel, and meaning of the same cancellation screen.
Established design patterns indicate that the primary button is the action that initiates the cancellation. Logically, the right button should be the one to confirm the cancellation, which means the left—or secondary—button should allow us to exit the action. Sounds straightforward, right?
Don’t cancel the cancellation
As you can see, this seemingly straightforward copy doesn’t actually help.
Do we click Confirm to cancel? Or do we click Cancel to cancel?
As mentioned, the primary button—using what is presumably our primary color—should confirm the cancellation. Therefore, the Confirm label would make sense. No problem there. The issue shifts to the secondary button.
The secondary button should allow the user to exit out of the screen. In other words, it cancels the cancellation. As such, the label Cancel should make sense, but it creates ambiguity instead.
Let’s see if we can improve the dialog and its copy even further.
A dash of color
While technically not an example of microcopy, we’ve added color to signify the type of action the primary button represents. By applying a red tint, we leverage established patterns, helping the user identify that this is a destructive action. The color supports the primary button’s label, and firmly establishes its purpose.
But relying on color runs the risk of failing color-blind users, and can be more open to interpretation. Approximately 4.5% of the world’s population experience some form of color blindness. Using color alone to establish a interface element’s purpose may effectively shun a potential 4.5% of your users.
This means the button labels need to be descriptive enough to stand alone without color. Let’s explore four ways we can use copy to accomplish this.
Option 1: Yes or no
Both your primary and secondary button labels should be as descriptive as possible, within reason. There isn’t a huge amount of real estate to work with, so the copy also needs to be succinct.
In the example above, we’ve formatted our labels with a simple yes/no hierarchy. Clear and simple.
And yet, this approach isn’t perfect. It assumes that these are answers to a specific question. In this case, they are. However, the Are you sure phrasing doesn’t provide the user with any information. The tone serves to deter users from cancelling their subscription and seems intentionally user-unfriendly for the sake of revenue. Not ideal.
Option 2: Do or don’t
In this example, we’ve changed both the dialog copy and the button labels to be more descriptive.
First, we added more information to the actual dialog copy. This way its sole purpose is to inform the user of what happens when they click the primary, destructive button.
Then we changed the button labels. Yes and No don’t make sense anymore, as we removed the question format. The primary button now reiterates the dialog’s title and body copy.
Additionally, we’re using Don’t cancel to communicate the purpose of the secondary button. This way, there’s no ambiguity in what each button does. The user either verifies their cancellation or they don’t.
Option 3: Never mind
Keeping the dialog copy from the previous approach, let’s look at another way to write button copy.
By using Cancel, we maintain the same approach we saw previously: Reiterate the title and body copy, use color to help signify the button’s purpose, and eliminate ambiguity.
In terms of tone, Never mind affords a more casual approach to this microcopy, and might be more suitable for brands that are notoriously laid-back, like Slack. Those two words maintains a very specific brand voice, and make a huge difference in tonality.
Option 4: Keep the ____
In cases where you want a clear, descriptive label but can’t afford a casual tone, you can use Keep to describe the secondary action.
This works especially well in cases where the user is deleting something. You’ll either want to keep it, or get rid of it. There’s no ambiguity in what either actions does. Clicking Keep subscription will maintain the status quo; clicking Cancel subscription will cancel the subscription.
While it does work better for deleting items, this approach doesn’t rely on specific phrasing or force a certain tone of voice on your product. As the longest of the proposed solutions, it does sacrifice the most screen real estate.
When in doubt, think of your user
As you can see, there’s no one-size-fits-all solution here. The trick to writing microcopy is to adapt to the specific needs of both your user and product. When applicable, incorporate your product’s tone of voice. And remember the power of a single word.
More posts about microcopy
- 8 quick ways to write microcopy that turns visitors into customers
- Microcopy best practices I learned from Lemonade
- Why we can’t let UX writing steal microcopy’s thunder