Passive fool protection

Due to the fact that my rather simple but convenient idea with protection against deletion inadvertently collected a lot of positive reviews, I decided to seriously consider the problem of "protection against a fool." In principle, the topic is quite interesting, and not beaten by many bloggers, so it should be useful to most of my readers.



What do I mean by fool protection? These are some interface details that prevent accidental deletion of information, which naturally leads to data loss, and the user's nerve cells.
')
From the proposal above it follows that each of us at least once found himself in a situation of such a “fool”, accidentally pressed the “Clear” buttons that grateful usabilityists placed next to the “Send” button, the information naturally got lost after that, and it was too lazy to enter it again. I am sure there were such cases in the life of every person. So let's get started.

Stage one. Problematics

Let's understand the most popular mistakes that site creators make. Of course, they are not sadists, they simply are not always guided by the mind during the creation of their offspring.

1. The focus of the cursor automatically becomes the cancel button, delete.
2. The delete, cancel, erase buttons are in suspicious proximity to the main navigation elements (such as: the next step buttons, useful links, etc.)
3. The elements that lead to irreversible consequences are arranged in such a way that they callore the eyes of the user.
4. Actions resulting in data loss are irreversible.

Stage Two. Solutions

In the second stage, it is necessary to deal with these problems, and decide how to prevent them.

So: focus.

Focus is very important. When filling out the form, the focus when you click the tab should go to the next field, and only after all the fields are filled - on the button to move to the next stage. In no case should the focus be set on the cancel button, delete button, etc. In the case of a user accidentally clicking on enter - in no case should there be a loss of information that has been entered for so long.

The cancel buttons themselves need to be located at some distance from the main button, but at the same time in direct connection with it. In this case, you can apply grouping by color, which I described in the note on forms . Still, as an option, it is possible (and it is necessary) to make the main button more of the cancel button about 1.5-2 times - then the user's view will itself fall on the main button, and not on the cancel button. It is also best to apply color separation: it would be best if the main button is brighter, richer than the delete button. Ideally, the delete button should be gray.

It is best of all if the loaves (buttons, aha) lead to consequences that cannot be undone, located far from the user's eye, but at the same time, not so that the user would search for it with a torch until the end of the centuries. Those. You need to position this button OUT of the first screen (the area in the browser that opens immediately after the page loads). As a positive example, the WordPress engine can be cited - its record deletion button is at the very bottom, you can’t inadvertently press it.

Ideally, all user actions can be undone. But practice, as always, is very, very far from ideal, so you need to take into account the three points listed above.

Stage Three. Ideological

I devoted most of my attention to this stage - in it I will describe several ideas that will help protect oneself from non-addictive user actions.

1. The delete / cancel button is disabled by default. There is a checkbox next to it, when you mark it, the button is activated - a very, very promising and intuitive idea, I recommend using it in your projects.

2. The delete / cancel button is disabled by default. No elements are located near it, except for text of approximately the following content: “Press the button to activate it”. Those. when you first press the button is activated, and after that - you can click on it. Accidental clicks are eliminated, but especially gifted people can crawl through this protection.

3. Put the link “delete”, when clicked, the deletion does not occur, but the corresponding button appears. Again, eliminates random clicks in this area.

4. If it is planned to place several functions in the system besides deletion, it is best to create a drop-down list with the “select action” item selected by default, which, of course, does not lead to anything. Next to the drop-down list there is another OK button to protect against random selection.

Now about the shortcomings:

1. If there is a checkbox next to the button, it is intuitive to most that this button activates the checkbox. Unfortunately, this is not clear to everyone.

2. Without an inscription, it is rather unclear what to do. And, as you know, not all people read the signatures to the elements of the interfaces before clicking on them.

3. There are practically no drawbacks, apart from the irritation of particularly impressionable personalities, for whom making an extra click for their own good is worse than their loss.

4. Monstrous protection, which, however, involves as many as three clicks, not every audience will support this decision: geeks will be unhappy, and ordinary users will not immediately understand. It is necessary to seek a compromise among the above.

The author: Jaroslav Birzul (DezmASter).
Source: Web Interface Usability Blog .
Image for post: Designfric