Written by Anthony.

“It doesn’t matter where it’s placed as long as it’s there.” This is how many who don’t understand user experience think about buttons. In UX, every detail matters, especially button placement.

door-knob-placement

Buttons work like door knobs. People wouldn’t be able to use doors efficiently if door knobs weren’t placed in a consistent area. But because they are, everyone with a hand can walk through doors without much thought. The placement standard of door knobs across doors creates an unconscious habit in people.

Users are Creatures of Habit

Like door knobs, buttons need placement standards. Consistent button placement allows users to move through apps like they move through doors.

Most apps fail to follow a button placement standard and end up breaking the user’s habit. This leads to errors between what the user wanted to do and what the app actually did.

Case Studies

Here are a couple cases where a lack of button placement standards caused users to commit serious errors. What guides users is not always their eyes, but their habits.

Pocket learned that “new users were instinctively tapping the Archive Button to go back, expecting the Up Button to be there. The Reader would close, but the item they saved would disappear, and they would return to their list empty or missing their article” (source).

up-button-placement

The checkmark icon they used for the Archive button doesn’t look like the icon for the Up button. But because they placed it where the Up button would be, user habits kicked in and led them to tap archive when they meant to go back.

Pocket thought removing the Up button and moving the Archive button a few pixels over wouldn’t do much harm. But these little details affect the user experience because users are creatures of habit.

One user was confused when he was setting up a meeting because he “filled in all the details, invited a couple of people, and then accidentally cancelled it” (source).done-button-placement

The two labels on the buttons ‘cancel’ and ‘done’ read different. But the user still made the mistake of tapping ‘cancel’ because the button is in a place where the user expects to see ‘done’.

It’s said that “the hand is quicker than the eye”. But in this case, “the habit is stronger than the eye”. Designers need to take this into account and set button placement standards for their apps.

Set Button Placement Standards and Follow Them

Whether you believe the ‘cancel’ button belongs on the left or right, set a standard and follow through with it on all pages of your app. This consistency sets user expectations that’ll reinforce their habits.

When you don’t follow button placement standards, you violate their expectations. Don’t leave them frustrated and confused. Reinforce their habits, so that they can walk through tasks as easy as doors.