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

by on 05/25/11 at 11:30 pm

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

The ‘Cancel’ button is the secondary button that takes users back to their original screen without completing the action. 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.

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.

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 this area allows users to see the primary action they need to take last. This not only improves the visual

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 users eyes end on the primary action button.

Buttons in the Corners or Keep Them Together?

Another question designers often wonder with dialog box buttons is whether they should place them 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 really well. However, since ‘Ok’ and ‘Cancel’ buttons aren’t exactly pagination buttons, following the directional mapping rigorously isn’t necessary. In fact, 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 is more important than it 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 both buttons. This allows users to efficiently compare the two actions in a single gaze to choose the best action to take.

Conclusion

Designers often use dialog boxes when there’s an important message users need to read, or an 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 can prevent them from choosing the wrong action and making a serious mistake.

Button placement is important, but remember to also pay attention to the visual weight and labels you give your buttons. All of these design aspects come into play when users process dialog boxes. Now that you understand the reasons why ‘Ok’ buttons work best on the right, you’ll have something more to refer to when figuring out button placement than the flimsy platform consistency argument.


Our Products

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

Affiliates

Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

111 Responses to “Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right”

  1. Patanjali

    Feb 18th, 2017

    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

    Jun 6th, 2017

    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.

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

      Jun 14th, 2017

      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)

Leave a Reply to Holger