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?
#1 by Jaros?aw Dobrza?ski on November 16th, 2009
Quote
Sam, I’d go for the option with Search button to the right of the screen, but I’d remove Clear button. I doubt people use this button / feature on purpose, but I can imagine it being use by an accident. There’s nothing more fustrating than clicking (or hitting space / enter, when it gets focused) that button and losing all you’ve just entered…
#2 by Jaros?aw Dobrza?ski on November 16th, 2009
Quote
On second thought, I still think Clear button is not needed but I have changed my mind about location of Search.
When it’s to the right of the screen there’s a risk a page is wide and you hve the labels and inputs on the left side of the screen but the button moved to the right.
Placing it to the left will prevent that. Also, as far as I remember this was the way Luke Wroblewski recommended in his book ‘Web Forms Design’ (correct me if I’m wrong, I read it a while ago…)
It would be nice to hear the other views on that too
#3 by Sam K on November 16th, 2009
Quote
Hi Jarek! Congratulations on being my first commenter!
I should have maybe explained that the form is a fixed width (and will remain so) so the “Search” button, if placed on the right, would never extend beyond the edge of the fields themselves.
I, too, have settled into the habit of not including “Clear” or reset buttons on forms when I’m drawing them. But we had it here and I decided to keep it, partly to see how best to cater for such a button should a client absolutely insist on it.
Some of Luke’s stuff on forms is really brilliant.
#4 by Paul Annett on December 6th, 2009
Quote
The Clear button isn’t needed – better to have whitespace instead of a “destroy all my work” button! The Submit button should be aligned with the left edge of all the form fields, so each user input (including Submit) starts in the same position on each line making it easier to scan down the form, right to the call-to-action, without ever having to move your gaze left or right to try to find it.