24

From the icon look and its position/relation to other icons in a row, I want to give the impression that the action is risky

I added a little line that visually separates the icon from the rest (reversible, low-impact actions). Icons have tooltips. When clicked, a modal window appears, so the user still has time to cancel their decision. But I want to give a more "please think twice before clicking" flavor to it or make it stand out from the rest. enter image description here

5
  • 1
    A bin icon already strongly implies risk. Most importantly, make sure you prompt for confirmation (with a description of what action the user is about to trigger and its consequences), or have an undo feature. Nov 28 '20 at 23:38
  • 1
    Red, red, red!!!! Although our lizard brain also fears black & yellow (or, at least, regards those colo(u)rs as a ****severe*** warning) Nov 29 '20 at 19:05
  • Also, "are you sure that you are certain that you really want to...?" Nov 29 '20 at 19:06
  • @theonlygusti Your comment sounds like the start of an answer. Would you like to post it as an answer instead so the community can vote on its merits? Nov 30 '20 at 14:27
  • 1
    @MawgsaysreinstateMonica Your comments sound like the start of an answer. Would you like to post it as an answer instead so the community can vote on its merits? Nov 30 '20 at 14:29
29

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:

GitHub Danger Zone, used for destructive actions, showing a red border around all destructive actions. All buttons have a red text color.

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.

GitHub project deletion box

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:

Gmail Undo snackbar

6
  • 4
    Most of this is good, but undo is not. Offering undo only helps if the opportunity window for undo is accessible (not disappearing after a short time interval or after navigating away), discoverable (not buried somewhere the user might not be able to find it), and discovered (by loss of data being noticable). It doesn't help if the data being deleted is rarely used and you only realize you deleted it a year later when the opportunity to undo is long gone. Nov 29 '20 at 5:43
  • 2
    @R..GitHubSTOPHELPINGICE These are all implementation details, not arguments against the idea of "undo" to begin with. You can help to make the undo requirement discovered by carefully designing the software's response to the "delete" command. You can also do what sites like SE and Wikipedia seem to do, that is, retain "deleted" data forever, so it doesn't matter if the problem is discovered a long time later. If it's the sort of data you're not allowed to retain forever, introduce more friction - possibly including a requirement for multiple users to confirm the deletion. Nov 29 '20 at 14:40
  • 1
    Maybe I'm getting too tired right now...but it looks like this post, while excellent in its own right, doesn't actually answer the question? Nov 29 '20 at 14:45
  • @BrianDrake: They are not "implementation details". An implementation detail is whether you use a file or a table in an SQL db to store the info needed for undo. The things I discusses are exactly what UX means. Nov 29 '20 at 20:19
  • @BrianDrake It answers the question behind the question.
    – Sean
    Nov 30 '20 at 15:55
30

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.

5
  • 6
    + add a red exclamation mark in the confirmation pop up.
    – PhillipW
    Nov 28 '20 at 9:20
  • 4
    Note that, in general, relying on the color red may reduce accessibility for many color-blind persons. Nov 29 '20 at 12:22
  • @Glorfindel: Isn’t red just a brownish-gray for people with red/green blindness?
    – Michael
    Nov 29 '20 at 17:20
  • 1
    Yes, that's why you shouldn't rely on it as a primary indicator. The author of the question has already provided other measures (the little line, the confirmation dialog) which are helpful to color-blind people as well. If all others icons are white, and the risky icon is brownish, they will notice that too.
    – Glorfindel
    Nov 29 '20 at 20:42
  • 1
    The OP could also make the icon red on hover if they don't want it to stand out too much if you aren't trying to execute that action.
    – dalearn
    Nov 30 '20 at 4:00
15

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

enter image description here

3
  • 9
    One issue with this is that it makes it annoying to delete items in bulk, since you may potentially have to click three separate buttons (More + Delete + Confirm) for every single item. Nov 28 '20 at 6:20
  • 2
    depends on how important or frequent the delete action is + what implications it can have. Nov 28 '20 at 15:38
  • 3
    Normally, unimportant or rarely used options are hidden behind "more". That those are (or also feature) the dangerous options is astonishing. And as others allude, making a common task arduous doesn't make it any safer. Actually, muscle-memory soon negates any perceived extra safety. Nov 28 '20 at 21:41
2

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

1

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?

2
  • 1
    +1 black and yellow is also better for red-green colorblind individuals which make up a nontrivial proportion of the population Nov 30 '20 at 21:14
  • I would never associate black and yellow in a software interface with "danger". Maybe with meaning "under construction".
    – Cody Gray
    Dec 1 '20 at 5:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.