Last week I listed a few free tools to quickly evaluate your site usability. I believe it’s a good follow-up to talk about one of the most important yet overlooked aspects of usability: web forms. Again, I am no usability expert but I have been collecting some materials and reference guides on the topic to share with you.
A few web form optimization basics to start with:
- Make them as short as possible: don’t make your potential customers fill in plenty of details (that might be important but do not apply to all cases) to reach you. Only absolutely necessary fields (name, email, query details) should be required.
- Make them as simple as possible: I hate it when I am asked to give my phone number (or birth date) only in one required format, for example.
- Mark required fields but avoid red color to denote mandatory fields (as this might look as an error). Asterisk or bold font usually work with me.
- Mind the captcha: don’t make the visitors solve some mathematical problems to get through. Make it simple or take advantage of some creative or entertaining options:
- Mind your form buttons:
- avoid extra buttons: this can be argued but I can barely imagine why one would need “Clear” or “Cancel” button when he can just close the window or go back. Instead these buttons oftentimes distress and annoy the visitor;
- make the button language clear (and calling to action): make it “Send” instead of “Submit” for sending a message for example.
- Return the user to the saved form: if the visitor should be returned to the form to correct some mistakes, make sure he gets all the information as he has put it (and mark fields containing an error);
- Make sure your form language is clear: the visitor should clearly understand what to put where, what he missed (with error messages), etc.
- Make sure the user has enough room to type: I hate when I can’t see what I am typing;
- Don’t forget about the confirmation messages: the visitor should clearly understand it has worked out. To me the best option is to get redirected to the same page to see the clear confirmation (thank-you) message (with no interim page that disappears faster than I can read what I have done).
A few web form optimization advanced tips:
- Make your forms internationally friendly;
- Support the keyboard form navigation (tabbing from field to field);
- Organize your fields in a logical order (in other words, don’t make the user give his phone number before he tells you his name);
- Check what users might be used to: very often to ensure your visitors feel at home you just should organize your forms the way people are used to (check similar sites contact forms, make some improvements but don’t make them completely different);
- Mind the logical list order (with drop downs for example, make sure a more obvious option (which is selected more often) is above: e.g. USA vs Afghanistan.
Tips on optimizing form labels:
- Use external labels: this article clearly illustrates why external labels work much better;
- Placing a label above an input field works better;
- With the left of input fields, at least make them right aligned;
- Bold labels are a little bit more difficult for users to read.
Some further reading:
- 25 Web Form Optimization Tips;
- Web Form Design Patterns: Sign-Up Forms;
- Evaluating the Usability of Search Forms Using Eyetracking.
Category
SEO
