Forms have to be one of the most annoying things that a user has to interact with on a website. When I am creating forms on my websites I try to make them so that the user can get through them as quick as possible. I also 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 I have come up with to hopefully make your user’s experience a bit easier.
Only request information that is needed.
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.
Let the form guide your users and decide for them what type of data they need to input.
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.
If it’s required LET IT BE KNOWN
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.
Use the <label> and <fieldset> tags
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.
Use the tabindex attribute
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.
Only ask for information at the last possible moment
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.