Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
1  
I think you should follow the guidelines for your platform (developer.android.com/guide/practices/ui_guidelines/index.html) –  Bart Gijssens Jul 17 '12 at 7:46
1  
And to specify @Bart Gijssens' link some more: Screenshots with affirmative buttons on the right from the same manual –  kontur Dec 12 '12 at 7:27
    
For non-mobile-specific answers, see ux.stackexchange.com/questions/1072/ok-cancel-on-left-right –  3nafish Dec 13 '12 at 19:20
    
a green Save and red Cancel will be also helpful to be fast identified like phones call and cancel buttons –  khaled_webdev Dec 15 '12 at 12:15
1  
i ask also if there is a difference betwenn right handed and left handed user? maybe it will be useful on settings for example –  khaled_webdev Dec 15 '12 at 12:18
add comment

4 Answers 4

up vote 9 down vote accepted
+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/

share|improve this answer
    
I liked the previous/next analogy. I hadn't thought of it that way before. –  3nafish Dec 13 '12 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 '12 at 10:42
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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/

share|improve this answer
    
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 '12 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 '12 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 '12 at 7:50
    
@ajayashish To me it is more about flow more than eyeball movement. –  Lauren van der Vyver Jul 17 '12 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 '12 at 7:23
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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