36

In a web app, some people think a "Delete" button should be obvious and bright red, signifying danger. The trouble is that this draws the eye to the button and may make accidental clicks more likely. So in general...

Should "dangerous" buttons be prominent? Or should they be inconspicuous?

"Dangerous" buttons are buttons that users should never click by accident. Typically these are secondary action buttons that cause destructive actions, regardless of whether they require confirmation or are undoable.

I wonder if this issue has been dealt with elsewhere. I notice that the icon on Microsoft Outlook 2007's Delete button is just plain black, whereas IIRC it used to be red a few years ago. The WordPress blog editing page goes even further: the Save button is big and easy to click, while the Delete button is a small plain hyperlink that does not attract the eye. There are many other examples.

I've seen this "inconspicuous destructive button" pattern used in lots of places, but haven't seen a decent reference to it. Is this issue discussed in any books or websites?

3
  • You may be able to sidestep the issue by providing an Undo function?
    – nielsbot
    May 2, 2011 at 19:27
  • 1
    As I commented on Gabriel's answer below: "If users keep clicking the delete button by accident, then that's a problem regardless of whether they can undo the deletion." So sure, make the deletion undoable. But then my question remains: what should the button look like? May 4, 2011 at 23:42
  • point taken....
    – nielsbot
    May 5, 2011 at 17:44

6 Answers 6

23

There is a small snippit of information I can add. Bruce Tognazzini posted on AskTog some years ago:

" It would appear at first glance that painting the close box red is a good thing, since that warns the user about its potential danger. However, a study done at Apple almost ten years ago found that the user's mouse gravitates toward red objects almost as though they were possessed with magnetism. The study forced us to abandon the idea of making close boxes and the Shut Down option red. “

It may add some sway to your decision, but I can’t say that I’ve been mindlessly clicking close for the past 9 years in Mac OS X!

2
  • This is exactly my experience. I remember a while ago I lived in a place with two taps (faucets) in the laundry. One was broken - it sprayed water all over the room. So I cleverly taped a big red X to the broken tap. But I discovered that my hand was inexorably drawn to the tap with the big red X... Should've known that Apple and Tog would have thought about this already! Oct 14, 2009 at 23:00
  • 1
    I've just noticed an occasion where my finger is inextricably drawn to a red button...on my iPhone. When I've got the keypad up during a call, there are "Hide" and "End Call" buttons. The "End Call" is red, and I always have to double think not to hit it.
    – Alastair J
    Nov 23, 2009 at 16:36
7

Depends.

For example, if your users are likely to use keyboard navigation (ie business applications) and the focus is automatically on the delete button, then the size isn't really going to matter if they expect hitting Enter is going to do something else.

Just as an example for why it depends.

Is delete a likely function within the context of the screen and tasks? Is a delete reversible?

Other things to consider is distance of the button from the target area - ie if you have to check a box on the left side of the screen and then move across to the far right to click delete then that matters; also the proximity of the delete to other options.

Things like icons (the red X or the garbage bin) can either reduce the target acquisition and recognition time ... or hinder it, if implemented incorrectly.

So, sorry - there's no right answer to this question.

Personally, I don't like Wordpress' new implementation - it makes the delete feature too hard to locate.

If people are accidentally clicking the delete button and it's not an oft used function then consider a two-step delete+confirm or select+delete implementation, or move the button, or add/remove iconography, make it bigger, more whitespace around it etc.

2
  • 1
    Completely agree :-) One other related idea would be to always provide an "undo" if at all possible. Resolves the problem in a different way.
    – adrianh
    Oct 14, 2009 at 6:03
  • While the answer will depend on the details of the individual case, and there is no right answer that applies to all cases, I intended the question to be general. Generally, do you make destructive action buttons stand out, or blend in? I will edit the question appropriately. Oct 14, 2009 at 20:48
5

Sometimes the delete button IS the primary action, then it should be more prominent, otherwise it should probably not stand out that much. I too like the way Wordpress implemented it with an insignificant plain link that gets a very noticeable red background when hovered.

I tend to think that what happens after you click the button is more important than how it looks. If the action is reversible (undo function) then it's not so dangerous, and the cost of accidently clicking it is very low.

I prefer to have an undo function to the delete action but if that's not possible then there should probably be some kind of confirmation. Lately I've been borrowing a design pattern from the iPhone in my Web apps. And that is when you click the delete button, it changes into a new button with the label "Confirm delete" or something similar. The delete action isn't performed until the "Confirm" button is pressed. I think that this is a more unobtrusive way of asking for confirmation than the oh so common Alert box which should be avoided at any cost:-)

4
  • 1
    Avoid alert boxes at any cost? They're simple (to implement and use), effective and recognisable. OK, so there are loads of alternatives (some more technical and impressive than others) but it's perhaps a little rash to consign the poor, defenseless little alert box to the scrapheap :-)
    – Sam K
    Oct 14, 2009 at 7:50
  • Good point. I intended the question to apply to secondary actions - I will clarify the question. If deletion is the primary action then I would make it prominent. Oct 14, 2009 at 20:52
  • I think what happens after you click delete (confirmation and undo) is a separate consideration. If users keep clicking the delete button by accident, then that's a problem regardless of whether they can undo the deletion. Oct 14, 2009 at 20:53
  • Re alert boxes, see "Should alert boxes be avoided at any cost?" at ux.stackexchange.com/q/4518/1103 Oct 12, 2022 at 21:34
1

I think it very much depends on the context of the button, and even on it's context within the overall application. There may be parts of your app where "Delete" is less "destructive" than in other parts. In that case, you have a consistency issue to address. Also, as rightly pointed out, sometimes delete is the primary action on a list or on a screen. So you have to balance what primary actions look like throughout the rest of your product with the functionality of the delete itself.

As a secondary consideration, what do users expect when it comes to delete buttons? The 'X' is fairly synonymous with delete functionality and the colour of the 'X' (you mentioned Outlook) doesn't seem to be too crucial. I believe users appreciate (if not necessarily expect) to be prompted to confirm a deletion - although that again goes back to the question of just how destructive a deletion might be and whether it's easily undo-able.

Whilst I believe that how things look is now as important as how things work (in an overall sense), I feel that this sort of thing is governed more by the operation as opposed to the aesthetic.

1

If "Delete" is dangerous, make you sure you ask the user "Are you Sure?"

I think all of the above comments / answers are good and relevant. Can I offer a second-layered answer to this question? In the end, I think one of the most important aspects of protecting users from wreaking havoc by accidentally clicking "Delete", is to provide a more fail-safe layer to the option:

By this, I mean, make sure you say "Hey! Are you sure you want to do this?"

1
-1

...Neither...

Your choice of changing the presentation of a functionality should not be based on the outcome of the action but on the actual use the user has for it.
If an action has a behavior that can be detrimental to the work-flow if selected by error then change said behavior to reduce the impact on workflow.
This way you keep UI layout as a function of usability only and your UI's behavior is streamlined with as little surprises as possible.

By experience users generally stop reading warnings after they become lightly acquainted with the interface unless you force them to.

I think, from comment, My answer deserves an example :

Take the delete button in Gmail web gui, it is easily accessible and bears no special marks from other options available, but the action is easily reversible so if clicked by accident it is easy to fall back to the original workflow and the disruption is, well, minor. So, will the Gmail interface benefit from making the button big and obvious or hiding it in a drop down ? no, quite the contrary.

If that same button, when clicked deletes all messages in the inbox by default then the difference in changing the gui and making it obvious or inconspicuous is literally dwarfed by changing the button's behavior to be more forgiving.

Of course this is a very broad answer for a very broad question, YMMV depending on the particular situation your interface demands. Nonetheless the answer holds true as most often this option will be part of the normal work-flow that can be performed in this particular gui and should be treated as such, no more, no less.

In conclusion, in my opinion, the only question that should apply in determining the presentation of the option is not it's effect but it's usability. If it is an option that is used often and part of the normal flow, make it prominent, if it is an option that is used only exceptionally then place it away in favor of more often used options.

7
  • "If an action has a behavior that can be detrimental to the work-flow if selected by error then change said behavior to reduce the impact on workflow." If the user clicks a delete button by mistake, then either they have just deleted something permanently, or they have to decline a confirmation message, or they have to undo the deletion. In all cases it is detrimental to the workflow. So the question in this case is: Should the delete button be prominent (to warn the user not to click it)? Or should it be inconspicuous (to reduce the likelihood of the accidental click)? Oct 15, 2009 at 4:08
  • Yes, delete can be clicked by error, What I mean, applied to this particular example, is that your UI experience would be better served by making delete harder to do via confirmation or easily undoable rather that hide the button in hard to reach spot on the GUI just because it is "dangerous". By altering the look of the gui for this purpose you potentially are conflicting with the usability needs of the interface. If the delete is irreversable one click action, making the button big red and flashy or hiding it will not help the user experience. Clicking it will bring major disruption
    – Newtopian
    Oct 15, 2009 at 5:21
  • cont. So basically my answer is that you are using the wrong mean to achieve your goal. Yes you can make your UI more self explanatory and make it clean as to what the button does (delete label is pretty clear here no need to make it different).
    – Newtopian
    Oct 15, 2009 at 5:28
  • Perhaps I've not been clear enough. I've never suggested hiding the button or making it hard to reach. I'm only asking about its appearance. Should the button be prominent? Or should it be inconspicuous? Oct 15, 2009 at 20:35
  • heuuu... Inconspicuous : not readily noticeable. hide : to put out of sight. Like saying "it's not black it is a very dark shade of grey". My answer is that it does not matter what color it is : you are looking at the wrong place for a solution to this problem. Making it inconspicuous or prominent may help a bit but each will bring their own problems that may very well outweigh the benefit whereas making the action less dangerous will help without need to change the GUI leaving presentation solely commanded by usability needs.
    – Newtopian
    Oct 16, 2009 at 2:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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