How to Design Destructive Actions That Prevent Data Loss

Data loss is one of the greatest frustrations users can experience with computers. They not only lose their data but also their time and money they put into it. For businesses, this could mean hundreds of man-hours and thousands of dollars lost. Don’t let this happen to your users.

A study found that human error causes 30% of data loss disasters [1]. This means that good UX design can prevent these disasters from happening. Below are a few techniques that’ll prevent your users from ever experiencing this frustration.

Use Red Warning Signals in a Confirmation

When users press a button with a destructive action, don’t execute it immediately. There’s a chance they may have pressed the button by mistake. What you should do instead is prompt users to confirm the action with a confirmation screen.

Do not make the destructive action button a normal color like blue. Instead, use a red button to warn users they’re about to commit a dangerous act. Red is a strong visual cue for warnings because it captures attention easily.

Avoid using red buttons for normal call to actions, otherwise you’ll alarm users. Reserve them for destructive actions only. Cool colored buttons are better suited for normal call to actions because they’re less alarming.

While a red button alerts most users, some may not take it seriously. Additional visual cues would make the warning stronger for everyone. This especially helps color blind and visually impaired users who have trouble seeing color differences.

To give your warning signal more strength, display an icon on the confirmation screen that represents the destructive action. For example, the icon for delete that users are familiar with is a trash can. When users see the icon, they’ll associate the current action with deletion.

You can strengthen the warning signal a little more by adding a red stripe to the top of the screen. Now, when users see the confirmation screen, they’ll have three red warning signals indicating that they’re in a serious situation and about to commit a dangerous act. This makes the user more mindful of their actions and the situation to prevent them from pressing the wrong button.

UX Benefit — Breaks Habitual Tapping

The more often users use an app, the more likely they’ll develop habitual tapping. Habitual tapping makes it easy to complete tasks faster and without thinking. But it also makes it easier to tap buttons with destructive actions on accident. Red warning signals can snap users out of this absent-minded tapping.

Red has a universal association with warning and danger and holds a negative connotation [2]. Many of the warning and danger signs we often see use red to communicate this sentiment. In design, a red button invokes fear of harm or loss in users and is used to help prevent mistakes. This works because humans have an instinct to avoid danger for survival.

Research shows that red-colored objects capture attention and facilitate congruent motor responses [3]. This means users are likely to respond faster and more accurately when they see red buttons for destructive actions. The more attention users place on a task, the better they’ll perform that task.

Make the Dialog Text Concise

Red warning signals can prevent destructive accidents, but it’s not the only thing you should consider. You also have to ensure that the dialog is easy to scan by writing it in a concise format.

Instead of asking users “Are you sure you want to X?”, put a question mark at the end of the dialog title. For example, the title “Delete Account?”, communicates “Are you sure you want to delete your account?” in fewer words.

Not only that, but don’t use wordy sentences to explain what will happen after confirmation. Instead of informing users, “If you delete your account, you will permanently lose your profile, messages, and photos,” itemize what they’ll lose in a list format so they can scan it quickly.

In the example, making the dialog concise reduced the text from 25 words to just 9 words. This results in a dialog that’s far easier to scan and understand.

UX Benefit — Better Comprehension of Consequences

The purpose of a confirmation dialog is to describe the consequences of destructive actions. Users need to read and understand these details otherwise they may get an unexpected result. But this is difficult to do with a wordy dialog.

Most users skip wordy text because it takes time and effort to read. Concise text prevents skipping and helps users perform their task faster, make fewer errors, and remember more information [4]. When the dialog is concise, users are better able to comprehend the consequences of their action and make the right decision.

Center Align the Layout

The concise text makes the dialog easier to scan. But you can go further than that and make the entire confirmation screen easier to scan by center aligning the layout. A center aligned layout places the icon in line with the dialog text so that users can scan them together. It also makes the screen symmetrical and the icon more prominent to prevent them from glossing over it.

UX Benefit — Less Work on the Eyes

When looking at a wordy dialog and a left aligned layout using an eye tracking gaze plot, it’ll have more eye fixations and longer saccades. A concise dialog and center aligned layout requires less visual effort. With fewer eye fixations and shorter saccades, users can scan the screen faster to make an informed decision.

A center aligned layout also allows users to scan the screen in a single visual direction (top to bottom). They don’t need to move their eyes across the screen and only need to focus on the center of the screen. With a left aligned layout, users need to scan the screen in two visual directions (left to right & right to left). Their eyes have to do more work, which slows down their task.

Reserve Red Warning Signals for Confirmations

When the destructive action is on a confirmation screen, you want the user’s full attention. Conversely, when the destructive action is not on a confirmation screen, you don’t want to call attention to it. Doing so compels them to press it when they have no intention to commit an act of destruction.

Don’t use a red warning signal on a destructive action if it’s not on a confirmation screen. For example, a settings screen can have a “Delete Account” button, but it shouldn’t look like a call to action button to draw unnecessary attention.

It’s better to make the destructive action a standalone button with only a red text label. Using more red than necessary can cause users to mistake it for the main call to action button on the screen.

UX Benefit — Makes Accidents Harder to Occur

The more times users are on a confirmation screen, the more chances they have to press the wrong button. By understating the destructive action on other screens, they’re less likely to get to the confirmation screen by accident. This keeps them further away from danger.

Separating destructive actions from normal ones on other screens also keeps users away from danger. Users won’t mistake it for a normal call to action button and want to press it.

Provide an Undo Button Post Confirmation

Even with a confirmation screen, accidents can still happen. Some users may still misread the dialog or press the wrong button. After the confirmation screen, offer users an undo button with a message telling users the action was performed.

Place the undo button and the completion message in a notification banner at the bottom of the screen. You can make the undo button temporary or persistent depending on the context of the destructive action.

A temporary undo will make the banner automatically disappear after a few seconds. A persistent undo displays the banner until the user dismisses it by pressing a “close” button. Be aware that the technical implementation of a persistent undo is more complicated than a temporary one.

UX Benefit — Allows Users to Recover from Accidents

The option to undo a destructive action allows users to recover from accidents to prevent loss of data. Loss of data has serious consequences for businesses and people’s lives. An undo button post confirmation doesn’t just save the user’s data, but sometimes their life’s work.

Prompt Users to Type to Confirm

If an undo button is not a workable option, you can prompt users to type the destructive action in a text field to confirm. Prompting them to type to confirm makes them conscious of the destructive action. While it’s easy to press the wrong button by accident, it’s impossible to type the action by accident because it requires many steps.

This technique is not efficient for destructive actions that users frequently use. For example, deleting a post is a common action on social media apps. Requiring users to type to confirm every time would make the process inefficient. Only use type to confirm on rare destructive actions.

UX Benefit — Ensures Users Are Confirmation Conscious

It’s much easier to press a button unconsciously than it is to type a word. When users type, they have to think about what they’re typing and press the right keys. There’s more room for mistakes compared to pressing a button. This keeps users conscious of their confirmation to prevent accidental button presses.

Data Loss Disaster

When users get to a confirmation screen, they’re on the brink of disaster. Pressing the wrong button can destroy their data if you don’t take measures to prevent this from happening. Apply these techniques to your app and you’ll save your users from experiencing a data loss disaster.

References

1. The Cost of Lost Data

2.  Color Red: Implications for Applied Psychology and Marketing Research

3.  The color red attracts attention in an emotional context

4.  Concise, Scannable, and Objective: How to Write for the Web

Book

Affiliate