Tips to make better web and mobile form design

There will always be some nerd dudes like my UI/UX colleges or me, who discuss great inputs during the coffee break, but in the real world, you want your product to have forms and wizards and other processes as seamless as possible. Your client should pass through it like it was not even there.

OK, I exaggerate a little bit, but the truth is that in case of something as utilitarian as form, people tend to remember only the bad things, especially if they pushed them into abandon the product, website, or an app. So follow these few dos and don’ts I gathered to avoid basic mistakes. And if you're looking for some more general rules about best practices in mobile app design or evaluating the usability of the app check other articles about product design on our blog.  

Don’t ask too many questions!

When the form becomes nosy, it always raises a red flag. People tend to hesitate when they feel their privacy is jeopardized. So make sure your questions are relevant. Basically, if a user wants to buy a pair of shoes, don’t ask for his age. If you offer shipment to a pickup spot, there is no need for a home address. Another thing you should ask in the form is email or password confirmation. This outdated habit must die. Just add an option to show/hide the password. Your users will be fine.

But if you need to ask, explain why

Sometimes you just need to ask your users for some personal data. If you run a fitness app, your user will probably accept the fact that you ask for weight, age, or even a blood type. But maybe not necessarily understand that you want him to share his location via smartphone. Before you ask for it, describe why you need it. If you offer something in return, let’s say information about the best gyms nearby, this is a trade that most users will happily accept.

Use conditional logic

Make your form shorter by showing only questions that apply to the user in a given situation based on their previous answers. So, for example, if you’re offering booking services, you won't ask the user for information about other guests if he selects a one-person room. 

Don’t neglect the importance of the layout

Sounds pretty vague, but hear me out. Some simple rules apply to most of the forms and help with usability:

• forms should be one column and put the labels aligned on top of the inputs;
• group inputs into understandable sections; 
• go easy on the styling; users need to recognize input without any doubt. And keep the design consistent throughout your product.
• if possible, don’t hide selection options, display them inline, and avoid dropdown menus;
• people are more motivated to finish a task when they see progress. So show the steps or percentage;
• make main buttons descriptive and put them aligned with the content, usually on the left;
• use field length as an additional indicator of what do you expect from the user. 

Use native mobile features

If you’re developing a mobile app or responsive website, consider taking advantage of modern mobile devices' capabilities. If you ask for an address, use devices geolocation data to prefill at least part of the form. You can use a phone camera to scan documents or even credit cards. Also, modern smartphones are equipped with biometric authorization - you can use it as part of your sign-in process.

Make validation helpful, not harmful

First and foremost, use dynamic validation. It means that the user’s input is checked live as he progresses through the form. So, for example, you don’t need to wait until the user clicks “Send” to check if he provided an email address containing the “@” sign. This can be done live, without the need for refreshing the whole page.

Also, provide the autocorrection and autofill functionalities wherever possible. The general rule of thumb is that you should tell the user what you need, and in what form, but accept everything he types in. So if you can, allow whatever phone number format the user will choose to use and change it on your side. Of course, it’s not possible all the way, but you should definitely strive for it. But if you need something really specific, make it clear and understandable. Placeholders, labels, and help tips are there to assist you.

Help when something goes wrong

When the error appears, display it inline so that it’s visible right away. Also, don’t rely on using green or red colors only, which are indistinguishable for some people with color blindness. Use additional texts and icons. Finally, make sure your error messages are minimizing the frustration we all feel when something goes wrong. Don’t blame the user, make an impression that something else is the problem, like don’t write “You have entered the wrong password,” use something neutral instead - “The password is incorrect.” Also, be specific and avoid vague messages. So “Something went wrong,” or “Error #125…” with a bunch of letters and numbers are the no-go. User needs to know how to fix the problem and what to do next. Use human language and understandable wording. 

Speaking of language

Words matter, not only in the error messages but first and foremost in the questions themselves. Speak simply and clearly; it’s not a place for literature - it’s not a case of intelligence; it's a matter of time. Plain language makes filing the form faster. 

Also, the order of questions is essential. They should be asked logically from the user’s perspective. The simplest way to think about is to imagine that the form is like a conversation with a live person. You wouldn’t ask anyone for his address, not knowing his full name first, right?

When do you know if your form design work? 

At the simplest, when your user doesn’t remember your forms. This might be a little bit painful for the graphic designer who spent hours on creating a useful, understandable, and aesthetic form, but this is the greatest kudos he can get in an appreciation for his effort. 

Want to see our UI designers works? Check our portfolio,  designs on dribbble and Behance!