Where do form buttons belong?

Where do form buttons belong?

Queron Jephcott | 2/03/2011

We recently had some discussion regarding where button belong at the bottom of forms.

If you don’t have time to read this whole post, here’s the quick answer:

There isn’t one.

Now for the slightly longer version... button order.

I wouldn’t say I’m a Windows fan, however it’s what I’ve grown up with and what I use today. Therefore, when it comes to button order I like my positives on the left and negatives on the right. I’m not going to go into detail on why Windows chooses this order and OSX uses another, because there are plenty of articles out there about it.

Outside the world of operating systems and into the world of the web, we’ve got a number of form layouts that are popular. My example is forms with right aligned labels. There is evidence that suggest that both right aligned labels and vertically stacked labels decrease the time taken to complete a web form. This being the case, we start to build a strong visual line down the left-hand side of the form fields.

Below is a simple login modal window with two common button placements. While the ‘Login 2’ button adheres to the accepted concept of right align positive actions, the ‘Login 1’ button uses the strong visual vertical line of the form fields.


 
After feedback from some colleagues in the field of eye tracking, it seems there is strong evidence to suggest that users will find the ‘Login 1’ button before the ‘Login 2’ button. This not only speeds up the completion time of the form, but requires less conscious thought by the user.

Like most concepts in web design, there’s plenty of support for each side. As stated at the start, there’s no definitive answer. The proof of this lies in the following web page:

http://designreviver.com/inspiration/100-sites-with-outstanding-login-forms/

This page has screenshots of 100 login forms, almost all recognisable names. As you scan through the screenshots, it becomes apparent that there is no ‘right’ (left, right or stacked) way to position form fields and buttons.

Alignment aside, the most common theme I could see in these screenshots supports the idea of getting that ‘Cancel’ button out of there.


 
Don’t get me wrong, modal windows need a way to close, however placing a big cancel button next to your positive action, left or right, just gives a percentage of your users something else to accidentally click. People are on this form to log in, that’s what they want to do.

tags: Information Architecture ,  Web Design