Let’s talk about form!

Forms are everywhere. They are present on almost all the sites you visit and they aren’t always the best of experiences. Whether it may be confirming your movie tickets or ordering pizza or adding items in your shopping cart, try to remember last time when you thought that form was fun! As an UX Designer I designed forms ranging from email subscriptions to mortgage questions to insurance quotes and I fought with the stakeholders on forms more than anything else because people’s knowledge or perception is so different on forms.

With Ajax and Regex and most importantly Javascripts being universally accepted as norms, there are plenty of ways to make the form design not so boring. But it is a task which users hate to do most f the time.

The two major aspects of forms that decides how well your users are interacting with your site is making the forms Communicative and Accommodating.

Communicative forms help users understand the necessity of fields or why those information are asked for hence giving a confidence about the information they are putting into.

Accommodating forms let users feel they are getting the right amount of attention from the site. Good example of how this type works would be showing error in real time, hand-holding whenever they are getting out of context like predictive text etc.

Here are some practices you can follow which will put less cognitive load on your users.

1. Multi-Step Forms are always perform better than single step.

Splitting your forms into two or three steps will almost always increase form completion. We’ve tested this across all kinds of lead generation forms, from mortgage lead generation to online exam forms to B2B enquiry, and consistently multi-step forms out-perform single-step forms.

Reasons why multi-step forms work so well:

1. The first impression is less intimidating than a long form with lots of question fields.
2. By asking for sensitive information (email, phone) on the final step of a multi-step form, users are more likely to fill out these fields – otherwise they lose the progress made by filling out the previous steps
3. By seeing a progress bar, users are more motivated to complete the form. This is, again, based on numerous proven cognitive biases such as the endowed progress effect.

2. Only include what is absolutely necessary.

Historically, companies have a tendency to ask for information which then gathers dust and are never used. As the web progressed the new mobile first thinking era, you must ask the stakeholders and get yourself convinced as a UX Designer about the information that is being asked and how it is used afterwards. Do not ask information and cut fields mercilessly as you design your form.

3. Conditional elements in the form lets you ask less questions

Use these two methods to derive specific answers. It helps companies in the long run organizing data and increase engagement with the customers as well.

1. Ask less questions knowing the user need: In the above example on the left, the user can clearly indicate what is his/her ask and be asked specific questions on those areas.
2. Ask less questions knowing the user answer: This form logic type is called conditional logic or branch logic. When you need to get details about something based on the answer users provide, hide the remaining questions. Traditionally in paper forms users have to write in N/A to questions like “What kind of disability you have?” when the previous answer was already “I don’t have any disability,” This does not make any sense in the web world and using conditional logic, the answers can be shortened.

4. Be transparent about your ask

With the new GDPR rule introduced in May 2018, the concern for privacy while collecting the information is more than ever before. If you are wondering about what the heck is GDPR: GDPR are a set of rules by which all organisations, regardless of size or legal entity, must follow when recording, handling and managing people’s data (or Personal Data as it is formally known).

So, being transparent withe the questions you ask will help your users understand why you need them

5. Show the ROI for every user task, including form

Just know that people are lazy. They don’t want to read text leave apart writing text. In this age of digital, wearables, photo apps and voice assistants are gaining popularity because people are becoming lazy to even type. Another reason to blame is they are getting bored wiring the same info time and again for different sites. I use the Chrome auto-fill option a lot but a lot of times it goofs up fields and I have to check myself consciously for any error and it doesn’t save long form text like job description. Showing them the value instantly will give you quality data over time and you will be able to filter out lot of junk users.

6. Well Structured single column form gets you the info

Google’s UX researchers found out that single column forms work best against side by side forms and works wonderfully in mobile. Considering you would already be practicing Mobile First design methodology in your design, single column form fields work best. Even the radio buttons should be vertically stacked to give a comprehensive view to the user.

Combine floating labels and you got the best of the world form labels. However, if information you are asking need to be structured first and grouped accordingly to give the users a sense of natural flow.

7. Make the obvious interesting

You probably won’t design a form without phone number and DOB field. That’s probably the most common fields after First and Last Name. But often time users get confused about the format as far as country code. Should I enter country code? If yes, should I enter + before the country code? Lot of Asian countries where Landline phone numbers are still prevalent, it’s not surprising that number format will be confusing. Ideally what I would suggest is to allow the users to enter the phone number the way they want and format it on the go or if it’s too obvious then in the database after submission. Similarly users get annoyed when the DOB Month, Date and Year are in separate fields.

8. Use predictive text if security and efficiency allows

Predictive text is everywhere but some companies don’t like them because they don’t want to surface information that’s hidden with a lid. Other companies don’t use it because of efficient issue. I don’t have the audacity to come into you and your client’s technology guidelines but you know difficult and it would be to use google if you don’t have predictive text or type ahead function dropping down and then changing as you type. Also it helps users not enter stuff of their own.

Also, if you want to go one level deeper, you will have to guide the developers how smart the drop down would be. While the right image below may seem right most of the time, sometimes it makes to use the left behavior specially when the user is searching with a name. A lot of people use surnames of the famous people and do abrupt search on subjects and knowing that perhaps the company that you work for might not be as smart as Google immediately, it makes to do a research and then instruct the developers about what would make more sense.

9. If it’s validation, it has to be inline

The inline validation helps the users more than one way. It gives instant feedback, does necessary hand-holding about the formatting and gives the users a sense of engagement. Still now a lot of companies depend on the backend server to give error messages but that’s so annoying for the users. Users deter to proceed further in a lot of cases when, after filling up a page full of important info gets error messages saying “Oh my God! what you entered is wrong or simple you have just forgotten to enter this tiny piece of info.”

10. Use smart defaults

Sometimes we use defaults to help users fill up one less fields but you should not use it generously and use it in such a way that they are aware of the defaults. I worked on a form where the first page contains Sex information and the default was Male. Surprisingly at the end of data audit we realized that a lot of women didn’t change it because they did not take enough notice on that part.

Another instance would be showing a page pre-filled with information (which they have provided at a different time) – a lot of this scenario happens while in renewal when companies the latest info but don’t realize that they need to update or didn’t feel the need to update and prefer to stick with an older address because of many different reasons. Just adding a checkbox with “The above information is correct” will give them a speed-bump not to skip the step.

11. Avoid showing excessively long input field

The size of a field should reflect how much text the user is expected to enter. Therefore, fields like zip code or house number should be shorter in width than fields like the address line. When fields are filled up exactly in a cozy fashion, it gives the users a sense of completion. Psychologically, the bigger empty areas in input gives a false sense of insecurity.

12. Accessibility is a must while guiding your front end developers

While many people use the tab key to navigate through forms, this is particularly important for disabled users who may be relying on software that uses the tab function to move from one question to the next.

While less common in women, 1 in 12 men have some degree of colour blindness.

When displaying validation errors or success messages, be sure to not rely on making the field green or red. Wherever color is used, try to also display text and/or icons to communicate a message to the user.

13. Does your form has Day/Night mode?

I was working on a audit form for a reputed Airlines company and while during user research, found out that a lot of people missed some field or did not enter right information because they were given a device which would illuminate in not an user friendly way during scorching sunlight.

If people are likely to use your forms outdoors on their mobile devices, it’s best to ensure that your question fields contrast against the form background. Otherwise, users may not be able to see/apprehend where to tap.

14. Captchas are bad!

A study by Standform University found that Captchas will cost you a drop in subscribers / leads of up to 30%. Leading sites Animoto removed captchas from their sign-up form, they received 33.3% more signups.

Traditionally they have been used to avoid the bots from entering false information. I have always wondered who does these things but companies like Akismet and other bot control would always take care of the bots for me. Captchas force the problem of spam management onto the user, causing friction, and ultimately deterring leads. Even Google could not convince users that Captchas are a good things.

15. Do not ask to enter the password twice unless it’s a very important service you are offering

When you are working on sites of banks etc. perhaps it makes sense (Though I won’t recommend) to ask the users to enter the passwords twice. When you are working on forms like creating account and users are already loaded with information entering obvious stuff like entering passwords twice doesn’t make any sense. Rather, it would be highly suggested to let them finish the process. Perhaps the very next step is logging in where they have to enter the passwords anyway thus helping them remember the password.

Now, go ahead, design some beautiful forms!

No mater how much you work hard, there’s one more way to optimize the form that you are working. so go ahead and design a beautiful form. Then user-test and again optimize a little more.  If you have more interesting suggestion or simply reach out to me, just drop me a note.