Recently we stumbled on an article by Andrew Wilshere at Try Design Lab that outlines a number of the best practices in web form design. The piece is titled UI Design Best Practices For Form Design (Part 1) and is long but super informative and useful. It was so good, in fact, that it inspired us to write this post to share a few excellent points Andrew makes in his extensive article.
Great forms are rooted in empathy for and communication with your visitors.
You may know nothing or may wish you knew nothing about web forms. We don’t think less of you for that. But web forms are everywhere and, to some extent, they drive the internet.
Surveys, subscriptions, e-commerce, profile editing, comments, chats, file uploads, file downloads… Name anything you do on the web and it’s likely powered by a form. Forms are everywhere! And though they may seem boring and straightforward at first (i.e. enter information, click ‘submit’), they are actually complex and highly functional tools.
The best forms are the ones you notice least. They’re well planned, easy to understand and, dare we say it, beautiful in their simplicity. They are also accessible to all users. In our opinion, those forms are rooted in empathy for and communication with your visitors. That is to say the best forms consider a user’s needs first and they help each one with concise, clear instructions and navigation. The more user-centric you can build a form, the better it will perform; well built and designed forms increase conversions.
Here’s a drive-by summary of a few of our favorite parts (It was hard to pick!) of Andrew’s article:
Communicate
Give visitors clear, spoken-tone instructions on the “hows” and “whys” of filling your form and also what will happen when they finish. Then deliver on your promise.
Show that you care
Accessibility is critical. Trust that your visitors will be different types of people with different physical and/or mental abilities. Use sans serif, legible fonts at readable sizes with strong contrast. Make your forms navigable by tabbing. Do your best to meet ADA requirements (check out our ADA compliance post to get started).
Give feedback
Let your visitors know how they are doing along the way. Indicate successes and errors with different colors, messages, and/or icons. Make it easy for each visitor to know how to get to the next step in the process, whether they’re registering for your site, subscribing to your newsletter or making a purchase.
Be flexible
Make your forms flexible to receive different types of information. If you have a signup form with a phone number field it should accept entries like this: (555) 123-4567, like this: 555-123-4567, and like this 5551234567.
Keep it short
Less is always more with forms. Think of a form as a journey that the visitor must take AND FINISH. Make the path as short, enjoyable, and accessible as possible.
Thanks for reading. Remember, Andrew’s full article can be read here.