3

I have a modal view in my iPhone app including a navigation bar with two buttons on the root view controller. A a button to dismiss the screen, also not sure which title to use calling it now the Cancel/Home/Done-Button. And now I am confused how to place the buttons.

Currently I have it this way:
RootView: Cancel/Home/Done ---- Action
2ndView: Back ---- (no button)
3rdView: Back ---- Save

According to ignorethecode and globalmoxie the cancel/home/done button should be placed on the right side. But should I apply this rule here?

I am also unsure which title to use. Cancel and Done seems both wrong, as there is nothing to cancel. Close could probably work. Or a home icon?

Improve this question
2
  • 4
    It will help you get more answers if you put up some mockups or screenshots of what you are considering.
    – JohnGB ♦
    Feb 13, 2013 at 14:25
  • 1
    some mocks please
    – Phil Mobile
    Mar 15, 2013 at 13:14

2 Answers 2

Reset to default
3

When you say "root view" is this the root view of the modal path - or the root view for the app as a whole? I'm assuming root of the modal path.

For the button naming problem. You could use "dismiss" as I believe this is used in a couple of native apps - can't remember which at the moment. However, if you use the cancel button you get the benefit of it being automatically localized without you having to do anything. Further, you are not canceling an action in progress - you are canceling an action that the modal view would perform before being dismissed. Check the HIG - around page 157.

If the modal view you are presenting is a secondary flow within your app - done might be more appropriate (thinking the Remote app from Apple when you bring up the control view). And, again, you get the added benefit of automatic localization.

As to left or right: except for some minor exceptions - the expectation from the HIG and native apps is: if it will return a user to the previously viewed screen (either modally or popping off the navigation controller stack), put that button on the left; if it will perform an action prior to returning the user to the previously viewed screen (or dismissing a modal view), put it on the right ("save" in the 3rdView).

The edit button is one of those exceptions, because it has a dual state. The action of entering edit mode, and the done state to leave edit mode (returning the user to the "original" view) - and generally placed on the right.

Some vendors have broken away from this rule of thumb to accommodate lefties versus righties. While some, even at Apple, think this is okay/good - I personally think it leads to inconsistency between apps - which is something Apple recommends avoiding whenever possible. As one of the things that makes applications on the Apple platforms easy to use is a certain overarching UX consistency.

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

Improve this answer
1
  • Thnaks for your answer. Yes, root means the root of the modal path. I am now using 'Close' as this describes it best I think. 'Dismiss' is a good choice for UIActionSheets and UIAlerts, but not for UINavigationaBars, in my opinion. I like your idea and arguments for left=back but I think it is not consistent with Apples apps (unfortunately I can't remember a example right now).
    – pre
    Mar 22, 2013 at 9:58
0

the main point is to differenciate between the back and cancel button. the user has to know which one he is tapping, and what is the difference. (related q) Back button can has the previous screens name as label, and the arrow, indicating that its a view change.

You should think of what will happen when you press the button. the user has to know.

also, iOS HIG is a more important document to follow, then ignorethecode. also, concider if you need a save button, wouldn't autosave be better, and cancel would cancel it. Also, if you don't need cancel, don't use it.

Improve this answer
2
  • I haven't found anything related to my question in the HIG. Save in the 3rdView is necessary. Also my problem is about the placement of buttons in the rootView of the modelView. There I need a button to dismiss it and also have a button, which triggers unrelated actions. I am unsure how to place this to. There is no 'Back'-Button involved there.
    – pre
    Feb 13, 2013 at 9:06
  • Given this additional information - look at the "now playing" button in the Music app. It does not perform an action but acts as a button to push a new view onto the stack. Stylistically, it appears as an arrow pointing to the right, indicating that something will appear from that direction - similar to detail disclosure indicators.
    – Josh Bruce
    Mar 20, 2013 at 2:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.