Forms are basically pages with boxes that you can fill with information. If they’re so simple, then what makes people hate them, even before they encounter them? Do forms look often ugly, or ask stupid questions that confuse the users? Partially yes. Okay so if I make them pretty and straight forward, than I’m on the spot right?

Nope, they still won’t like them.

Imagine forms like onions. They have layers, from which two are appearance and conversation. But the third which is called relationship plays a significant role in the game.

The Relationship of the form

Is the relationship factor between the organization, who is coming up with all these questions and the user, who „should” answer them. But here’s the real deal. Answering takes time.

„Time is Money Friend” — A friend from Booty Bay

All that time spent on playing WoW finally pays off.

So what happens when they find it too time consuming to answer your question? You’ll get bad quality informations, or simply false ones.

How not to screw up?

The forms are kind of a bad idea to have:

· forms that ask questions you don’t know how to answer

· forms with multiple-choice questions that don’t have the choice you want

· forms that ask for too much information, or information you’d rather not give

· forms with huge quantities of confusing instructions

There is a special form that users really hate. Guess what? Registration forms, bingo. Why isn’t this in the list mentioned above? Simple, because in some way you’ll end up needing it.

Okay so you may wonder, how can I make my registration form suck less? Benefiting of it instead just pissing off people, making them want to bash their screens.

Personas. Personas are fictional characters who describe the real characteristics of your targeted individuals. Your goal here is to get as close as possible understanding their motives, fears. Once you’ve created a persona, try to draw a background. You don’t have to overthink this part and grab your crayons. Just imagine what would you do if you were that person with that background, who is about to fill a form on a website.

How do I understand my users better?

There are three major types of people who you might encounter. The Readers. What they usually do, is read all those extra infos, nearly every single line of text in order to feel confident enough to fill out the form.

Rushers who are familiar with your content, or maybe have seen other forms like yours. This way they focus their attention on filling out the empty boxes and that’s all that matters.

The Refusers. Well yea.. they most likely aren’t interested in your content enough, or at all.

Their reaction on your form will depend on the value you represent.

To increase your value you must take the following three steps seriously.

❤ Estabilish trust: You must declare the purpose of the form. Why they should fill it, what BENEFITS will they get by doing so and most importantly, how will the provided information be used by you. BUT don’t make them scroll through a wall of bla-bla-bla bragging about how super secure your website is. That’s more like a wall of excuses to them.

„Less is often more”

❤ Reduce social costs: These can be translated to as feelings that makes an individual uncomfortable in a situation. For an example one might feel inferior when filling out the form, or feel some sort of disadvantage.

„This is why you should never ask people TO SUBMIT!”

Show them the progress, that they’re not far away from completing.

❤ Reward them: Everybody likes to be rewarded after completing a process. Rewarding can go in different ways.

„Sometimes a smaller yet immediate reward can be more motivating, than a bigger in the future.”

Whatever you choose make sure, that the reward covers the effort of filling out the form.

What elements can or should my form contain?

The three very basic elements of form can be input fields aka the boxes mentioned earlier. The labels, which are questions basically. The actions allow users to send in the filled forms.

When designing the layout the first thing that you might decide is where to put the labels. Multiple alignments are available, there is no only way to go.

Top-aligned labels increase the height of your form, but reduce the time it requires to fill.

It is advisable to keep at least 50% of the height of an input field between labels and inputs. In some cases what you can do is simply put the labels into the input fields. Take a look at the registration forms of Amazon and eBay:

Figure 1 — Top-aligned labels

Figure 2 — Labels within input fields

Right-aligned labels are also fast to fill and consume less vertical space, however you have to be careful with the horizontal spacing, too long labels may have to be separated into two lines.

Figure 3 — Right-aligned labels

Left-aligned labels can be beneficial in western cultures, since people read from left to right, so they prefer a hard edge on the left. This however will increase the distance between the label and the input field resulting in a little delay when filling out.

Figure 4 — Left-aligned labels

All together In some cases it is best to mix them.

Types and lengths of input fields:

Text boxes are pretty much self explanatory. You can use single or multiple lines. Radio buttons allow to choose between options, but only one. One option is often selected by default, this way it’s pre-filled. An example for text boxes and radio buttons:

Figure 5 — Text box

Figure 6 — Radio buttons

Checkboxes are similar to radio buttons, they can be used to choose multiple options at the same time. Drop-down menus can be useful if you want to spare some space, however they’re not recommended if the list contains too many elements and users are familiar with the answer (for an example selecting states). But for a simple question, that has only a few options and you want only one answer a Drop-down menu is a good choice.

Figure 7 — Checkboxes

Figure 8 — Drop-down menu

Like shown on figure 8, the length of input fields itself can be a valuable information to the users. They can calculate the approximate effort and time it takes to fill out the form. Professionals often call these hints affordances.

Designing the structure

When adding new UI elements to your form, you should ask some questions first.

· What is the purpose of the element?

· Is there another one that is similar, how is that treated?

· Does it have an effect on other elements?

· Does it have to be flexible?

· Can we group this element with others?

Flexible inputs can be demonstrated with fields that require phone numbers. There are several ways to provide this information. One way is to let the user know which format is considered as valid. Or you can let them decide the how part and simply you adopt.

Actions let the user finish the form. We distinguish Primary and Secondary actions. Primary actions have the most important role, which is completing the form. But secondary actions are also exist for a reason. Secondary actions give the chance to cancel the filling process, or simply reroll the whole thing. Secondary options work in the opposite way of primary. It can be really frustrating when the user fills out the form without errors (after getting rejected when choosing the desired username several times), then instead of completing, the poor soul slams on the reset or cancel. To avoid such pain, it’s a good practice to separate the these two very different actions.

What makes a form look easy?

Making two columns when asking for a first and last name looks logical. But the reason why you shouldn’t use this setup is, because visitors can start filling horizontally and vertically. This may confuse them right at the beginning and you don’t want that. What you can do is fire up a tidy looking vertical grid.

In conclusion, if you can create a handy form, that supports, guides the user through the process it will eventually pay off.