Ugly. Frustrating. Confusing. Buggy. These aren’t exactly the terms you want visitors using to describe a key component of your site, but we’ve all seen plenty of web forms (and paper forms for that matter) that deserve those labels – or worse.
The potential payoff for optimizing your web forms is huge. In Web Form Design: Filling in the Blanks, noted interface designer Luke Wroblewski reported that a solid redesign of a bad form could increase completion rates by 10-40%. How many UI tweaks have that kind of impact?
If you’re ready to seriously tackle form usability on your site, you’ve hit the jackpot. There are plenty of resources available, and we’ve collected the best in one place, including 8 insightful resources on mobile form UX. And since there’s not always consensus on some of the best practices, remember that testing your forms is the best way to make sure your changes are indeed improving usability.
- General Form Usability
- Mobile Forms Usability
- Forms Testing and Analytics
- Courses and Presentations
- Form Design Inspiration
- Form Frameworks
General Form Usability
An Extensive Guide to Web Form Usability
There’s more to designing the best forms than choosing the right colors, buttons and jQuery plugins. This post touches on all the aspects of form design you need to build a form that will make your users happy, including the six components of web forms, and the three main aspects of forms that affect usability.
15 Steps Towards Better Form Usability
These steps are essential to building better forms. This post gives 15 pieces of advice for building forms, such as “don’t force formatting,” “don’t reset the user choices after submission,” and “use top aligned labels.”
When there’s an entire website dedicated to bad forms, you know there’s a real forms problem in the interwebs. This site is good for more than just a laugh though; in addition to examples of absolute fails like this “optional and mandatory” field on LinkedIn’s site, you’ll also find sections entitled Good Forms and Best Practices.
Simple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form Design
This paper from the Department of Cognitive Psychology and Methodology at the University of Basel in Switzerland lists 20 form design guidelines, indicates which of them are supported by empirical data, and lists no fewer than 25 references. Yeah, we guess it might be helpful.
Sensible Forms: A Form Usability Checklist
We often focus on big usability problems, but sometimes it’s the smallest quirks in our forms that prove to be the most frustrating to users. This post provides a nice checklist to use as you develop forms that make your user’s lives easier.
Form Field Usability: Avoid Multi-Column Layouts
This post shows why you should (almost) never use multi-column layouts in your forms. Multiple columns confuse users and are often interpreted quite differently. Two exceptions are first and last name fields as well as state and country fields.
A classic post from 37signals comparing FedEx’s problematic form with their redesigned “37BetterFedEx” page. Especially shows the power of section groupings.
Web Site Usability For Improving Online Forms
You won’t find a single screenshot in this post, but we like it anyway. Why? Because the author, Kim Krause Berg, has been doing user testing on forms for years, and it shows — not just in her enthusiasm for the topic, but in her ability to explain the user’s perspective. Every web team should have a consumer advocate like this.
10 Tips for Optimizing Web Form Submission Usability
A rather traditional post on form usability by most standards, this post made the list because of the clear markup on the screenshots as well as a suggestion that we don’t come across often enough: periodically save user data when possible and necessary. A handful of good form tools and resources are included.
Stop Password Masking
Jakob Nielsen counts password masking among “the web’s cobwebs” — a commonly accepted practice that should have been abandoned long ago. He argues that not only does password masking result in more errors, but he rejects the assumption that it increases security, and he points out that it might even increase support costs.
Women On Top: Inappropriate Dropdowns
Even if you don’t collect titles in your forms, the concluding recommendation of this post remains applicable: In situations where a select menu doesn’t have a natural order (such as chronological or alphabetical), consider using analytics to put the most commonly-selected items at the top of the list.
21 First Class Examples of Effective Web Form Design
Consider this your visual primer on how to make your forms effective and usable. Each example illustrates a different principle of form usability. Once you’ve achieved all 21, you may pass “Go” and collect $200.
Placeholders in Form Fields Are Harmful
Many designers attempt to conserve space in a form by including a hint or description of the required information within the field itself. In this article, you’ll learn why it’s a better idea to leave the placeholder text out in the open.
Avoid Splitting Single Input Entities
When designing forms for mobile, keeping it simple is the name of the game. If you need a single piece of data, you shouldn’t unnecessarily split it into separate fields. Should it really take 11 interactions to enter a phone number? This article will make you think twice about splitting your inputs.
OneNote for iPhone: Your Org Chart is Showing
Interestingly, it seems that Microsoft thought users who downloaded the OneNote app were looking for a challenge. This article discusses the comedy of errors that is the Windows Live signup process from the OneNote app, and provides a great example of how a large organization’s internal structure can cripple seamless user experience. And if you learn one thing from this article, don’t EVER use Captcha on a mobile form!
Web Form Innovations on Mobile
Mobile forms present many unique challenges, but innovations have quickly developed to make forms on mobile devices much more manageable. Are you aware of them and are you doing all you can to make sure they are implemented correctly? This article from THE expert, Luke Wroblewski, will help you make sure you aren’t missing out.
Better Mobile Form Design: Small Enhancements Make a Big Difference
Another article from Luke Wroblewski, compares two mobile forms for booking a hotel. One is workable, but presents some challenges. The other one is easy and almost…enjoyable(??) to use! Amazingly only a few small enhancements set the forms apart.
Mobile Form Design Strategies
When should you use a locked drop down, or when would it be better to use predictive search? Should you remove, combine, or improvise? When should you keep everything on one page, or when would it be appropriate to break the form into multiple pages? Filled with best practices and great examples, this article provides a great foundation for creating a seamless mobile form UX.
Improving Mobile Site Form Usability with HTML5
This post doesn’t speak in generalities, but gives you real examples on how to improve your mobile forms using HTML5. Examples include code and links to api and jQuery resources. These tweaks will help you optimize your current desktop forms for mobile.
Improving the Usability of Email Subscribe Forms on Mobile Devices
Campaign Monitor breaks down how even with a simple email subscribe form, there are important things you can do to optimize for mobile. One is to use the “email” input type, which will give many of your users a special keyboard with the correct characters for inputting an email.
Mobile Form Usability Design
This post takes on some of the more challenging aspects of designing a mobile form, giving insight into multi-step forms, validation issues, and auto-saving.
Forms Testing and Analytics
How to Track Form Fields as Pageviews in Google Analytics
Yeah, we started salivating when we read this title too. Conversion funnels on a per-field basis? Awesome. The author explains the potential downsides of this setup and how to mitigate them. Start finding out where people are leaving your form, not just which form isn’t getting enough submissions.
3 Ways to Test Your Online Forms for Better Conversions
Formstack is one of the top online form builders, and they give three simple tests you should run on your forms. One suggestion we particularly like: cut your lead generation form in half and test the impact on leads. Yes, there’s a balance between the value of additional leads and the cost of potentially unqualified leads, which is why this test is such a great idea — the results will vary from site to site.
3 Essential Tips for Testing Online Forms
These Formstack guys really get around. Optimizely featured this guest post from a conversion optimization specialist at Formstack, which focuses on three key elements to test — along with ideas on what to change. Advanced web designers will find the recommendations familiar, but it’s worth noting what this optimization specialist lists as the top 3 elements to test.
Forms that Work: Designing Web Forms for Usability
It’s a book dedicated to form usability, and Steve Krug wrote the forward. Do we need to say anything else? Ok, how about the fact that Jakob Nielsen says you’ll probably double your profits if you put this book’s principles to use? This is the one to pick up if you’re going to read one solid resource on forms this year.
Web Form Design: Filling in the Blanks
Luke Wroblewski has managed to write a research-driven book that’s also easy to read. Clear examples (from his work at Yahoo! and eBay, as well as others) keep this at a practical level for any web developer and designer. If you have any nagging doubts about best practices you’ve read about, pick up this book.
Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points
Your users are going to make mistakes on your form. Count on it. Plan for it. The gurus at 37 Signals (of Basecamp fame) have spent a LOT of time in defensive design in order to make their software approachable and usable by really anyone. Learn how to anticipate, prevent, and handle user errors.
Courses and Presentations
Course: Web Form Design Best Practices
by Luke Wroblewski
You can pick up Luke Wroblewski’s book that we mentioned earlier, but if you learn better via video, check out his course on Lynda.com. (If you don’t have a Lynda subscription, you can also pick up the course on DVD for $100.) This course for all skill levels covers everything from form structure to input masks to minimizing the use of forms altogether by using alternative data collection techniques.
Presentation: Designing Web and Mobile Forms
by Chui Chui Tan
Wow. We’re stunned by this presentation. 160 slides, and dozens upon dozens of screenshots. This presentation was part of a workshop presented at the Usability Professionals’ Association Conference of China, and while “Mobile” is in the title and gets great coverage, the first 100+ slides cover general web form design.
Seminar: Forms Usability Design Best Practices
This 1-hour seminar, you’ll hear and see informative critiques of dozens of web forms, a demonstration of best practices, and ideas for adding desirability and satisfaction to forms.
Presentation: Web Form Design Best Practices
by Luke Wroblewski
We’ve shared a couple of other resources from Wroblewski, but for those who like to learn from annotated slideshows, this 118-slide presentation with nearly 50,000 views on Slideshare will be a great resource. As usual, his content is noteworthy not only because of his experience, but also because the recommendations are based on analytics, usability studies, eye tracking, and surveys.
Form Design Inspiration
Wufoo Forms Gallery
Wufoo’s gallery deserves its own entry here because it’s one of the biggest and best collections of form templates and styles we’ve ever seen. Not only can you get a quick idea of which fields you need — or don’t need — on your form, but also you can see best practices in action. Or just browse their collection of beautiful and customizable themes; they even let you download the CSS.
50 Examples of Creative Contact and Web Form Designs
Creative design can sometimes interfere with usability; other times, it can enhance it. You’ll find examples of both in this post, but there’s plenty of good inspiration here. We especially like the simple but attractive design for a feedback form to let a user indicate whether their feedback is positive or negative.
Signup Form Usability and Design Best Practices
Maybe the traditional white form suits your company just fine. But if you’re ready to try something a little more bold or fun, check out this post, with suggestions to use bold typography and bright, energetic colors. The included gallery of attractive form designs should serve as inspiration if you want to try something new.
Designing a Responsive Form, 20 Inspirational Solutions
One of the challenges of responsive design is to making sure that elements look right and work right on any size screen. These 20 sites have figured out how to balance beauty and functionality in a responsive form.
25 Creative Web Forms
A form can be a great and unexpected place to showcase a company’s style and tone. From the minimalist to the ornate, these 25 examples will get your creative gears turning.
Form Building Frameworks
Jformer is a form framework written on top of jQuery. It allows you to quickly generate beautiful forms that validate both client and server-side, and process without changing pages.
“We all have work to do, don’t waste time wrestling with forms,” says Uni-form. Uni-form standardizes form markup and styles it with CSS, narrowing it down to two layout options to choose from. You can also easily build a form on their formbuilder, then copy and paste the code into your document.
These forms are worth taking a look at. With Foundation forms, you’ve got options. Foundation forms aim to be powerful, versatile and responsive. They’re highly customizable, but also look great out of the box.
This well known framework has standout forms controls! Besides beautiful styling, it includes add-on functionality for prepending and appending an input. You can add button dropdowns, disable inputs, validation…
Twitter Bootstrap Form Stencils for Omnigraffle
If you decide to use the Bootstrap framework for your forms, here is a great collection of Omnigraffle stencils to make your job even easier.
Best Practice UX Forms Stencils
This set of Omnigraffle stencils provides you with form stencils that follow best practice UX form design. You can implement best practices even while building wireframes!
Yahoo! Design Pattern Library
This kit contains form stencils for both desktop and mobile and has downloads for OmminGraffle, Visio, Fireworks, Axure, and InDesign.
Have something useful? Let us know!
If you have written a resource or discovered a tip for designing and testing your forms, let us know in the comments below.
If you liked this article, be sure to check out our Navigation Treasure Trove too!
About Phil Sharp
Phil is VP of Marketing at UserTesting, where he directs the marketing strategy, communications, online campaigns, and web optimization. With a background in marketing management and SEO, he leads the marketing team in helping companies discover the importance of listening to their users.