Should "delete" confirmation actions be red or green? - Design

Jared Zimmerman

27 Mar 27 Mar

8:59 p.m.

Interesting the second image, where the primary call to action is Delete (and red) and secondary actions are deemphasized I think are closer to where we want to be. I don't think we can make blanket statements but rather establish best practices and examples of how to use these controls. I can say that anything that deletes content should either be destructive (red) or neutral (white/grey) and never green (complementary) or blue (progressive) *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman<https://twitter.com/JaredZimmerman> On Thu, Mar 27, 2014 at 1:43 PM, Steven Walling <swalling(a)wikimedia.org>wrote;wrote:

...

This is relevant to the mediawiki.ui questions that have come up about when to use the "destructive" button class. Full discussion at: https://ux.stackexchange.com/questions/49991/should-yes-delete-it-be-red-or… -- Steven Walling, Product Manager https://wikimediafoundation.org/ _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Reply

Shahyar Ghobadpour

9:44 p.m.

Yeah, we are already using this concept with new designs. Confirmation actions are emphasized (eg. full color). Secondary actions are not (eg. transparent background). Confirmation of any actions, even if destructive, would also follow the same pattern. --Shahyar On Thu, Mar 27, 2014 at 2:04 PM, Trevor Parscal <tparscal(a)wikimedia.org>wrote;wrote:

...

The accepted answer is totally right, the destructive action should be red, and the other action should be a normal neutral colored button. It's not like you are being asked to either delete (red) or create (green), it's a question of delete (red) or take no action (neutral). - Trevor On Thu, Mar 27, 2014 at 1:59 PM, Jared Zimmerman < jared.zimmerman(a)wikimedia.org> wrote:

Interesting the second image, where the primary call to action is Delete (and red) and secondary actions are deemphasized I think are closer to where we want to be. I don't think we can make blanket statements but rather establish best practices and examples of how to use these controls. I can say that anything that deletes content should either be destructive (red) or neutral (white/grey) and never green (complementary) or blue (progressive) *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman<https://twitter.com/JaredZimmerman> On Thu, Mar 27, 2014 at 1:43 PM, Steven Walling <swalling(a)wikimedia.org>wrote;wrote:

This is relevant to the mediawiki.ui questions that have come up about when to use the "destructive" button class. Full discussion at: https://ux.stackexchange.com/questions/49991/should-yes-delete-it-be-red-or… -- Steven Walling, Product Manager https://wikimediafoundation.org/ _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Reply

Shahyar Ghobadpour

9:53 p.m.

Jared and I were discussing this recently. The style guide will be rewritten soon to reflect the more recent mediawiki-ui design concepts and usages. --Shahyar On Thu, Mar 27, 2014 at 2:50 PM, Steven Walling <swalling(a)wikimedia.org>wrote;wrote:

...

On Thu, Mar 27, 2014 at 2:44 PM, Shahyar Ghobadpour < sghobadpour(a)wikimedia.org> wrote:

Yeah, we are already using this concept with new designs. Confirmation actions are emphasized (eg. full color). Secondary actions are not (eg. transparent background). Confirmation of any actions, even if destructive, would also follow the same pattern.

Good to hear. This makes sense to me. The combo of red and green definitely reminded me of the "Skittles" problem (as S Page coined it) we've encountered occasionally in using mediawiki.ui, where it might seem like the urge is to use constructive/progressive/destructive buttons side-by-side. The living style guide has been good in that it allows us to adapt this as we go. But at some point we're going to need more in the way of on-wiki docs I think, particularly when it comes to suggesting design principles, like don't put multiple progressive/constructive/destructive items in the same screen of a workflow. -- Steven Walling, Product Manager https://wikimediafoundation.org/ _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Reply