Ah yes, the four-letter F word. Lets not beat around the bush here, we all hate the form. Well let me be more accurate with that statement. We all hate completing forms. But as we go about our everyday lives on the web, we’re confronted by these annoying SOB’s relentlessly and mercilessly on every turn we make. Unfortunately, forms hold all the power and are a necessary evil when it comes to completing a purchase on Amazon or creating an account on Facebook.
So, as designers for the web, how can we make forms less evil and more usable? Why by following these 10 commandments of course!
- Use labels above your fields for reduced completion time.
- Try to avoid using optional fields. These only make the form longer, and can’t be that important if they’re optional.
- Group related content together for more organized forms.
- Remove secondary actions and focus on primary ones. That is, most people don’t use “reset”, “cancel” or “back” but rather use “submit”, “continue” and “register”.
- For long forms, break them out into steps with a progress indicator.
- For short forms, consider using a modal window to allow users to sign-in or register without leaving their spot in on site.
- Provide flexible data input. Don’t you hate it when you have to enter your phone number in a particular format? Allow users to enter as they prefer.
- Clearly communicate when an error has occured at the top of the form in a visual language that can be repeated next to the field in question.
- When a user submits a form, provide a visual clue that the “wheels are turning” and consider deactivating the “submit” button.
- Once the form submission is successful, let the user know. This way they can stop sweating and know they have survived their confrontation with evil.