Discussion:
[Design] Should "delete" confirmation actions be red or green?
Steven Walling
2014-03-27 20:43:28 UTC
Permalink
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-green/
--
Steven Walling,
Product Manager
https://wikimediafoundation.org/
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140327/0be77e21/attachment.html>
Jared Zimmerman
2014-03-27 20:59:38 UTC
Permalink
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
Post by Steven Walling
This is relevant to the mediawiki.ui questions that have come up about
when to use the "destructive" button class.
https://ux.stackexchange.com/questions/49991/should-yes-delete-it-be-red-or-green/
--
Steven Walling,
Product Manager
https://wikimediafoundation.org/
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140327/e5d0d82f/attachment.html>
Trevor Parscal
2014-03-27 21:04:21 UTC
Permalink
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 <
Post by Jared Zimmerman
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
Post by Steven Walling
This is relevant to the mediawiki.ui questions that have come up about
when to use the "destructive" button class.
https://ux.stackexchange.com/questions/49991/should-yes-delete-it-be-red-or-green/
--
Steven Walling,
Product Manager
https://wikimediafoundation.org/
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140327/7c964aa5/attachment.html>
Shahyar Ghobadpour
2014-03-27 21:44:43 UTC
Permalink
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
Post by Trevor Parscal
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 <
Post by Jared Zimmerman
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
Post by Steven Walling
This is relevant to the mediawiki.ui questions that have come up about
when to use the "destructive" button class.
https://ux.stackexchange.com/questions/49991/should-yes-delete-it-be-red-or-green/
--
Steven Walling,
Product Manager
https://wikimediafoundation.org/
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140327/95e1f25d/attachment-0001.html>
Steven Walling
2014-03-27 21:50:41 UTC
Permalink
On Thu, Mar 27, 2014 at 2:44 PM, Shahyar Ghobadpour <
Post by Shahyar Ghobadpour
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/
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140327/b73ce7a9/attachment.html>
Shahyar Ghobadpour
2014-03-27 21:53:47 UTC
Permalink
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
Post by Steven Walling
On Thu, Mar 27, 2014 at 2:44 PM, Shahyar Ghobadpour <
Post by Shahyar Ghobadpour
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 at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wikimedia.org/pipermail/design/attachments/20140327/cc60f6fd/attachment.html>
Continue reading on narkive:
Loading...