3

I have seen various takes on the yes/no button placement on dialog boxes or confirmation messages over the years. For a long time, it seemed like I was almost always witnessing the "Yes" option being to the left of the "No" option.

However, it seems like there is a recent trend to place the rejection/"no" option to the left of the "yes" option. Google's Material Design specs even mention this, but they don't explain why (at least I couldn't find it).

From a UX perspective, is there a correct answer in regard to where the yes/no buttons belong on a dialog box in relationship to eachother?

  • 2
    In the case of Material design, maybe they expect the user to be holding the device in their right hand, and want to make it easy to reach for "OK" with your thumb? – Hans Aug 4 '15 at 22:15
5

Great question, really!

The problem does not lie in Yes or No. But if the action is Positive or Negative.

For example,

  1. "Are you sure to permanently delete System32?"

    • Yes

    • No

  2. "Are you sure you want to backup this photo?"

    • Yes
    • No

As you can see here, the principle of good design is violated. If you specify Yes or No in the UI of your website/app, you're likely to reuse it. Which causes most of the problem.

Regardless if the event is destructive or not, the User is confused with the Yes and No and might randomly click on one without reading.

A good designer will try to be accurate with the options he provides with the action to be performed.

For example,

  1. "Are you sure to permanently delete System32?"

    • Delete Folder (Red Text)

    • Cancel (Accent Color)

  2. "Are you sure you want to backup this photo?"

    • Backup to Google Drive.(Green Text)
    • Cancel (Accent Color)

The text color is completely optional. However the general rule of color psychology suggests that we all understand green is positive and red is negative.

Now however you place the options, if you have been specific and have stated in the option itself in what it'll do, the positioning will never be a problem.

However, I personally like positive actions to the Right and Negative towards the left.

  • 1
    I like your suggestion about providing accent colors for Action and Cancel coupled with ensuring that the labels are more reflective of their respective actions is brilliant. Seems like the perfect one-two punch with these dialogs to me. Thanks a bunch for your insight! – mindontheblink Sep 9 '15 at 18:03
  • 1
    No problem! Glad I could help! – Swapnil Borkar Sep 9 '15 at 19:21
0

To follow up on this, I realize the internet is inundated with articles discussing this topic. I posted this to start a discussion here to get various takes.

It seems like the general consensus is that so long as it is consistent in the application, either should work and there are arguments for both. If you are developing for a certain platform (i.e. Microsoft, Google, Apple), it is best to follow their respective design specs. User testing seems to be key in the decision as well if not developing for a platform in particular.

I have since found other articles on UX stackexchange, so I will go ahead and mark this as answered. Here is one I found the most helpful:

OK/Cancel on left/right?

Here is another interesting read:

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

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.