Everybody hates them: forms. But why is that the case? So why is it that such a small thing can be so unbelievably annoying? I guess it is two things: Work and work.

Why so much hate?

The problems with forms is that they often times sit in the way of getting something done. You want to leave a comment, but you have to register first. That sweet thing you want to order online and get your hands on? Well there is a form stopping you and making you sign in first. And so on. The typical form is like a guy guarding the door at that infamous night club everyone is talking about.

So forms get a bad reputation for something they are not really guilty of. The process needs something and the guilt is connected to the form. But the form is really just the messenger. For that reason one should start to think about some solutions. Some think a form is just a form and leave things at that, fair enough. But at maybe you should think about testing whether your forms can be improved. In case you have the chance to A/B test your forms it would be a great idea to do so. Since these tests actually enable you to compare even slightly different designs and concepts you have the chance to optimise step by step.

Want to screw up big time? Do paper forms wrong.

Forms have the problem of not being understood. I have been confronted with endless paper-based forms making me think. The online world is barely any better than the offline or analogue forms I have encountered. In print it is actually a lot easier to screw things up since there is a space limit in many cases. How often have you filled out your name in the row where you were supposed to have the street written down? But of course you did not notice that before you got to the last row of the form and you still had one thing to be filled out. And that happened because the label to the field was just placed a little bit different than expected. This is frustrating to say the least. On mobile devices with smaller screens this can easily happen as well since you might not see all of the screen. So make sure to get this designed right. If you scroll randomly to a part of your form, is it obvious which label belongs to which input or select field?

The advantage of forms on screens is that there are some things baked in to connect the label semantically and technically to the input field. But that needs to be implemented by the developer.

Clueless in Fieldsettle

Is this the right field to fill out? What exactly am I supposed to put in here? Help people. In case you need something and it is not clear to someone who is new to the form: Explain it. Add a help link or button to open a little help text. Or maybe add the help icon next to the respective form field, so one can always get help when in need for it in order to understand something.

When you offer help texts do the form victim a favour: Make them relevant! The input field asking for street name, does not need a help text like "your street name". People are not stupid. When it is relevant for something, or the reason is not clear why this needs to be filled out, explain it here: "We need your address in order to veryfy your identity with identity provider XYZ

Patience is something you should not count on

How much time do people have, and when do they loose their patience? Think about what you want and what you need. For a newsletter you do not need anything from them except the email address. Why do I have to give them my social security number and home address? A valid question to ask! Do not be too surprised when not a single person sings up for this newsletter. We are in the Post-Snowden era and people do not feel like giving away too much of their data without valid reasons. And in case you need the data, hey, at least explain why it is the case. If they get a benefit from it they might actually pass the data to you.

Error, error on the screen who isn't frustrated in this scene?

Getting an error when you have filled out a form? Oh don't we all hate these forms which pretend to be soooo flipping smart? Thinking they know better than us how our address is being spelled? Or that your password is not secure despite the fact that it has 24 characters? Displaying an error only because my domain has more than one "." in it. Only because the form does not know the german street names and their spelling I am not able to enter my data? Well done, you just lost another customer, or actually never got it in the first place. And if the forms were your decision and design making me angry you quite rightfully deserve none of the business.

The help, that did not help at all: Placeholder texts

Oh, and these wonderful pre-filled input fields: No labels but only placeholder texts telling me what I have to enter. Because everything looks so clean and slimmed down when the form is filled out! Maybe I make a mistake and need to review the form. Now I have to go back and delete the data from the form input field(s) to see what the field asked for. Genius move from the form designers. Not.

Make people do the work twice, so they get more practise! And do not forget to make all input fields the same size, no matter whether it is a street number or the city name. That way it gets even harder to distiguish the fields. I should develop an app: formtastic – track your form activities plus challenge your friends … the more often you fill out forms the more points you get. Sorry, got a bit carried away here. But it just gets me railed up when stupid decisions are made for the wrong reasons.

Hands up! Gimme all your data! Or how to gain trust.

Why are people coming to you? A newsletter? Ordering something? Applying for a job or something like that? Do not stop them. The forms might create a show stopper. Often times you could just start with a few things and as people move on they will gladly add more information. But make it clear why you are collecting data. An email address should be enough for the beginning. You can send them a newsletter. They want to order something? Well, only ask when they are actually checking out, not upfront. Gender, title, interests? Do not worry they will tell you soon enough when you offer custom content based on these bits of data. Just let them know about the possibilities, do not make it compulsory to strip down naked in terms of data.

Why shorter is not always better

But: I just came across a form the other day where I was supposed to register for a web-service. It was something where I had to pass on a lot of data to the company in order to get things up and running, and I knew that. The service was about working with the data. That was the sole purpose of it. But they only wanted my email address and a password. This felt so wrong. I wanted to start, get all the data in and be done with the whole registration and setup thing to start working. Why did I have to go through an email verification process first. It ripped me out of the experience and the email was late as well (17 minutes! Seriously?!). I did not continue any further since I lost trust in their real-time data analysis promise. 100% fail on their side.

Lots of value for lots of data

Above I told you that asking for too much in the beginning is annoying. But if someone wants to give you all the data, why limit them and step on the breaks instead of helping them: Hey, out of the way! Here comes a new customer! Make way please!

People are not afraid of entering data. They are annoyed by entering data which does not make sense to be collected from their perspective. When you manage to get things explained properly, they will be more open to do the extra work and fill in the form entirely.

So be clear about the necessity of the data collected and what you really need. Making things optional and even clustering them in an optional section could be a way to go. That way the user does not need to scan every single field set for the little asterisk telling them whether it is optional or not. But pretty please do not open up a section for optional data only for one optional field will you?! Thanks.

Simplify but don’t go overboard

As mentioned above some (designers) think that a clean form with barely any lines and labels is the best. It looks so pretty. Hey, a form is not (solely) a beauty contest. One should feel good when going through it and filling it out. These over-simplified forms make you feel inferior and force you to think. "Am I just too stupid to understand this? Why aren't there any labels.? Why did the text just disappear when I started to fill out the form?" Nevertheless a form is obviously allowed to be pretty. But not when it sacrifises understandability or accessibility.

When you are absolutely certain that people know what the form is about, reduce label length and additional texts, but only then. When you have space and structure to integrate help texts (on demand for instance) offer them.

Animating the experience

A form needs to get you into a flow. In case animation helps to achieve that it should be there. Animation can be reassuring and support your positive feeling that you have entered data correctly. Again, do not animate for the sake of animation. Many forms in the last months, triggered by material design from Google, have started to come alive. Not always for the better to be honest with you. Some are simply dancing the night away and not really adding to the experience of filling out the form more effectively. But as mentioned above: If it is fancy people, designers that is, will copy these patterns without thinking and all of a sudden we have loads of these forms and they turn into a wrong but quasi standard. Do not fall into that trap. There is an article about ux flaws on this blog as well.

Alternative form designs

Typeform offers nice and beautiful forms. You focus on one thing and use your keyboard if you like. Very fast, very fun to use. A great form alternative worth looking at. The genius thing about it is that it caters towards form pros and users who barely know how to use the web. Fast track: Use tab key and the rest of the keyboard and get through the process in record time. Normal track: Just use a very cleaned up form, with hints and offers to learn how to use forms even faster.

Chat bots are an alternative way to make the form process fast and fun at the same time. When you sign up to Slack for instance, the first thing that happens after having gained access, that a bot welcomes you. It does not get in your way, but if you pick up the conversation it starts with you, it asks you a few things and before you know it your profile is complete with relevant data for all the others to get to know you and know how to contact you outside of slack. However: You can always skip this and come back to it. It is optional.

Ready to submit?

Are you ready to get your forms optimised? As a designer read the basics about html tags used in forms. you might be surprised what they can do out of the box. Set up a prototype and fill it out yourself, that will give you hints where things are a bit buggy or need clarification. After that ask people who have no idea about the background of your registration to do the same. Where did they stop, think, slow down?

Want to board the hype train and use a bot? Well check whether it is the only and/or valid way to go. If so it might be pleasant alternative (see slack above).

If you are into paper forms more often and/or have the money for a great book on forms I can recommend "Formulare gestalten: Das Handbuch für Gestalter und Anwender zu Hürden, Chancen und Gestaltungsfragen" in german language a lot. It shows examples, explains many details and is very well designed. Something for your next birthday perhaps? Or for the company library?

We, the rest of the internet users, form-fillers, and me are thankful for all the hard work you have, do, and will put into forms!

Submit.