November 10, 2009 | Design Basics
Today, I was online trying to complete a transaction. I needed to upload a file from my hard drive to the web site. Probably many of you have seen this type of form, where you browse for the file, select the file, and then upload it.
Can you spot the problem with this form? If you try to use it, it would probably be obvious to you. Like anything else (that’s English based) we read from top to bottom, and from left to right. But this form has the buttons in the opposite order of how you need to use them. First you browse to the file; then you submit it.
Initially finding the browse button, wasn’t too hard, but the funny thing was that once I chose my file and I waited for it to upload, then I kept hitting browse again. It is in the spot where we naturally expect a button would be to “submit”, “go” or otherwise process a form. We read from the top, left to the bottom, right and so the bottom right tends to say “finish” for us.
Another quick note about this form design is that the browse button clearly looks like a button because of it’s three-dimensional look, but the submit doesn’t look obviously clickable.
It seems to be a common problem for forms to have the submit buttons at the top. But this can cause people to click it too soon and get frustrated as they get sent back to the form with an error message glaring at them. By having the submit at the bottom, it suggests to the form user what the expected steps are: 1) fill out form 2) submit form. That is how it should be positioned: top to bottom. By putting the submit at the top, many will click it thinking it has more of a “next” functionality, rather than submit.
When it’s OK to put the submit button at the top
While it generally makes sense to have submit buttons at the bottom of your form, there are a few times you may want to repeat them at the top. This is generally done when a form auto-populates with information, and someone doesn’t want to have to scroll down to get the submit button. An example of this is a form that a viewer has to fill out every time, such as a login form. In that case it’s OK to have a submit button near the top, but you may also keep one at the bottom—depending on the length of the form.
This is quick example of how you can use design to improve the functionality of your web site.