Quick Tip: Improve the Usability of Your Online Forms

November 10, 2009 | Design Basics

Like this? Share it.

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.

The form I was using to upload my document.

The form I was using to upload my document.

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.

This is the order or how I needed to access the buttons.

This is the order or how I needed to access the buttons.

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.

3 comments

  1. Mike Maddaloni - @thehotiron | November 10, 2009 at 8:44 am

    I’m guessing this was done on your Mac – can you post the link as I would be interested to see fi it were different on a PC, or on another borwser? It could be different – for better or worse!

    mp/m

  2. Emily Brackett | November 10, 2009 at 8:51 am

    Mike, I’d be interested to see if the layout itself is changed by the PC vs. Mac. I’ll send you the info, and it would be great if you could upload a screen shot for us.

  3. Mike Maddaloni - @thehotiron | November 10, 2009 at 10:10 am

    Sadly, it’s the same, only that the Browse button is square.

    Another place that sticks out where the action button is at the top is the SmarterMail Web interface.

    mp/m

Join the Conversation

 

 

 


Answer using numbers, not text. Thanks. Time limit is exhausted. Please reload CAPTCHA.