I’ve been reading a number of great articles on forms recently – covering things like general layout and inline validation (Luke Wroblewski seems to be the world authority on forms – most of his advice seems well worth paying attention to). But I’ve been looking at something recently and I’m wondering how best to implement it, namely the positioning of the buttons for submitting a form.
I have a simple, linear search form with "Search" and "Clear" buttons. Automatically, I would have considered laying it out like this:
Let’s set aside the accessibility argument of whether form labels should appear above fields – I’d like to consider the buttons here. There’s no requirement for multi-language support, either.
I can think of a few reasons why this is unfriendly. Firstly, all the form labels are right aligned and if a user is tabbing down through each of the fields their focus will suddenly jump to the left when they get to the buttons. Secondly, is there enough of a distinction between the "Search" and the "Clear"? And whilst from the text it’s clear which is the call to action, is it as obvious visually? Well, no, not really. Thirdly, how necessary or common are clear/reset buttons these days? Because it’s a separate topic, really, let’s assume we’re going to persist with the "Clear" button.
My first thought was "What about moving them to the right?" Like this…
So I’ve flipped the buttons around and shifted them over to be inline with the right-side of the fields. I think it’s a little more intuitive but it doesn’t deal with the spacing issue nor the intended call-to-action.
Colours are a potential way of differentiating but it will a) set a precedent in terms of styling throughout the application and b) I have an accessibility requirement so colour to convey meaning is a no-no.
I think it’s a little bit of an improvement, but should I go with it or can I do anything else with it?
How about…
The "Search" and the "Clear" buttons are totally separated and (to me) it’s clear that the search is the main call-to-action – and that’s probably what we want. If a user is tabbing down through the fields the tab out to the button will be naturally followed.
The clear button is there and can be used, but I hope it comes across that it’s not something we really want users to be getting too involved with.
Now I appreciate that the all of my reasoning is pretty subjective. I don’t have any research I’d be keen on to get some thoughts and opinions about this particular question – are any of my three options go-ers, or have I missed the best-practice approach completely? Any other suggestions?