Get ready for some great content coming to your inbox from the team at UserTesting!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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…
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.
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!
This kit contains form stencils for both desktop and mobile and has downloads for OmminGraffle, Visio, Fireworks, Axure, and InDesign.
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!
Join 120,000 subscribers and get articles like this every week.
Get ready for some great content coming to your inbox from the team at UserTesting!