Find out more about our consulting services. McLean. Boston. New York.
There are few things more frustrating than being shut down by an online business because of their terrible forms (#TOTALFAIL). Books (or tweets) could be written on the subject of form usability, as they are often the worst offenders in my travels on the web. I’m shocked when I’m confronted by an awful or broken form on the site for a large organization that relies on their brand to invoke some level of trust.
Here are a few ideas and highlights that the front end development and UX teams at NavigationArts have come up with to promote more friendly and usable forms.
Forms often perform the most critical task on your website- they connect a site owner to its users or customers. In his book, Web Form Design: Filling in the Blanks, Luke Wroblewski has listed the three main areas in which forms can help your business run smoothly:
The most obvious thing you should do is test your form. Make sure it behaves and responds as it should with both good and bad input.
A great way to offer some suggestions to your users about what content you are expecting is by using input mask plugins. There are some good plugins out there such as Dynamic Field Masking Plugin and the jQuery Masked Input Plugin to help you accomplish this.
Another great way to provide feedback about a particular form field without otherwise muddling up the interface is by using placeholder text- a tool supported in most modern browsers.
Contextual help, in the form of tooltips and icons, is another great tool to create user friendly forms. This is especially helpful when a field may require a more in-depth explanation than what can be provided by other means.
Native form elements often do not translate well on touch devices because of their size. Redesigning forms for touchable use is also a great opportunity to address the aesthetics of native forms which are, across the board, fairly drab and unappealing. Increasing the size of elements so that they can be more easily checked or clicked is important.
Using the appropriate HTML5 form elements is not only more semantically meaningful, but it also enables better usability on devices that can respond to the type of input with a more appropriate response. For example, instead of a text field for a phone number, input type=tel , on many devices the phone keypad is exposed instead of the QWERTY keypad.
Providing real time validation is often useful for keeping your users on track when filling out a form. It is a more satisfying experience for them to correct a field based on a validation hint than to see a big, ugly fail message flashing at them in red. Ouch!
In order to facilitate this on the front end there is an old standby jQuery plugin aptly called “Validation.”
Forms are a key part of understanding your user and gaining relevant information from them to support and grow your business. By providing friendly and usable forms, you are allowing your users to feel successful, making them more likely to return to your site.