The Foolproof Form Design Formula

Share this:

So you’ve found yourself in the position of implementing a form(or forms) on your website or blog. Where do you start? How do you ensure it’s not hacky and hard-on-the-eyes?

Research

This is first and foremost. Get out there and research! This is the fun part. Just fill out lots of forms and take note of what part of the experience you enjoyed and what part was distasteful. Make a list of what works for you and what doesn’t. Pay special attention to websites that traffic in similar content as you do. Try to adhere to your “to do” list when you finally tackle your form.

Look at the examples below. If your website dealt with fitness, for instance, you should have checked out these related forms and figured out what worked and what didn’t.

fitness

Keep things clear

Now we get to the good stuff. You have to keep things clear in form-world. What does this mean? Well, the clearer a form is the less mental effort the user will need to extend in order to figure out how to fill it out. You want the end result to be instantly recognizable to the people that surf to your page. Although this seems simple, it can be a bit tricky. Look at the example below.

clear priority

At first glance this looks fine, but notice the form fails to clarify if the user should consider gross or net income. This ends up hurting the user and the form-maker, as the information ends up useless anyways. Strive for clarity at all times when drafting up a form.

Keep things concise

This important. Nobody has all day to fill out an Internet form. You want to get the information needed in the quickest way possible. Look the “wrong way” example below.

concise opinionspaid

See the problem here? Why not just say “How many children do you have?” and make sure “0” is an option. Always strive to find a simpler and more direct way to ask something. The human brain processes information quickly and tends to get annoyed when they are still reading something they understand already.

However, do not mistake concise with short. You have to get the information you have to get. Don’t sacrifice information for the sake of shortness. Just figure out a concise way to get it. Don’t use counts of pages, screens or questions as a measure of the quality of a form. It can swing both ways.

Keep it clever

Cleverness is a necessity when it comes to form. Now, let’s something straight. I don’t mean clever “haha.” I simply mean the form is designed in a clever fashion.

This comes in the form of “sequencing.” Simply put, sequencing is is how you direct the user around the form. Ever feel out a form and it allows you to skip questions that don’t apply to you? That sort of smarts is sequencing 101. So much of that can be built in. Nothing is more tiresome than having to fill out a really dumb form. Below is a really dumb form. Look at how it fails to recognize the address as the correct address. It’s stupidity like this that makes people leave your site in a huff.

clever tru

Keep it co-operative

The best forms work with the form-filler. The cooperation, in this case, is between the form and the form-filler. Remember those notes you took earlier? Now is the time to put them to good use. You were the form-filler in those cases. What made you feel good? What made you want to slam your laptop down in disgust?

Here is what you should be looking for a co-operative form to do.

* Manage expectations

* Provide explicit boundaries and definitions of all fields

* Handle everything with consistency, but remain flexible

* Confirming before submission and allowing modification

* Being free of bugs and viruses

* Take care to not frustrate the user

A great example of an unco-operative form is one that asks for your location, then only gives a limited amount of options.

In the example below, Gmail does their best to remain co-operative and submitting to the “provide definitions of all fields” thing we talked about earlier.

contextual gmail

One of the easiest ways to frustrate users is to ask for lots of personal information without  giving any real reason.

What not to do

People make all manner of mistakes when dealing with forms. Here are five things people tend to do that send would-be customers packing. Do not pass go. Do not collect $200.

* Asking for information that isn’t easily accessible. Keep questions to things that are sure to be memorized.

* Asking for a whole lot of information without spelling out why it’s needed.

* Working against the user, and not with them in regard to inputting data.

* Failing to provide reasoning when a user generates an error message.

* Splitting in forms into too many segments without detailing rhyme or reason.

Finally, here are some resources to have bookmarked whenever you are creating a form.

A List Apart – article on usable forms

Informit – a nice general article about web forms

Sakuzaku – How to manage character limits in free-text fields

Don’t stress out and try to have some fun with it. A successful form can be a great way to gather information. This is the information age, after all.

Other Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Socialize

Calendar

June 2017
S M T W T F S
« Nov    
 123
45678910
11121314151617
18192021222324
252627282930