Design of destructive actions that prevent data loss
Data loss is one of the biggest frustrations users can experience. They lose not only their data, but also the time and money invested in it. For a business, this can mean hundreds of man-hours and thousands of dollars.
Research shows that 30% of data loss disasters are caused by human error [1]… Good UX design can prevent this. Below are the various UX techniques that you can apply to your app so users don t get frustrated.
Use red warning signals to confirm action
When users click a button with a destructive action, don t do it immediately. They may have pressed this button by mistake. Instead, you should prompt users to confirm the action with a confirmation screen.
The call-to-action button on the confirmation screen should not be a normal color such as blue. Instead, use the red button to alert users that they are about to take a destructive action.
Avoid using red buttons for a regular call to action, or you will confuse users. Reserve red buttons for destructive actions only. Cool-toned buttons are better for a regular call to action because they are less disturbing.
While the red button will alert most users, some may not take it seriously. Adding additional visual cues will amplify the warning for all users. It will also help color blind and visually impaired users who need visual cues other than color.
To emphasize the seriousness of the action, the red warning signal needs more strength. You can accomplish this by adding an icon to the confirmation screen that represents the destructive action.
For example, the delete icon that users are most familiar with is the trash can. When users see this icon, they know they are going to delete something without reading the text.
In addition, adding a red bar at the top of the screen further amplifies the warning signal. Now, when users see the confirmation screen, they will have three red warning signals indicating the severity of the situation.
Habitual tapas
The more often users use the app, the more likely they are to develop familiar tapes. Habitual tapes allow you to quickly and easily complete tasks without hesitation. But because of this, the likelihood of accidentally pressing buttons with a destructive effect increases. Red warning signals can wake users out of this distracted click state.
Red has a universal association with warning and danger, and has a negative connotation. [2]… Many warning and danger signs use red to convey this feeling. In design, the red button instills fear in users of danger or loss and is used to prevent mistakes. It works because people have an instinct to avoid danger.
Research shows red objects attract attention and promote congruent motor responses [3]… This means that users can react faster and more accurately when red buttons are used for destructive actions. The more attention users pay to a task, the better they get it.
Condense the dialog box text
Red warning signals can prevent accidental destructive actions, but this is not the only thing that you should consider. You should also make sure that the dialog is easy to scan by writing it in a compressed format.
Instead of asking users “Are you sure you want X?”, Put a question mark at the end of the dialog box title. For example, the heading “Are you sure you want to delete your account?” says in a few words: “Are you sure you want to delete your account?”
Moreover, don t use wordy sentences to explain what happens after confirmation. Instead of writing, “If you delete your account, you will permanently lose your profile, messages and photos,” specify what they will lose in a list format so they can quickly scan it.
In the example above, by making the dialog box condensed, we reduced the text from 25 to 9 words. Such a window is much easier to scan and understand.
Better understanding of the consequences
The purpose of the confirmation dialog is to describe the consequences of destructive actions. Users must read and understand these details, otherwise they may get unexpected results. But this is difficult to do when the dialog is verbose.
Most users skip verbose text because it takes time and effort. Concise text prevents skipping and helps users complete their tasks faster, make fewer mistakes and remember more information [4]… When the dialog box is concise, users can better understand the consequences of their actions and make the right decision.
Align the layout to the center
The short text makes it easier to scan the dialog box. But you can go a step further and make it easier to scan the entire confirmation screen by centering 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 more symmetrical and the icon more visible.
Less work for the eyes
When looking at the verbose dialog box and left-aligned layout, there will be more eye fixations and longer leaping gaze movements. A concise dialog box and center-aligned layout require less visual effort. With less fixation and shorter eye movements, users can scan the screen faster to make informed decisions.
The center-aligned layout also allows users to scan the screen in one visual direction (top to bottom). They don t need to move their eyes around the screen, they only need to focus on the center of the screen. With a left-aligned layout, users must scan the screen in two visual directions (left to right and right to left). Their eyes have to do more work, which slows down the task.
Use red alerts only for confirmation forms
When the destructive action is on the confirmation screen, you need the maximum attention from the user. Conversely, you don t need to grab the user s attention when there is no destructive action on the confirmation screen. Otherwise, you force users to click a button when they are not going to delete data.
Do not use the red destructive action warning signal if it is not on the confirmation screen. For example, the Settings screen might have a Remove Account button, but it shouldn t look like a call-to-action button to avoid drawing unnecessary attention.
Better to make the destructive action a separate button with a red text label. Using more red than necessary can lead users to mistake it for the primary call-to-action button on the screen.
Minimize accidental clicks
The more often users are on the confirmation screen, the more likely they are to hit the wrong button. By refraining from destructive action on other screens, they are less likely to end up on the confirmation screen by accident. This keeps them away from danger.
Separating destructive actions from the usual on other screens also protects users from danger. Users won t mistake it for a regular call-to-action button and won t want to click it.
Provide a cancel button in the confirmation window
Even with a confirmation screen, random destructive actions can occur. Some users may not read the dialog box correctly or click the wrong button anyway. After the confirmation screen, prompt users for a cancel button with a message that the action has been taken.
Place the cancel button and progress message in the notification banner at the bottom of the screen. You can make the undo button temporary or permanent, depending on the context of the destructive action.
Temporary cancellation will make the banner automatically disappear after a few seconds. Permanent cancellation displays the banner until the user rejects it by clicking the Close button. Remember that the technical implementation of permanent cancellation is more complex than temporary.
Give users a way to undo
The ability to undo a destructive action allows users to correct an accidental action to prevent data loss. Loss of data has serious consequences for business and people s lives. The undo button in the confirmation window not only saves the user s data, but sometimes the work of his entire life.
Encourage users to print an action confirmation
If the cancel button doesn t work, you can prompt users to enter a destructive action in the text box to confirm. By encouraging them to print confirmation of an action, you make them realize how destructive it is. While it is easy to accidentally press the wrong button, it is not possible to print an action confirmation by accident because it takes many steps.
This method is not effective for frequently used destructive actions. For example, deleting a post is a common activity on social media. Requiring users to type a confirmation every time would make the process cumbersome. Use validation data entry only for infrequent destructive actions.
Make sure users are aware of the consequences of their actions
It is much easier to unconsciously press a button than it is to type a word. When users are typing, they have to think about what they are typing and press the correct keys. There is more room for error compared to clicking a button. As a result, users will not accidentally press buttons.
Data loss is a disaster
When users hit the confirmation screen, they are on the brink of disaster. Clicking the wrong button can destroy their data if you don t take steps to avoid it. Apply these UX techniques to your application and you save your users from catastrophic data loss.
Links [en]
-
Data loss cost
- Red: Implications for Applied Psychology and Marketing Research
- Red attracts attention in an emotional context
- Brevity, scannability, purposefulness: how to write for the web