How to design human forms
Forms are like a private coffee with your users. They deserve loads of designer’s attention because they are relationship building blocks. Those that are built with empathy build customers’ trust and make users love the product. Clarity, benefits and empathy, these are the keywords in this love or hate game.
What’s a form and how to get the 3 happy Rs?
Each input from a user is a form. Stop thinking about forms only in categories of a contact and order form. Whenever you tweet, post on a Facebook wall, update your profile in any service, or learn a language with Duolingo, you interact with forms.
Form design makes us love the product, come back to it often, share the news with friends, or simply start hating it. Forms design have an influence on SEO. The forms have license to kill. How to make them right? Don’t design forms, design relationships. Following a few rules of healthy human communication will make them shine. By doing so you don’t have to buy users, you may just help happy users evangelize the product. Human forms lead to 3 happy Rs — retention, referral, and revenue.
What’s a human form design?
It’s the way you design the forms as if they were a part of real life conversation with a friend. The design full of empathy and the right questions asked just in time. Conversation that never has an end because both sides feel the need to keep it live. This design makes users feel the real value of sharing and storing the data with(in) the product.
Forms suck, patterns are to follow
How often have you felt that something sucks in the way you are asked? Freedom is a basic human need. Feeling obligation is what the web serves us instead.
We accept the way online forms are designed just because they are online and we want to get something done. Users agree on another terms babble
or excessive data requirements because some freaky patterns are repeatable. The question is if we really should agree to give our data for common dirty tricks? As users we all hate them. Being designers and owners, some of us turn a blind eye to them. Cultivating bad habits because others do so is shortsighted.
Since you’re reading it, I hope you belong to those that think at least twice before adding another input field to a form. Let’s have a look what we got used to and how to make forms more human.
Common pitfalls in form design
Think about forms like about real life conversations. Don’t limit it to online patterns because then it may quickly become a failure. Make it for a human. Build on trust, benefits, and transparency.
Asking for too much
Is it free or not? Let me play first, especially if it’s a free trial. I know you don’t want to split up with me. Remember though that we’re just starting, isn’t it enough to use single sign on? Don’t be too demanding. Allow me to sign up the fastest and easiest way possible, e.g. using Google or Twitter account. Be careful what you ask for.
Let me check if I want to become a long-term user. If it’s as awesome as you say, I will be right back with my credit card because trial ends really quickly.
Be careful of my anxieties. Don’t create barriers and don’t steal my time. Neither do I want to tell you during the first minutes all about me, nor about my friends. I don’t want you to post in my name. I don’t want to post I’ve just met you. When we become friends, you will learn more about me. What’s good takes time.
You want to make friends with me, give me some time and reasons to do so. You have to wait and ask just in time, not ten years before. Don’t ask for everything at once. It’s simply tedious, takes time, and it’s nosy. Stop being pushy.
Ask only for the essentials you need for now. By the way, how many questions is still waiting for me? You haven’t thought about progress bar, have you? It starts being like an interrogation…
You seem to be scared of me, really? Why do you make me lie that I understand this terms & conditions babble. Can’t you make it clearer? Make it for users, not lawyers or machines. Better safe than sorry, right… but it works best when connected with empathy. Don’t worry about what will never happen, accept the risk. It’s business.
Shouting in red that somebody is stupid
Nobody likes feeling stupid. Don’t shout at your users. Give a clear feedback. You are responsible for preventing errors and reducing the risk of their appearance. Be helpful, provide me with some hints that are clear and easy to scan with a glimpse of an eye. Nod your head when I am right. Listen actively. Remember that zero feedback is worse than shouting. Praise me a bit when I do things right.
Virgin America is a great example how to nod a head and show the interest in what’s going on. A form is not a test, it’s collaboration.
Take care of how you serve your feedback. Readability is essential if you want to be helpful. Prepare for all users, also those color-blind. Make the forms accessible for everybody and keep the tone of your feedback at least mild. Don’t delete my work just because I made some small mistake. Remember it’s MY HARD WORK.
Lack of clarity and no respect for user’s time
Oops, the labels have gone. Wait a minute… where is the button? What does this icon mean? Well… you don’t make my life easier if I have to come a step back to make a step forward. Don’t make me think on something that should be obvious! If you use icons, make sure they are not ambiguous.
I came here to give you the data you need, be ready to take it. I’m a human, my attention has some limits. I’m busy, so design for me being busy. When I’m with my kids, or at the dinner with my friends, or the doorbell interrupts us… I can’t devote you my whole attention. If you know me, you know that I require focused design. So let me concentrate on one thing at a time.
Make the forms painless, please! Don’t make me swear. Save my time and effort. Don’t ask me to digitize books if I don’t feel like doing it. Find better captcha type or invest a few lines of code in a honeypot field.
Keep the password if I ask you for it. Offer pre-populated fields. I’ll allow you to get my location if I see the goal in it. Keep my search history, I may want to come back to it. Autocompletion may be helpful. Recognize the credit card type, don’t ask me to do the job for you.
Reduce the amount of time I have to spend typing. Don’t ask me to repeat myself. Passwords can be shown and hidden.
Take care of HTML semantics. It matters not only for screen readers. Be careful especially with these input types.
If you do it right, I am directly on the right virtual keyboard ready to type whatever you need. Designing forms keeping virtual keyboard in mind is more than just only remembering about semantics.
If you want to help me save some more time, make the forms readable for a human eye. Help me follow what you say. I don’t care a lot about fancy colors, icons, or fonts. I simply want to get things done.
Make the most important actions visible. Don’t manipulate with labels and button order. Stop using these dirty tricks, I know all of them!
Even if by any chance I get caught in your traps, you won’t like what happens next.
Patterns don’t have to be boring. We are all human, but some people are still more interesting than others. Show benefits of being your friend.
Desktop first scaled down to mobile size
We live in the mobile age. It’s not about being responsive, it’s about the overall experience I get using the product on mobile devices. Tap, slide, tick and that’s it. Mobile version is NOT a smaller version of the desktop design. Make my life easier, time is money. Design mobile first. Be sure the elements are of the correct size to interact with. Make them usable and remember that some elements may make the interaction much easier when touch optimized.
Being shortsighted
You want to create the product users love. Awesome! Remember that it needs time and effort from both sides. If your product is built mostly on forms, like Twitter, Stackoverflow, or Facebook, you’d better make people feel the need to come back to it often. Build habits, show values, aim at internal needs. Nir Eyal explains it perfectly both in his book and the movie here:
Form building services
I have dug a bit deeper for you and compared form building services. I had a look at Wufoo, Survey Monkey, Playbuzz, Polar, Typeform, and Google forms. I recommend the following two most. What’s the difference?
Typeform has a mission of making forms awesome.
jTypeform develops quite fast and offer great customer service (tested). They provide freemium option, so you can try them for free first. It’s prepared to be mobile first. Each question is served separately. Customization range is huge. The results are served in a neat way. Creating a form is a pleasure. It’s a timesaver for developers. It’s also a great solution for those who don’t know how to code and want to make a form a part of their own website. Try them out!
Polar is a perfect tool for one question polls.
It’s totally free (read more here). Founded by Luke Wroblewski, bought by Google. It’s quite basic yet powerful for binary polls and multiple choice questions. They help with looking for images for your answers. Polls are easy to create, embed, share and observe.
Whether you build forms from scratch or use services like these two above, design each form to make a user clearly see both the need and benefits. Make it usable on all devices. Remember that time is priceless. Build conversations with a friend, resign from being a policeman, teacher or black character. Look at forms through human eyes. If you want to read more on how to design better forms, have a look at this list. You may also look around in UX stackexchange to continue with the topic and any design concerns.
The article is a summary of my meetup talk during Frontend Malaga. Here is the link to the presentation. If you are in Andalucia, Spain and want to share your insights on UX and frontend, join us at Frontend Malaga meetup.
If you liked the article, have a look at my Medium. I also tweet about startups and UX on Twitter.
