Should "Yes, delete it" be red, or green?

http://ux.stackexchange.com/questions/49991/should-yes-delete-it-be-red-or-green/

by tsudot • 12 years ago

148 103 12 years ago

ux.stackexchange.com

jamesaguilar• 12 years ago

IMO, cancel should be neutral colored, and Delete should be "warning" colored (be it red or orange).

Edit: I predicted the top response. Yay!

stronglikedan• 12 years ago

Although I prefer the method in the best chosen answer, if I had to choose between red and green, I would choose green. You are confirming an action when choosing yes. The button to cancel the operation should be red.

jonahx2• 12 years ago

You are also being warned about something, and warnings are red. The "warning" aspect should trump the "confirmation" aspect, and imo it's not even a close decision.

tsudot2• 12 years ago

Another discussion which got started in the comments[1] is whether to place the 'Delete' button to the left or right.[2]

[1] http://ux.stackexchange.com/questions/49991/should-yes-delet...

[2] http://www.nngroup.com/articles/ok-cancel-or-cancel-ok/

babuskov• 12 years ago

Brings back the old Gnome vs KDE, Linux vs Windows thing with OK and Cancel buttons ;)

See this discussion from 2002:

http://markmail.org/message/hpkehtmximjn3cl5

quesera• 12 years ago

That's really the MacOS vs MSWindows disagreement, and then the "whom should we emulate?" disagreement among Linux desktop people. Oh, and the OpenWindows and CDE people before them.

I'm biased, but I think of this as another one of those "well, Microsoft got it wrong, but people are so used to it now that we have to perpetuate it or we look like we're just willfully antagonistic" situations.

User studies can be produced to prove either side, of course.

analog31• 12 years ago

Just a note that X percent of the population is colorblind. I'm not, but I have a couple of colleagues who are, and I've made graphics that are unreadable for them.

seanmcdirmid2• 12 years ago

Its a good idea to use "Delete" in addition to color, multiple signals can avoid problems like color blindness.

yaur• 12 years ago

Monochromacy is somewhere around 1 in 10 million. Typical red-green color blindness won't have a problem with the shades chosen.

comex• 12 years ago

Neither. Wherever possible, design your code to use undo rather than confirmation, Gmail-style. Saves the user time and avoids training them to click through confirmations (and perhaps eventually be sorry).

tsudot2• 12 years ago

design your code to use undo rather than confirmation

I can think of two ways to implement undo.

1. Use flags in the database, this method has its own drawback since the entry is not really deleted but flagged as one.

2. Client side. Delay the actual delete request to the server.

a_bonobo2• 12 years ago

Could you just delay the COMMIT for a few minutes/seconds/until the user navigates away?

And if the user clicks UNDO, do a ROLLBACK?

Edit: Of course, if anything goes wrong before the COMMIT, you loose the transaction.

darylteo3• 12 years ago

There actually is another way. Event-Sourcing. I've never seen this technique in my limited experience though, but theoretically this would be the optimal way to implement such a feature, and obviously has to be a engineering decision from the get-go.

Alternatively you could also have a very primitive form of version control : recycle-bin (edit: actually this is the same as point 1 =) )

tiziano88• 12 years ago

I think no one would implement it client side in practice; if the user clicks delete and immediately closes the browser, what happens to the action?

MichaelApproved• 12 years ago

The delete flag in the DB could be null or the date the delete was requested. You could batch the commit cleanup hourly giving a delete at least X hours before it's committed.

noblethrasher• 12 years ago

It depends on how you interpret “delete”. Most people seem to want to make it synonymous with “erase”, but it should really mean something like “forget”. In that case, it’s easy to see how you would implement “undo”: just drop all (root) references to the record(s) in question and collect as garbage at a certain time (in, say, 30 days).

jowiar• 12 years ago

One standard "undo" mechanism is to store a stack of actions (per user), with each action having a method to undo itself.

kyllo• 12 years ago

Another standard way is with the command pattern, and using one "undo" stack, with another "redo stack". When you perform a command, a command object is pushed onto the "undo" stack. When you undo a command, it's popped off the stack, its undo() method is called, and it's pushed onto the "redo" stack. When you redo a command, it's popped off the redo stack, and executed. When you execute a new command (not an undo or redo) you push it onto the undo stack and clear out the redo stack.

See this SO question for further detail and links: http://stackoverflow.com/questions/701131/data-structure-use...

qq66• 12 years ago

Making an action undoable often more than doubles the development cost of that feature. Google can do it, for a small startup it only makes sense in a few situations.

raldi2• 12 years ago

How many situations does the small startup have where they're going to be destroying something?

MarkMc• 12 years ago

It is particularly difficult in a collaborative application with 'hard' links between records. For example, consider this scenario:

(1) Sally deletes an employee record

(2) Bob deletes that employee's department

(3) Sally tries to undo the deletion of the employee - will the employee be restored without a department?

mbesto• 12 years ago

I 100% agree `Undo` is the best way to go about this. Equally, I'm very curious to hear how others have implemented this in their app. The complexity for such a small feature is actually quite high, because we start playing with the database (and therefore, in many cases a robust ORM)

Anyone have experience with doing something like this in Rails?

new_guy123• 12 years ago

It doesn't - the undo action is not a permanent option since it is only a replacement for a yes/no prompt. The implementation then could be a delayed action. Might not work for all use cases, but good enough for most, especially in a start up situation.

troym2• 12 years ago

Making an action undoable often more than doubles the development cost of that feature.

Every time I've added the feature, it's bordered on trivial (start a timer to execute the actual delete request, show a link to cancel the request, hide the DOM element).

I suppose if you were doing all the work server-side, then yah, it would be difficult. But the way GOOG does it (IIRC) it's not that hard at all.

grn• 12 years ago

But you can still mark the buttons with colors so your users will make less mistakes. I think that the two issues are orthogonal.

SixSigma• 12 years ago

Saving dev costs by making your users pay with their data loss is extraordinarily short sighted. If you cant code with an undo feature, perhaps this is not the discipline for you.

enscr• 12 years ago

I've found Undo prone to failure. E.g.

- In Android's gmail, sometimes undo does not recover the message (probably a bug)

- When I'm swiping pictures in Android and accidentally delete a picture and by the time I realize, the momentum of my action has already dismissed undo.

- Gmail undo : disappears after a time span. What if I delete & suddenly get distracted by something. By the time I return, I've to dig through trash to recover my action.

mantrax3• 12 years ago

Doesn't help if you click somewhere by accident and delete an email without noticing.

MarkTee2• 12 years ago

All you need to do is ensure that the undo option is highly visible (just like Gmail's; I've never caused irrevocable damage while using their web client).

pbreit• 12 years ago

No, that's confusing, even to intermediate users. A dialog box is fine with the "Delete" action more pronounced. Another nice touch might be keeping around a "trash" that can be recovered from. No need to get too clever.

jrockway• 12 years ago

For most operations, "delete" should be reversible, so there are no consequences for clicking delete. If you really get the UI right, you shouldn't need confirmation. (Gmail's message like "this post has been archived <unarchive>" after you archive a message seems about right to me. It implies something like "you did something destructive, and we can cancel it right now. or you can undo it manually later." Much better than confirm/cancel dialogs.)

For things like "yes, I'm afraid of the NSA, wipe those tapes forever", that's another issue. In that case, you want a "flow" rather than a button, I think.

bobbles2• 12 years ago

"Would you like to Cancel?"

"OK" / "Cancel"

MarkTee2• 12 years ago

That's confusing; they both appear to cancel whatever action was just performed.

bobbles2• 12 years ago

Yes.. this is the point

halcyondaze• 12 years ago

Why not have a Yes and No, instead of Yes, delete it and No, keep it? Seems like it solves the problem.

batiudrami• 12 years ago

Ideally the button should describe what is going to happen so people who skim read the dialogue still know what it means - see https://news.ycombinator.com/item?id=5018918

kzrdude• 12 years ago

I don't understand why Yes/No buttons are still being used everywhere. It's stone age.

superflit• 12 years ago

One place that I worked the majority of users were from Asian descent. For them the red was GOOD, Important, Money good sign.

For me red was always ''warning'', stop, danger...

So I don't think red is a good color or even if it has to have color..

acchow• 12 years ago

I'm of Asian descent and cannot confirm. They still use red stop signs and traffic lights. Red is also the color of blood - similarly, there's a fair amount of literature supporting the evolutionary emergence of red as a signal of danger.

dalke2• 12 years ago

Really? I thought it was one of those low-evidence beliefs. Consider http://www.ncbi.nlm.nih.gov/pmc/articles/PMC3933460/ :

Recent research has shown that the color red influences psychological functioning. Red is hypothesized to be linked to aggression and danger in evolution, and these links are enhanced by culture-specific uses of red. Thus, color meanings are thought to be grounded in biologically based proclivities and learned associations. However, to date, there has been no direct evidence for the influence of experience on the red effect. This study focused on whether experience could change the psychological effects of the color red. In the context of the Chinese stock market, contrary to the meaning generally associated with red as negative and green as positive, red represents a rise in stock price and green stands for a decrease. An experiment using a 2×2 between subjects factorial design demonstrated that red (compared with green) impaired Chinese college students’ performance on an IQ test (in accordance with the red effect), but the opposite effect was found among stockbrokers. These results provide direct evidence of learned color meanings, in support of the general model of color effect. ...

which suggests that red has a non-trivial learned color meaning on people, and leaving open the possibility that it's mostly, if not all, culturally based.

Or consider http://www.ncbi.nlm.nih.gov/pubmed/20677892 :

in a series of 7 experiments we demonstrate that women perceive men to be more attractive and sexually desirable when seen on a red background and in red clothing, and we additionally show that status perceptions are responsible for this red effect.

They hypothesize that red is not a general signal of danger, but has many meanings. NOTE! http://www.ncbi.nlm.nih.gov/pubmed/23398185 points out that there's likely publication bias in this experiment, so there might be no signal. I bring up the study anyway to point out that many people have different interpretations for the "evolutionary emergence", and the evidence is low.

Or consider http://www.ncbi.nlm.nih.gov/pubmed/23148465 :

Claims of universality pervade color preference research. It has been argued that there are universal preferences for some colors over others (e.g., Eysenck, 1941), universal sex differences (e.g., Hurlbert & Ling, 2007), and universal mechanisms or dimensions that govern these preferences (e.g., Palmer & Schloss, 2010). However, there have been surprisingly few cross-cultural investigations of color preference and none from nonindustrialized societies that are relatively free from the common influence of global consumer culture. Here, we compare the color preferences of British adults to those of Himba adults who belong to a nonindustrialized culture in rural Namibia. British and Himba color preferences are found to share few characteristics, and Himba color preferences display none of the so-called "universal" patterns or sex differences.

Since you say that there is a "fair amount of literature" on this topic, can you point it out? I've not been able to find anything rigorous which supports your statement. Certainly nothing which is stronger than that last citation.

seanmcdirmid2• 12 years ago

Red is still the color of emergency, alert, STOP, etc..in China. We are at orange alert on pollution right now, if it gets any worse, we will be on a red alert.

Now if we are going to talk about the meaning of check marks and crosses in the Japanese market....

judk• 12 years ago

Does it matter which shade of brown you choose?

/colorblind

coreymgilmore• 12 years ago

Green denotes a good, positive action. Red denotes a warning, negative message.

That being said, I would have a tendency to put [yes delete] as green. If this was a "delete forever and destroy the world" button, then [yes delete] should be red.

It is up to you based on how permanent this delete is. As has been noted, Gmail style with undo is best.

zaidf2• 12 years ago

I'd also drop the "Yes" given we're auto-programmed to agree and make popups disappear. "Delete it" is more powerful.

Demeno• 12 years ago

As suggested, I'd change "Delete it" to just "Delete", might seem minor, but it's less to read and the word "it" doesn't add any information the user didn't already have...

zaidf2• 12 years ago

Agree!

zhte415• 12 years ago

I would prefer solid blue for a confirming step, and a blue border with no fill for a cancel button. The contrast of fill vs no fill for the button highlights better than two colours.

aaron695• 12 years ago

Another SO set up question :)

But what I did find interesting was this comment getting so many votes -

117 "Neither, if you're red-green color blind like 10% of men. – Roddy of the Frozen Peas Jan 12 at 5:31"

With a obvious reply, but less votes -

53 "@RoddyoftheFrozenPeas (1) while some degrees of color blindness are quite common, thinking that 10% of men are red/green color blind is totally insane, (2) solely using a color to point out something is bad for color blinds, but if the color is something "extra" on top of the main information, then it's perfectly fine. I'm quite surprised and worried that your horribly wrong comment managed to raise 4 votes... – Lohoris Jan 12"

It's amazing people really can't think for themselves and just meaninglessly up-vote because it seems the right thing to do, as compared to what the logical thing to do is.

kenrikm• 12 years ago

Indeed, even if you're colorblind I would hope they are able to read. As a backup if the first two fail, icons are a fallback - trash can etc..

acjohnson552• 12 years ago

Nearly 10% of men are colorblind, though not all red/green. It is by far the most common type though, and I'm red/green colorblind. A common misconception is that reds and greens are indistinguishable to people like me. That's not really the case.

Most reds look red and most greens look green. It's just that some particular shades of each are ambiguous. For me, the reds and greens produced by displays tend to be tougher to distinguish than natural hues, but the shades in the Stack Exchange question are as different as can be. It's tough to explain. It's also so subtle that many people with my particular type of colorblindness live and die without ever knowing the difference.

I only learned I was colorblind after being explicitly tested for it in 6th grade. I was pretty surprised! Though it did explain how I always seemed to mess up school assignments that involved coloring maps.

DanBC• 12 years ago

Wikipedia quotes a rate of 8% for men and 0.5% for women, for people with a northern european background. (This is for red green colorblindness).

It's a shame people don't check online sources before calling a roughly accurate figure "insane".

sturmeh• 12 years ago

Red should be associated with risk (where care and consideration is warranted), not 'bad' (you should not do this).

Thus the act of deleting should be red, but the act of not deleting should NOT be green, rather a neutral tone.

acjohnson552• 12 years ago

As stated in the accepted answer :)

But yes, that was my immediate reaction, too. Not the most mindblowing Stack Exchange Q&A I've encountered on the HN front page.

dmoy• 12 years ago

If you plan on never internationalizing your code, this works. If you take your code into China, for instance, this might not work.

mladenkovacevic• 12 years ago

Colours are fine.. Either way works although for my sensibilities the red works for the Delete button. I am red/green colourblind and the two have distinct enough values that I can easily tell them apart.

But I think YES and NO shouldn't be there. It's an extra piece of information that demands the original context of "Do you want to delete this album". It might seem like a small mental investment to ask of your users but people have varying degrees of comprehension at different times, whether due to temporary distraction or because of more permanent conditions such as dyslexia and such.

Instead I would just say "You are about to delete this album" And have the buttons read "Cancel" and "Delete"... Or something similar.

Undo would also be preferred as comex mentioned.. Or even better a git-like revision history so you can undo any action in the past. This comes with other technical challenges I'm sure but it's the most powerful solution.

htk• 12 years ago

The accepted answer is pretty close to what iOS uses on its UIActionSheet control.

They use the concept of "destructive actions", and delete would fit the bill.

Destructive actions will show in red, and the rest shows in the default button color.

nighthawk24• 12 years ago

red

freefrancisco• 12 years ago

It should blink and beep, and have a 60s Batman yellow callout around it.

JungleGymSam• 12 years ago

Why is the question so long? That's causing part of the confusion. A simple "Delete album? Yes/No" is more than enough.

joshuak• 12 years ago

(1) Ask a simple question "Delete?"

(2) Don't use many words when 1 will do. "Cancel" "Delete"

(3) Don't use words when an icon will do.

(4) Don't use cognitively conflicting symbols and colors. Red be cautious, green it's safe, but deleting something can be dangerous in either direction, safe in either direction. A better mental model is action vs inaction, then it's more clear to highlight the response that causes an action.

(5) Avoid blocking interfaces altogether. Avoid interrupting the users flow. Perform all actions immediately, but only ever offer recoverable actions. Undo is not the only choice, and probably not the best for things like entire documents. Like loading a file, delete is often not meaningful in the undo stack (though it can be). Another paradigm is moving an item to a differentiated group, such as trash, an undisplayed group or a low rating. This approach is idempotent and allow things to be recovered out of order (it's also easer to implement than undo especially asynchronously). It can also be it's own valuable feature like edit tracking for word processors.

skardan• 12 years ago

It is sad nobody mentions book The Humane Interface by Jeff Raskin.

Raskin would say, that this is not a question of red or green. It is a question of habit. If user deletes enough items, you will train him to press "Yes" button and not to think about the question. It will be his habit. Uninterruptible sequence.

Anybody deleted his important files just because he is "trained" to press sequence F8 - Enter in his favourite file manager?

Raskin recommends to provide undo. User content is sacred and should not be lost. You can also try to randomize the dialog. User will stop the sequence and think what he is doing. But if user performs the delete operation often, he will be greatly annoyed.

Read it. It is a great book with many valuable gems. http://amzn.com/0201379376

ASneakyFox• 12 years ago

Please do not randomly change buttons. Thats the worst idea ever. Where does this guy do his research?

lttlrck• 12 years ago

"Cancel"/"No" should be on the left (go back) and "OK"/"Yes" on the right (proceed).

(There may be guidelines that do the opposite and I guess RTL locales may reverse it).

Deliberately ignoring HMI guidelines and switching button placement is irritating and does not remove the muscle-memory (?) problem. Doing it randomly is nuts and leads to mistakes that are IMO not the users fault.

It you want to interrupt a sequence, there are kinder ways of doing it like double confirmation.

timinman• 12 years ago

Since Red means both 'Cancel' and 'Delete', use something else: Black. Black, like: 'an empty black hole is where your data will go.'

joerich• 12 years ago

I think "Yes" should be "green". The question is clear... green reminds me of the traffic ligths, green means "go on" or "go ahead". Maybe "yes" and "delete" shouldn't be in the same button because it seems that "yes" has a positive meaning (green) and "delete" a negative/alert meaning (red), that is why (maybe)you got this paradox... Hope that was helpful.

Should "Yes, delete it" be red, or green?

Related Stories