I was reading some interesting articles on form optimization and I summarized some that I thought were important
Remove unnecessary fields
You have to keep in mind that most of the users are lazy and fields like birth date or gender will make them abandon your form. So ditch them
Keep it simple
Keep the forms as simple as possible.Just because we can use CSS to do all sorts of fancy things with text boxes, doesn’t mean we should. Keeping form fields simple will ensure that customers understand their purpose and won’t confuse them with design elements.
Clear the "Clear" button
Ditch the clear button if you don;t want the users to accidentally delete what they've just entered.
Use point of action references
Users might get confused by the information you're asking for. For example, the 3 digit CVV code found on the back of credit cards. Include a small popup link with more information or make it visible when the users tabs into the field in question.
Use Ajax form validation
Use Ajax validation. It will keep your users posted on whichever they're not doing right in the form. This can be very effective, since it does not break the flow of the process. Its easier to correct an error immediately after entering it rather than after the whole form is completed.
Here's an example from the Odeon website
Two-column vs one
The choice depends on the content of the form, a good practice depending rather on the general alignment. Below is a good example of a simple form that places each label above its related form element.
What are the benefits to this type of form layout, as opposed to a two-column form? First, the form labels have plenty of space to allow for future changes to the text inside them. Another benefit is that the form is not as cluttered looking, having plenty of whitespace in the label areas, so it’s easy to read and easy to associate the labels with the fields.
By contrast, look at the two-column form below:
Especially because of the left-aligned text and lack of color, this form doesn’t have the same clean, visual effect as the previous example.
It’s pretty and user friendly, however to achieve a clean, organized look with a two-column layout, as shown by the example below from Odeon.
Clearly indicate required fields
It’s common to indicate required fields by means of the asterisk symbol (*) in a different color than the rest of the text, so the required indicator stands out. Although most sites nowadays include this indicator, some still fail to use it properly.
The explanatory text that describes the purpose of the asterisk should be placed immediately above the form that is to be filled out, so the users see it before they begin filling it out.
In-field labels
Display labels inside form fields. The label remains until the user starts typing. Here are some good links on this
No comments:
Post a Comment