The Form Usability Treasure Trove: 42+ Top Resources

| April 4, 2013
Sign up to get weekly resources, and receive your FREE bonus eBook.
Thank you!

Get ready for some great content coming to your inbox from the team at UserTesting!

 This article was updated on 10/20/16.

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.

Categories:

General Form Usability


An Extensive Guide to Web Form Usability


amazon-form

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.


Bad Forms


Bad Forms

When there’s an entire website dedicated to bad forms, you know forms can be a real problem. This site is good for more than just a laugh though; in addition to examples of absolute fails, 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


Simple but Crucial User Interfaces in the World Wide Web

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.


Sensible Forms: A Form Usability Checklist


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


multi-column-reading-paths-small

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.


Web Site Usability For Improving Online Forms


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


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


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


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


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


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.


Form Field Usability: Should You Use Single or Multi-Column Forms?


Form Field Usability: Should You Use Single or Multi-Column Forms?

This original research article from ConversionXL digs into the usability of multi-column and single-column forms, focusing on completion time.

Mobile Form Usability


Avoid Splitting Single Input Entities


Mobile Form Usability Splitting Inputs

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.


Web Form Innovations on Mobile


mobile inputs on iphone

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 expert Luke Wroblewski will help you make sure you aren’t missing out.


Better Mobile Form Design: Small Enhancements Make a Big Difference


hotel-mobile-forms

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 enjoyable to use. Amazingly only a few small enhancements set the forms apart.


Mobile Form Design Strategies


RemoveElementsHertz

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


formhtml5fixes

This post 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


mobile-friendly-email-forms

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


multi-step-form

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


How to Track Form Fields as Pageviews in Google Analytics

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


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


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.

Books


Forms that Work: Designing Web Forms for Usability


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


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


Defensive Design For the Web

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


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


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


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


Best Practices for Form Design

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 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


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


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


Responsive Design Form Inspiration

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


Responsive Design Form Inspiration

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


Formalize.Me


Formalize Form UX Framework

Formalize.Me does away with inconsistent browser form defaults and gives designers and developers control over the look of their forms. All that’s required is Formalize.Me’s CSS and Javascript file and you’re on your way. Don’t dread form styling!


Uni-form


Uni-form Framework

“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 form builder, then copy and paste the code into your document.


Zurb Foundation


Zurb Foundation Framework

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.


Twitter Bootstrap


Form Controls on Twitter Bootstrap

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


Omnigraffle Stencils for Twitter Bootstrap

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


Best UX Form 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


YUI Stencils for Form Design

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 on Twitter.

    If you liked this article, be sure to check out our Navigation Treasure Trove too!