Buttons

Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right

Designers often question where to place their ‘Ok’ and ‘Cancel’ buttons on dialog boxes. The ‘Ok’ button is the primary action that completes the task.

The ‘Cancel’ button is the secondary action that takes users back to their original screen without completing the task. Based on their functions, what is the best order to place them? Should the ‘Ok’ button come before the ‘Cancel’ button or after?

Platform Consistency Is Not Good Enough

Many have referred to following platform conventions as the answer. While this might seem like a solution to the problem, it really isn’t. It doesn’t answer which placement works better for users and why. The suggestion to follow platform conventions for the sake of consistency is simply not good enough and leaves designers empty-handed.

“Consistency” is a popular word used among designers. It’s also a popular excuse to use to not think deeply about the design problems users face. What’s the benefit of following a design convention, if one doesn’t know why it exists?

What if a certain design convention is harmful to users? Should designers blindly follow it for the sake of consistency? Should bad design practices persist because designers want to resort to platform design consistency as the answer to every problem?

There are certain platform design conventions that are widely used today because they work for users. But the point here is that platform design consistency should never satisfy a designer as the sole reason to do something. Understanding the reasons why you should design your user interface one way as opposed to another way is key.

Button Placement Matters

One could argue that making your action buttons prominent by giving it more visual weight and a clear and distinct label is more important than its placement. While the visual weight and labels of your action buttons are an important design aspect to consider, it’s not the only aspect.

To only focus on one design aspect and not the others is an act of a careless designer. A meticulous designer would think about how every design aspect affects the user. And it’s how primary and secondary actions are placed that is hardest for designers to figure out. That’s why the ‘Ok’/’Cancel’ button debate is such a popular one among designers.

Why ‘Ok’ Buttons Work Best on the Right

When you get past the platform conventions argument, you’ll question which placement works best. You can solve this problem by analyzing how the design affects users.

Less visual fixations

It’s necessary to see if the common assumptions designers make are true. Some designers believe that putting the primary action on the left side before the secondary action is better for users because it’s closer and, therefore, takes less time to click.

This makes sense but you cannot ignore the fact that users will look at all of their options before they choose which action to take. This means that most users won’t blindly click the primary action button without also looking at the secondary action button next to it.

They’ll first see the primary action on the left and then look at the secondary action on the right. Then they’ll move their eyes back to the primary action to click it. This creates a total of three visual fixations in multiple directions.

With the ‘Ok’ button on the left, the visual fixations are more and flow in multiple directions

With the ‘Ok’ button on the right, the visual fixations are less and flow in one direction

Compare that with the primary action placed on the right of the dialog box and the secondary action placed on the left. Users start with their eyes on the secondary action, and move their eyes to the primary action to click the button. This creates a total of two visual fixations in one direction, giving users a faster visual flow.

Users fixate on each button only once and end on the primary action button. Putting the primary action left might make it easier for users to reach, but when you look at speed in terms of the user’s mental processes and visual fixations, placing the primary action on the right of a dialog box is actually faster.

Maps to the expected button functions

When users click secondary action buttons, they expect the application to do nothing and take them back to their original screen. Thus, ‘Cancel’ buttons function like ‘Back’ buttons.

When users click primary action buttons, they expect the application to do the action the button says, and take them forward to the next screen. Thus, ‘Ok’ buttons function like ‘Next’ buttons. Placing the secondary action button on the left and the primary action button on the right maps to the ‘Back’ and ‘Next’ button functions the user can expect.

It’s similar to how pagination buttons are placed. The button that takes users to the next page is on the right, and the button that takes users back to their earlier page is on the left. This button placement works because it maps to the user’s left-to-right reading and navigating direction, where right is the direction to progress and left is the direction to regress.

‘Ok’ progresses users forward to the next screen and ‘Cancel’ regresses users back to their original screen

‘Ok’ and ‘Cancel’ buttons in dialog boxes should follow a similar interaction pattern because they function like pagination buttons. Not only that, but the left and right directional pattern are what users are used to in the western world. Placing your primary action on the right and secondary action on the left will make your dialog box buttons easier and more intuitive for users to understand.

Gives users a more efficient task flow

A button placed in the bottom right corner of a dialog box is easier for users to click because it follows the Gutenberg diagram. In the Gutenberg diagram, the bottom right area is the terminal area. This is the area where the user’s eyes end up when they finish scanning.

Placing your button in the terminal area allows users to see the primary action they need to take last. This not only improves the visual flow, but the task flow as well. Users won’t skip past the primary action button as they’re scanning. Their eyes will land right on it when they’re through, so they can click it right away.

Scanning the dialog box and taking action is fast and easy because the user’s eyes end on the primary action button.

Buttons in the Corners or Keep Them Together?

Another question designers often wonder is whether they should place the buttons in the corners or keep them together. When you place your primary and secondary actions in the corners of the dialog box, it maps to the left and right navigating directions well. However, since ‘Ok’ and ‘Cancel’ buttons aren’t navigation buttons, following the directional mapping isn’t necessary. Sometimes it can do more harm than good.

The large visual separation between the buttons makes comparing actions difficult and isolates one action from the other

If the application is about to carry out a crucial action that the user cannot undo, it’s important that users can see the ‘Cancel’ button along with the ‘Ok’ button. In this case, the ‘Cancel’ button might function like a ‘Previous’ button, but it’s more important because it acts as a safety button to prevent any changes.

The danger of placing the ‘Cancel’ button in the far left corner is that it can cause users to overlook it due to the large visual separation between the two buttons. Putting the ‘Cancel’ button together with the ‘Ok’ button makes it easier for users to see and compare the two actions in a single gaze to choose the best one.

Conclusion

Designers often use dialog boxes when there’s an important message users need to read or important action they need to take. The order you place your buttons can affect which action the user chooses. When you place your buttons in an order that is clear and efficient to users, you prevent them from choosing the wrong action and making a mistake.

Button placement is important, but remember to also pay attention to the visual weight and labels of your buttons. All these design aspects come into play when users scan dialog boxes. Now that you understand the why ‘Ok’ buttons work best on the right, you’ll have a better argument to reference than the platform consistency one.


Book

Affiliate

elegant wordpress themes

This Post Has 118 Comments

  1. Patanjali Reply

    Short words are not serially read as much as subconsciously acquired and processed simultaneously. That is helped by them being closer together. It is when phrases get longer that slower serial reading kicks in.

    Given a left-to-right reading order, and a positive-emphasis prompt, it makes more sense to put the confirmatory action first.

    if, as argued in the article, that people are going to scan and think about all options, I don’t think you have designed the prompt and the button text correctly. The confirmatory text should not need a check of alternatives if the process is clear. Basically, if a user cannot immediately decide that the confirmatory button is exactly what they want, THEN they will examine alternatives.

    But as I say, they may have already subconsciously ascertained what their choices are, unless the text on the buttons gives rise to doubt about what their action will actually be in relation to the prompt.

  2. Eneroth3 Reply

    I can’t agree.

    Regarding following a convention I think it is immensely important and absolutely not an excuse for not thinking yourself. Visually impaired people and people who for other reasons have problem reading the text, e.g. users with ADHD, rely heavily on the order. The assumption that people don’t know the convention is wrong, people know it but often don’t know that they know it.

    I also don’t get the idea that having the primary button to the right would help the visual flow. Since the primary button is the one used most often it’s natural that it’s the first one you see. Users often click on the first option that makes sense without continuing to read the others so I would definitely argue that having the primary option to the left makes the dialog easier to visually parse.

    The forward and backward directions is the thing in this article that makes the most sense to me. A back button always has to be to the left and a next button to the right, everything else is wrong (my former bank mixed up those button and it drove me mad to get sent to the wrong page). However I would argue that a cancel button isn’t the same as a back button. Cancel doesn’t take you back to the previous dialog (the one people often think of as being to the left) but to whatever content is shown behind the dialog. I think of this as a forward motion, not a leftward motion.

    Regarding styling buttons I would discourage this. I’ve seen so many designs where one button is so heavily styled that it no longer appears to be of the same type as the others. I would say styling one button differently than the others is in most cases merely a substitute for ordering them wisely.

    • Оливейра Рафаэль Reply

      yup, I agree with your statements, don’t think that changing the “default position” of most “OK” buttons would be a good idea considering that most people already assume that the first button would be the “Ok” one (even when not being conscious about it)

  3. Maryanne Cathro Reply

    I also don’t agree with the order suggested, although the reasoning makes logical sense. Many, many people track language in an auditory way, and the word order “Yes, No” is so common in our language. And OK/Cancel is a version of this. And as the previous commenter said, we read left to right. Visual processing is faster than auditory processing but without the auditory part, the visual can fail.

  4. Priscilla Deng Reply

    I like how you argue that the OK button should be on the right. I, too, find it more intuitive. But I’ve been a Mac user for the past 15 years. My partner saw a dialogue box I had created (OK on the right) and said it was really strange to him. He uses Windows at work all day, but has owned a Mac which he uses at home for several years.

    Normal/Nielsen says that there’s no right/wrong way; the conventions followed by Windows and Apple are exact opposites — the best thing to do is do what the majority of your end users expect: https://www.nngroup.com/articles/ok-cancel-or-cancel-ok/

    It would be great if there was a usability study on this. Maybe I’ll push for one at work and share my results.

  5. Jonathan Reply

    I totally disagree. I don’t read the buttons, I know when a dialog box pops up with small buttons it’s going to be Yes/No in that order. If any desktop uses No/Yes then I’m always hitting the wrong button and drives me crazy. That No/Yes order is trying to be forced on me in the guise that it’s better is totally wrong.

    I hate No/Yes order so much so that I will not use a system back to front to the order I want. I grew up with language where questions were Yes No. I have never heard anyone say “it’s a simple No Yes question”. Every operating system I looked at till about 2013 usually things where Yes/No (Amiga,Windows,Linux). To me it seems as if around that time someone took the reins of Android and said right your going to use No/Yes and you are going to get used to it, no you will not have any ability to tell the system what convention your prefer. Since then there seems to have been a large push to No/Yes is better. I think it’s rubbish. It’s a matter of preference and the user should be allowed to decide if they want No/Yes questions or Yes/No questions.

  6. Peter Reply

    I agree with this article in its entirety. I virtually only use Windows computers, but am constantly annoyed by pressing the wrong button a millisecond before I realise I’ve done it. I expect (as with all things in life) that more/accelerate/yes/ok is on the right and no/brake/cancel/destroy is on the left. Even the car has the accelerator on the right. It’s natural to think of more on the right and less on the left.

  7. Kevin Muldoon Reply

    I believe the positive action button should be placed at bottom right, for much the same reasons you describe. However, can we all agree this word should be spelled with all-caps “OK”? Not ‘Ok’, ‘ok’, ‘okay’, ‘Okay’ or ‘O.K.’

    OK?

  8. Anonymous Reply

    It’ll have to be flipped for languages with right-to-left reading systems like Arabic…you forgot about that.

  9. Kenneth L Wells Reply

    In 400 years of print design, marketers later found (in the last 70 years of advertising design) the most important thing for the viewer should be on the bottom right. This seems to happen because we in the west read left to right, top to bottom. I’ve also heard a teacher describe this phenomenon as the “period” of a layout, much like the period of a paragraph.

    I have found this particular debate (left vs right of the main button) hilarious because the PC and Mac operating systems are flip-flopped from each other for a long long time for 30 years-ish.

    Non-OS design has not been confined to either convention because it does not need to be. In any case we designers need to visually invite the user to click the button we think they probably should (from a biz and user perspective).

    I’ve been thinking a great deal lately about the concept of noise pollution, and how that relates to my day in life and in work. The exponential messages that come at us are mostly “info pollution” and we are inundated with crap that probably is not important to each of us.

    A visually prominent button on the bottom right will never be totally ignored, especially if the button makes sense.

Leave a Reply

Your email address will not be published. Required fields are marked *