5 Things to Consider When Creating Your Web Forms

Today's post is from Aidan Bryant, one of our very own Senior UX Researchers. Aidan was kind enough to stop by the blog to help us with the do's and don'ts of creating great web forms. Enjoy!

Congratulations! You’ve made a sweet website that’s practically perfect in every way. Everyone wants to buy your products, everyone wants to use your service, and your mom has finally stopped asking if “that internet thing” has worked out for you yet.

Now there’s just one thing left to do: you want people to actually complete the purchase, right? Maybe you want them to stop futzing around and make an account already. Either way, you’ve decided that your users are going to have to fill out some kind of form. I’m pretty sure there’s only one Universal Truth: people hate filling out forms, whether you’re at the doctor, opening a bank account, or Wesley Snipes deciding whether to file your taxes this year.

Forms are the worst, but we’re here to help! These won’t keep your users out of federal prison, but they might keep them coming back to your site!

1. Do you really need a form?

Do users HAVE to sign up to use your service? Do they HAVE to create an account to complete a purchase?

Sometimes it’s obvious that users will need an account on a website; for example, if they’ll be creating a personal repository (Tumblr) or managing private information (Mint). However, if the user doesn’t need to store or protect information, consider allowing them to bypass this step (which is something the folks at ModCloth might want to consider).

ModCloth requires every customer to register prior to checkout.

I love Modcloth, but I’ve only shopped there once. Unfortunately, I was forced to create an account for my one-time purchase. Generally, if users shop at a store frequently, they're more than happy to sign up for an account in order to get the benefits (rewards, wish lists, etc). However, if it’s their first time making a purchase, they don’t even know if they've enjoyed the experience yet! Plus, if they're on a mobile device, all that typing is annoying and laborious. Forget it!

2. Simplify, simplify, simplify!

This quote from Walden always amuses me. If Thoreau practiced what he preached he would have said “simplify” only once. You can keep from making his mistake though!

The easiest way to do this is to not ask for any information that isn’t 100% absolutely necessary. Twitter and Tumblr do this well—all you need is basic information to get started, and everything else is configured later.

Twitter's signup form requires minimal information.

Creating a tumblr account requires very little effort.

3. Who wants to know?

Simplifying works well for registration and sign-up processes, but sometimes you need a little more information – such as during checkout.

Of course, you'll need their address. "Sure, no problem—how else will I get my package?" your users will say.

What about email address? You'll want to be able to contact buyers with order updates, "Well, okay, but don't spam me," say your users.

What about phone number, in case there's an urgent problem with their order? "Whoa whoa, you already asked for my email address, and I'm on the Do Not Call list. No thanks, pal," your users grumble. Sale lost!

If you think it's necessary to ask for information that users are less willing to divulge, such as email address or phone number, explain why! Users are typically concerned that giving out this information will open them up to “spam” (you might call them newsletters or updates). It will help if they understand why they need to give you that info, and when it'll be used. Take a look at our example below from Piperlime.

Piperlime clearly explains how they'll use your email address.

Piperlime's checkout requires that users enter their email address. Even though this is a pretty common request, they get points for explaining why the email is needed, and that the information won't be shared.

4. Don’t play Calvinball

In the timeless Calvin and Hobbes comic, Calvin and his tiger friend enjoyed a game named Calvinball, the hallmark of which was a set of rules that changed at a whim – neither Calvin nor Hobbes could predict how a game would progress or end!

Calvin tells you all you really need to know about how to play Calvinball.

Calvin and Hobbes loved guessing at the rules, but your users won’t! Make sure any special requirements – or hey, any requirements! – are spelled out at the beginning. Is the phone number required? Tell them! Does the password have to contain at least eight characters, two numbers, and a Russian letter? Tell them!

*(Or better yet, don’t set password requirements – they’re not hackerproof)

If you want to take it to the Bonus Level, tell users in real time if they’re violating any of the requirements – don’t wait for them to submit their data before you correct them.

5. Lower the stakes

You've made your purchase. You’ve registered. You've entered your address (billing AND shipping), your credit card number, phone number, password and email. Just to make it fun, let's say you're doing this on your iPhone. You hit submit, and—

It's gone. Every. Single. Field. Blank.

And at the top of the page, an ugly red banner says "Your email is incorrect."

It could be a horror movie, right? Here are some ways to let your users know that a mistake was made without making them want to destroy the planet (or worse, boycott your site).

DO tell users what they forgot, or mis-entered. (Like the PetCo example below) Avoid the dreaded, nonspecific "ERROR" or "Please fix errors before continuing."

PetCo's shipping address form makes it easy to find the fields that triggered the error.

DO preserve all the information! Deleting everything is literally the worst and your users will give up in disgust.

DO be gentle. Often, users make mistakes because they didn't know any better – for example, neglecting to fill out a required field that wasn't marked clearly. The PetCo example above identifies the problem, but doesn't it look a little mean? Humanize it! Say something like "Sorry! Please enter…." Rethink red or harshly-colored banners, and try not to be too terse.

DON'T be coy! It might get you a date, but it won't get you sales. Make sure all required fields are clearly marked! I'm a sucker for the fields that highlight green or show a little check box when you fill them out correctly! So pretty.

DON'T make users hunt for their error. Snap to it if possible, or detail the fields that need to be fixed, for example, "Phone numbers must include area code." Starbucks combines this and the above tip really well—it explains your error immediately after you enter it!

Starbucks does a great job of showing visitors how to fix their errors and how they can benefit from signing up.

These are just the highlights of how to design a good checkout or registration process! While there's a lot more you can do to make your process easy or even memorable, following these steps will keep users completing signups, returning to your site, and recommending it to their friends.