Co.Design

Design Basics: Flow Is Why "OK" Buttons Are Always On The Right

The design principle of flow is about uncovering the best order to perceive information.

Curiosity is the first step in becoming design-literate: wondering why certain things are the way they are in the products we use. I just read a great (but technical) article that explained why "OK" is almost always on the right in dialogue boxes on computers. The reason isn't as obvious as you'd think, and it's all about a principle called flow, which asks: What is the best order to perceive stuff in?

You might think the best place to put "OK" is on the left relative to the other buttons. It's important, it's most likely to be the action the user already wants to take, and we tend to read from left-to-right, so putting it on the left -- "first" in terms of flow -- makes sense, right? Why not let the user cut right to the chase? Well, because flow isn't that simple, and just like with Internet commenters, "FIRST!" isn't always useful. These two handy illustrations from Anthony T of UX Movement explain why:

ok on left

In the design above, "OK" is the first thing you pay attention to. But you're not a robot, so you immediately notice there's another button to the right. Better check that out just in case: That's the second thing you pay attention to. Nope, "OK" is what you wanted. Go back to the left: That's the third step. It's a weird quirk of our psychology, but by putting the important thing "first," this design paradoxically creates more work for your eyes and brain to get you to what you really want to do.

ok on right

Contrast that with the design above. The first thing you notice is "Cancel." Nope, that's not what I need -- moving on to the second thing: "OK." Yup, that's what I want to do. Click. Done. One less attentional step, no backtracking. We are naturally curious animals, and we like to examine all the affordances or options available before committing. Putting the "OK" to the right, at the end of the line, lets us naturally "land" where we wanted to end up anyway.

It doesn't just apply to "OK/"Cancel," either. Here's the prompt I see when I want to turn off my Mac:

shut down

Same pattern. Here's a drop-down menu for my Chrome browser. Guess what the most-used option is? Guess where it's placed?

drop down

Bingo. And that's why you'll see this pattern in almost every kind of multiple-option dialogue box or menu: Putting the most-often-used or most-likely-to-be-used option "last" makes less work for our monkey brains. Flow can also be used as a tool by designers who -- for better or worse -- want to encourage you to do one thing over another thing. (Like, say, sign up for their new social media thingamabob, or blindly accept 41-page-long Terms of Service updates on iTunes.) But for the most part, flow is used in the service of making our lives easier. Disagree? Cancel? OK!

Read more about flow at UX Movement; top image, of a town consumed by the desert, by Alvaro Sanchez-Montañes]

Add New Comment

8 Comments

  • Sylvain

    Interesting question.
    But unfortunately "OK" is almost always on the LEFT in dialogue boxes on computers, since most computers are running Windows...

  • Will Sansbury

    Flow in web form design is complex and contextual, and the UX Movement article you referenced uses flawed logic and a lack of supporting evidence to attempt to reduce it to a hard and fast rule. It's not that simple.
    Thankfully, there are excellent books out that provide a much more reasoned and supported discussion of the topic.Luke Wroblewski's Web Form Design is an excellent one, available from Rosenfeld Media. http://bit.ly/iD1xqoCaroline Jarrett and Gerry Gaffney cowrote Forms that Work: Designing Web Forms for Usability (available from Morgan Kaufmann), which is also very good. http://bit.ly/lIv6E4 

  • Don Li

    Information in this article is well presented, thanks for that.  With regard to the position of [Cancel] and [Ok] buttons, one thought is, when using mouse for navigation, most of us are right-handed, the cursor tends to stay on the right side of the screen, hence, it takes least time to hit the [Ok] button when it's on the right side.  Secondly this button is much more used than the [Cancel] button.  Now, for the tablet I don't know but I would probably use the same principle/science, hence, users don't have to re-learn it.

  • John Pavlus

    Great point. Also, after I wrote this post I noticed that on my Android phone, the pattern is reversed: OK is on the left, Cancel on the right. I figure it's because having OK on the left is easter to tap with the thumb while holding the phone in the right hand; perhaps this is how most users use the device. Knowing Google, they either a) researched the hell out of this and that's why they arranged it that way or b) just didn't really care one way or the other about sweating this kind of detail, so that's how it ended up. 

  • Karl Koscher

     Two hypotheses on why Android's OK buttons are on the left:

    1. It's what Windows does, so the majority of Android users won't have to relearn relative button positions. (Like it or not, Windows is still the dominant OS.)

    2. Phones with "send" and "end" buttons usually have them on the left and right respectively. Putting the OK button on the left keeps the "do something" buttons on the left side and the "don't do something" buttons on the right side.

    Finally, you might want the OK button on the right *because* it causes  the user to work more. After all, some actions can't be undone easily, and most of the time you can repeat an action that you accidentally cancel. Making the user work more might lead to fewer accidental actions.

  • Matan Bareket

    Just wanted to point out, that Windows UI guidelines always puts the Accept (OK, Save, Accept) action on the left. But the other way around in Linux and OSX