Microcopy for Destructive Actions

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.

“Microcopy can help turn an otherwise frustrating experience into a simple, straightforward one.”

The Interaction Design Foundationdefines 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

Ah.

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.

“Microcopy can make or break a product’s usability.”

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, likeSlack. Those two words maintains a very specific brand voice, and make a huge difference in tonality.

This more casual approach doesn’t work for every company. And it shouldn’t. Can you imagine if there was an error in your online banking interface and the response you got was: Oops! Look like we just lost your $10,000 transaction.

Users want serious tools to maintain a serious tone. So while Never mind looks like a near-perfect solution for cases where you can afford to be casual, it doesn’t work for every product.

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.

Reposted from: https://www.invisionapp.com/blog