September 19, 2003 | View Comments (5) | Category: Design
Summary: How to make forms more useful for both your users and you.
Forms have to be one of the most annoying things that a user has to interact with on a website. When I creating forms on my websites I try to make them as quick as possible. I like to know that users are putting in the information quickly and accurately, which can save me a lot of hassle in the long run. Here are some tips that you could follow.
I always wondered why some websites ask for and sometimes even require that I provide my home address so that I may access their services. It does not make sense, especially when I know they are not going to mail me anything and they supposedly state that they are not going to sell my personal information to another company. If you really do not need the information do not ask for it simply just to ask for it.
Another irritating item and I think most of us are guilty of is asking for first and last name in separate fields. If there is never going to be a time when you must separate last name from first then do not require your user to. A simple "Name:" field works just fine most of the time anyways. However, if you are unsure about whether you will need separation from first and last name then proceed to separate them.
One of the more overlooked aspects of forms are the sizes of the input boxes. For example, in the majority of blogs where you can leave comments the form asks for email address and url address. Make these boxes large enough so that when a user is typing in their email address and url they can see what they are typing without being cutoff. This alone can prevent many typos. If the text box is too small some users may feel they are not typing in the correct data if their input overflows the box. Help your users out.
Nothing can be more irritating than filling out a form and receiving an error (no matter how helpful the error is) telling me that I forgot to put in my hair color. Going back to the form I realize that there is nothing telling me that hair color is even required. It would be great if required fields could be highlighted or if this is not possible then at least make the text bolder than non-required fields.
The label tag helps to distinguish which label goes with which box. This is more helpful for accessibility reasons and if the user is use to clicking on the labels instead of inside the text box to get the cursor as you can do in Windows apps. The fieldset tag helps you group sets of inputs. This helps the reader associate what information relates to each other.
The <legend> tag can also be very useful in identifying different groups of information on a form.
One of the greatest overlooked attributes (next to accesskey) is the tabindex attribute. This attribute allows you to control where the next tab press leads the user. Very helpful for users who do not or cannot use mice. Also helpful for web veterans who know that it can be quicker navigating a form by pressing the TAB key than by using the mouse.
It is very easy to scare of potential customers of your site by requiring them to fill out forms before they get a chance to see any of your goods. Forms are a pain enough as it is, please do not make me fill out one before I even know what is going on.
These are my major gripes with forms. I am sure there are other improvements that can be made to forms, but if you follow these at the very least you should see more usable forms.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/2
Maybe the site can filter out comments that question my wisdom? :) j/k
Yeah still gotta work on the url field. I just grew impatient because I needed to start writing again.
Scrivs (http://www.9rules.com/)
Another great thing you can do with the inputs is already have some of them prefilled like the url box. I could put "http://" in there and hopefully everyone would figure out that is what they need to type.
Scrivs (http://www.9rules.com/whitespace/)
Depends. Not everyone has a web link. If you strip it somewhere along the line or don't post the link in their name unless there's a valid domain there, that'd work.
Now... forms...
My number one rule... NEVER use the reset button.
Most especially, never use the reset button as the first button in tabindex after the comments area where someone would tab and hit space to submit... and lose all their stuff.
Tabindexes are only useful if your form is divided in an unusual manner, eg, multiple columns wide. Otherwise you're either interrupting the natural flow people expect, or wasting code replicating what the browser would do anyway.
Access keys are very rarely useful. That's something from software that really didn't need to be ported over. If it's an intranet application that a given person is going to use frequently and lends itself to access keys, it may be of use, but otherwise it's more effort to learn the system than it would be to fill it out 10 times without.
Another wise thing is to use dropdowns (or something other than free text, anyway) for anything predefined that's going into a database, but NOT to make it more complicated if it isn't. If you want someone's address, and it doesn't have to get sucked into something, let them type it out, it's faster than a dropdown for city and state, or date of birth or whatever.
On the widths, I agree to a point. A 6 character wide box is too small for an email or web address. But making one wide enough to hold an entire web address will mess up formatting and isn't really particularly useful. I usually use the default size (IIRC 20 or 25 chars) unless it's something like a zip code or state abbreviation.
Another thing on that topic - I bet if you reduced this textarea by 5 characters or so in width, it'd take care of the right side pushing down the left side.
JC (http://www.thelionsweb.com/weblog)
I know that I definitely need to clean up the forms that I use on my site. I just haven't gotten around to it, as I've had other things that I'd rather work on. I'll definitely keep this post in mind when I get to it, though.
milbertus (http://www.milbertus.com)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
stupid network. I had a good reply to this and my connection timed out while I was submitting it. It did remember some of my personal info though. Name and email. URL came up as "undefined"
I'll have to redo my reply later. Glad you got the site up and running.
JC (http://thelionsweb.com/weblog)