Preventing users from accidentally deleting items

Question

From an icon's appearance, and from its position relative to other icons in the toolbar, I want to make it clear that its action is risky.

I added a vertical separator which visually separates the icon from the other icons (which are for low-impact, reversible actions). Each icon has a tooltip. When clicked, a modal confirmation dialog box appears, so the user still has time to cancel the decision. But I want to give a more "please be sure before you click" flavor to the icon, or to make it stand out from the others.

What can I do?

Answer 1

Your goal is that users do not accidentally delete items.

You have three general ways to achieve this:

1. Using design standards

The trash can icon and the color red are both standard for Delete-type actions. Your way of seperating the icon works, too. Another way would be to visually group all (if there are more) destructive actions together, as on the GitHub project options page:

2. Friction

Friction is everything that hinders a user from accomplishing his goals. Therefore, it is best to reduce friction wherever possible – with the exception of destructive actions, of course.

Confirmation dialogs

Operating systems often use a modal confirmation dialog box for this, where you have to confirm the actions once more. Browsers use this when you're closing multiple tabs at once.

Confirmation Name-Input dialog

This is often used on websites when deleting whole projects, as it is a lot of friction. The user faces a confirmation dialog with much text and is forced to type the name of the project he wants to delete. Probably not the way to go here, as I don't see how this gracefully handles something like a multiselect-multidelete, which your software might choose to add.

Hiding destructive actions under a dropdown

Please see @harshikerfuffle's answer.

3. Reversibility

Have you ever cared about deleting an email? Has any program or website ever stopped you? Probably not. The reason is simple: These emails aren't really deleted, they are simply tagged with archive and hidden from most other views, with the notable exception of search (sometimes.) You can design your system to only keep archived items for a given amount of time and/or to offer a simple Undo action, eg in a snackbar:

Answer 2

I would start by giving it another color. Red is usually associated with danger (example from Bootstrap).

More important is using a confirmation popup, which you already seem to do. Or use a 'soft deletion', which the user can undo later.

Answer 3

The destructive action can be hidden under ellipses or a 'More' option to make it less accessible to the user/ to prevent accidental clicking. Like this

Answer 4

You can put a yellow triangle with an exclamation mark next to the icon.

Answer 5

There already seem to be enough good answers, and I would probably go with red myself, but @maxathousand asked me post a comment of mine as an answer.

While red is generally seen as "danger" or "stop", that is fairly recent and may be culture specific (for instance, the Chinese consider red to be auspicious (which once led to me wearing some very gaudy "auspicious underpants" for Lunar New Year when I was working in Shanghai)).

If you really want to speak directly to the lizard hind-brain, then use black & yellow - either as the icon colo(u)r, or as a border to delineate it.

See, for instance, Why does black and yellow indicate danger? on our S.E. biology site, which has some interesting explanations as to why we, and other creatures, fear this combination.

Or, just think of wasps & bees, maybe you know of some snakes & frogs which are black & yellow?

In industry, I have often black & yellow floor markings delineating potentially dangerous areas, black & yellow tape on drums of hazardous materials, etc. I would not be surprised if the same login holds true for "Police line! Do not pass!" tape.

So, perhaps if if would blend well with your chosen colo(u)r scheme, this could be an option?