The Age Old UX Question… Submit Button on the Left or Right?

A touchy topic to some, but the fact of the matter is either treatment is very much acceptable. In addition, its one of those things where the most intuitive placement or treatment is simply because of convention. Unfortunately, convention isn’t always an indicator of efficiency or ‘elegance’. Following convention blindly would be a smack to the face of creativity.

I have had a couple of arguments in my day regarding this seemingly harmless question… where do you place the primary action? Also, how do you make sure the primary action is appropriate in the hierarchy of your webpage?

Lets take a simple form for instance, say a registration form or a simple yes/no confirmation message, where do you put your save/submit and cancel buttons. Here are two distinct theories.

1. Grouped together on the left. Submit to the left of cancel: this works pretty well, the eye naturally flows from the last field to the save button. BAM! The user has submitted the form. However, there is a case where it gets a little awkward. If we are in a multiple page form, maybe some sort of checkout process, and we replace cancel with the word back and save with the word next, it seems totally weird. You would never see Google search results with previous being on the right.

2. Grouped together on the right. Submit to the right of cancel. This one is still effective. This is what the mac OS does and it makes sense. If you were to turn the page of a book, signaling you were done reading the current page, you would turn the page on the bottom right corner. This makes sense.. but most people are accustomed to pc’s which float both buttons to the right with the save button being on the left (the complete opposite!). However, when we replace the save with next and cancel with back, it totally makes sense now.

So let’s get scientific, ill go get my lab coat… lots of user testing including eye tracking has been done on the subject i.e. http://www.lukew.com/resources/articles/web_forms.html and basically it turns out… it really doesn’t make that big of a difference (ha ha, so much time wasted reading this post). The only setup in which users encountered failure was when the save and cancel buttons where split across the document.

So What Have I Found… Making the primary action ‘pop’ is the real key. The best way to do that is to GET RID OF THE OTHER BUTTON! In the case of the multiple page form I started putting the back action at the top of the form in more of a breadcrumb location to avoid putting two buttons down there in the first place. Now there are cases in which removing the cancel button all together simply won’t work. So in this case is best option is to play down the button visually. Making it simply a link or making the button smaller, feels awkward. The best solution seems to be subduing it using color, shape, and shadow. Floating the buttons to the right gives the eye a little more time to travel from the last field but the impact will be fairly trivial, there are probably much more important challenges for a ux designer to worry about..

- dedicated to stubborn tech guys.