advertisement
advertisement

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.

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

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?

advertisement

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

advertisement

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?

advertisement
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]

About the author

John Pavlus is a writer and filmmaker focusing on science, tech, and design topics. His writing has appeared in Wired, New York, Scientific American, Technology Review, BBC Future, and other outlets.

More