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 7/7/14.

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

amazon-form

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.

Read More »

label_allignment

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

Read More »

Bad Forms

Bad Forms

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.

Read More »

Simple but Crucial User Interfaces in the World Wide Web

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.

Download the PDF »

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.

Read More »

multi-column-reading-paths-small

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.

Read More »

betterfedex

37BetterFedEx

A classic post from 37signals comparing FedEx’s problematic form with their redesigned “37BetterFedEx” page. Especially shows the power of section groupings.

Read More »

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.

Read More »

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.

Read More »

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.

Read More »

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.

Read more »

Effective Web Form Design

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.

Read more »

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.

Read more »

Mobile Forms Usability

Mobile Form Usability Splitting Inputs

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.

Read More »

Form Captcha Issues

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!

Read More »

mobile inputs on iphone

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.

Read More »

hotel-mobile-forms

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.

Read More »

RemoveElementsHertz

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.

Read More »

formhtml5fixes

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.

Read More »

mobile-friendly-email-forms

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.

Read More »

multi-step-form

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.

Read More »

Forms Testing and Analytics

How to Track Form Fields as Pageviews in Google 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.

Read More »

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.

Read More »

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.

Read More »

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.

Buy on Amazon »

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.

Buy on Amazon »

Defensive Design For the Web

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.

Buy on Amazon »

Courses and Presentations

Web Form Design Best Practices

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.

Browse the Course Outline »

Designing Web and Mobile Forms

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.

View the Presentation »

Forms Usability Design Best Practices

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.

Watch the Presentation »

Best Practices for Form Design

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.

View the Presentation »

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.

Get Inspired »

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.

Get Inspired »

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.

Get Inspired »

Responsive Design Form Inspiration

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.

Get Inspired »

Responsive Design Form Inspiration

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.

Get Inspired »

Form Building Frameworks

Jformer Jquery Form Framework

Jformer

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.

Read More »

Formalize Form UX Framework

Formalize.Me

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!

Read More »

Uni-form Framework

Uni-form

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

Read More »

Zurb Foundation Framework

Zurb Foundation

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.

Read More »

Form Controls on Twitter Bootstrap

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…

Read More »

Omnigraffle Stencils for Twitter Bootstrap

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.

Read More »

Best UX Form Stencils

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!

Read More »

YUI Stencils for Form Design

Yahoo! Design Pattern Library

This kit contains form stencils for both desktop and mobile and has downloads for OmminGraffle, Visio, Fireworks, Axure, and InDesign.

Read More »

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!