5

I am working on a Mobile Application primarily for Android Platform. The Application will have a lot of screens which will take user input and we need to have a save and cancel button for them.

Though we have sorted out that we will have a Button toolbar with SAVE and CANCEL sticking at the bottom of the screen, we are yet to understand which one to be on the right side and which one should be on the left.

Please let me know if you came across any good UX study related to the placement of primary and secondary buttons in Mobile.

5

4 Answers 4

9
+50

Following platform conventions is the most important factor here. Different platforms play by different rules and ignoring this can confuse and alienate users.

If you look through the screenshots displayed in the Android design guidelines, you will find a variety of examples that show that in the latest android version the primary button should go on the right and the secondary button on the left.

enter image description here enter image description here(3)

Think of the buttons in your app as primary action and secondary action - In your case, 'Save' is the primary action. The user has inputted data and it's probable that they will want to save it and continue. So when a user clicks the save button the expectation is that they will progress forward to the next screen.

For the secondary action, in this case 'Cancel', the user clicks this to discard the information they have inputted and go back to the original screen/state.

Thus having the Save button on the right correlates with going forward and the Cancel button on the left correlates with going back.

Also it is helpful for the user when the primary action on the right as it helps the user task flow as it is at the end of viewing pattern.

A button in the terminal area is a compelling call to action because it’s placed at the end of the user’s viewing pattern.(1)

enter image description here (1)

Neilson points out that people can argue you for either layout (Ok-Cancel Vs Cancel-Ok) but that:

"Listing OK last improves the flow, because the dialog box "ends" with its conclusion. Also, as with Previous/Next, you could argue that OK is the choice that moves the user forward, whereas Cancel moves the user back. Thus, OK should be in the same location as Next: on the right."(2)

--

Hope that helps

Refs & Useful Links:

http://uxmovement.com/buttons/why-users-click-right-call-to-actions-more-than-left-ones/ (1) http://www.useit.com/alertbox/ok-cancel.html (2) http://developer.android.com/design/patterns/confirming-acknowledging.html (3) http://developer.android.com/design/building-blocks/dialogs.html http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/

2
  • I liked the previous/next analogy. I hadn't thought of it that way before. Dec 13, 2012 at 19:24
  • Be careful with those links, as they mostly apply to regular desktop/web applications. And the eye ball movement is less relevant for mobile (small) devices. Just like the other answers suggested, I would rather go for platform consistency (your second link), and/or consider how reachable are the buttons are (see the diagrams in Luke W's post).
    – Padrig
    Dec 15, 2012 at 10:42
7

In Android 4.0, positive buttons are on the right and negative buttons are on the left. This is commonly seen in Android alert dialogs and uninstall screens where "OK" is on the right and "Cancel" is on the left.

Also, the Android design guidelines have always suggested steering away from button bars across the bottom of a screen as that's more of an iPhone design paradigm. The most recent design guide for Android suggests moving functions such as save and cancel to the Action Bar if possible.

Oddly enough, the example given in the Android design guide shows "Save" on the left and "Cancel" on the right which is completely at odds with the rest of the system UI.

http://developer.android.com/guide/topics/ui/actionbar.html#ActionItems

1

In most languages users read from left to right. For this reason it is my opinion that the action button (SAVE in this case) should be placed on the right hand side.

I found an interesting article on this topic on UXMovement that may help. http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/

5
  • What example you gave holds good for a normal desktop or web application. The scenario changes when we have a mobile application because now we are using our hand to navigate and the screen size is also small so there is not a lot of eye ball movement.
    – ajayashish
    Jul 17, 2012 at 7:34
  • @ajayashish I think the point Lauren was making is that in LtoR languages you proceed forward on the right (i.e. you turn the page on the right) therefore actions deemed as progressing forward make sense to be on the right for such cultures as LtoR reading occurs. It wasn't a point about the amount of space for eyeball movement.
    – JonW
    Jul 17, 2012 at 7:44
  • @JonW Agreed. Just trying to get good answers or links to understand whether to put primary button on right or left if the device is a mobile
    – ajayashish
    Jul 17, 2012 at 7:50
  • @ajayashish To me it is more about flow more than eyeball movement. Jul 17, 2012 at 7:50
  • 1
    Have to agree here with @Lauren, no matter what the device, with left to right writing systems the button on the right is more likley associated to moving forward, whereas left is moving back.
    – kontur
    Dec 12, 2012 at 7:23
0

As MCeley pointed out, it's always good to look first to your primary platform. Of course, UI standards are not quite as tight on Android as iOS -- a plus and a minus ;)

The other consideration: How do people use the device in question. On a mobile, where one handed use is the norm and the thumb is the primary action "tool", the lower left corner is an ideal position for the positive action.

Your Answer

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

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