Blog

Or search support forum

What's Global Moxie?

Global Moxie specializes in mobile design strategy and user experience for a multiscreen world. We offer consulting services, training, and product-invention workshops to help creative organizations build tapworthy mobile apps and effective websites. We're based in Brooklyn, NY. Learn more.

On Shelves

Books by Josh Clark

Tapworthy: Designing Great iPhone Apps

Best iPhone Apps: The Guide for Discriminating Downloaders

iWork ’09: The Mising Manual

Moxiemail

Enter your e-mail to receive occasional updates:

With iOS Buttons, Know Your Right from Your Left

Posted Jul 11, 2012

Back! Done! Cancel! Save! Mobile apps sport a bevy of buttons to dismiss a view, but their proper placement isn't always obvious. Let me cut through the fog: for iOS apps, it boils down to these general rules.

  1. The Back button always goes at top left.
  2. A Done or Save button always goes at top right.
  3. A Cancel button goes at top right, unless paired with a Done or Save button, in which case it slides over to top left.

Here's why. In iOS, the Done, Save and Cancel buttons are almost always used to dismiss a modal view, a screen that temporarily interrupts the action by sliding up from the bottom to cover the "regular" screen. Modal views themselves often have internal navigation that requires a Back button at top left, so those Done/Save/Cancel buttons have to make way. As a result, they stake out a default location at top right. For consistency, they should stay there even when there is no Back button in your modal view.

The inimitable Lukas Mathis spells out the whys and wherefores in his Back Button Placement blog post:

This is reinforced using animations: if something slid in from the right (the user moved further into the currently visible information hierarchy), use «Back» (the button on the left) to move to the left. If something slid in from the bottom (a modal view), use «Done» (the button on the right) to have the currently visible sheet slide back down again. To the user, there’s a spatial system that conveys how screens are arranged, and which button should be used, depending on where she wants to go.

Tags: , , ,

Want more? Recent blog entries...

Comments

2 comment(s) on this page. Add your own comment below.

Steven Hoober
Jul 11, 2012 6:47pm [ 1 ]

Since you bring it up, I must say that I have encountered, with real user testing, a surprising amount of trouble with point #2. Even users familiar with iOS (by their statements, but that's all we have) don't always seem to be looking for their completion button up there. They get there, but it takes a while.

OTOH, it seems to work to follow other best practice, and stick a prominent one at the bottom of the page. Maybe even docked so it floats above the tab bar all the time... Yes, with the same left/right paradigm enforced, with small exceptions for centering. These seem to not break the iOS mold, as there are functions inside the content area already, and they look sorta buttony.

Am I the only one, and totally crazy, or what?

Jul 11, 2012 7:32pm [ 2 ]

Not crazy! The big fat "Save" button at screen bottom is definitely can't miss and, at least for single-view modals, probably a good way to go. If you're going to use the standard navigation-bar buttons, though, the above is the formula to follow.

It's not entirely uncommon to do both. A bit overkill, but hey, it's sometimes nice to provide more than way to skin the kitty.

Add a Comment

Don't be shy.

(Use Markdown for formatting.)

This question helps prevent spam:

Download Big Medium
Try it free for 30 days, or buy to unlock.

State of Josh's Brain

Twittering

Follow me on Twitter

    Snapping

    Latest photos