Filling forms is the most boring part of the users' journey. It's something which users don't want to do but have to do in order to get started with a service. Forms play an essential role in acquiring customers. They are the gateway to anyone wishing to try your platform or service. It is paramount that designers make sure users are not put off by the design of the form or are intimidated by the number of fields to be filled. Because more registered users equals more revenue, and that's never a bad thing.
Here's some rules of thumb you should follow while designing online forms:
Eliminate optional fields
Sign up and registration forms should have the bare minimum details required for the user to get started with the basic services, and no more. Leave the unimportant stuff for later, since as a user, you want to get started using the service as quickly as possible. Additional information required for secondary services can be obtained later when the user wants to use those services.
For example, Indian users are generally wary of entering credit card information at sign up, especially if the service is based on a freemium model. At such times, if credit card information is made mandatory while signing up for a free service, it tends to put off a lot of potential customers.
Break it up in multiple steps
If you cannot do away with having many fields in the sign up form, break it up into steps so that the user is not bombarded with so many fields at once. Use signposting to provide the users feedback about which step of the form-filling process they're on currently.
Group related fields
If the form cannot be broken down into steps, make sure you group related fields together so that the groups look like one entity instead of many separate entities.
Design Smart Forms
Use smart-autofill to populate fields based on information already provided. For example, if the user has entered country India in the address section, the states should be automatically shortlisted to Indian states. Or when the user enters a pincode, the State and city fields should fill automatically, based on the pincode. Location fields can also be populated automatically using location data.
Make the call-to-action button prominent
Make the call to action button bold and clear, with a bright color. It should have more visual weight than other buttons so that users do not face any difficulty finding it or mistakenly click another button.
Use simple language
Refrain from using jargon and complex language in forms. The action button label should be what the users ultimately want to achieve and expect to happen after they click it. It should not be a generic word like 'submit' that's going to leave the user guessing on what's going to happen next after they click the submit button.
Use inline validation
Do not validate after the user has filled the form and pressed the submit button since it is tedious to go back and check which fields have thrown up errors. Errors should be validated inline to provide instant feedback. Validation should happen right after the focus has moved to the next field, since validation while the user is still typing information will bug the user.
Always highlight the field which is currently being filled by the user.
Make it keyboard friendly
Forms should be keyboard friendly for desktop users, that is focus should shift from field to field using the TAB key instead of requiring the user to use a mouse. In case of phones, the type of keyboard should switch based on the field which the user is entering data in.
Don't use dropdowns unless necessary
Do not use a dropdown if the number of options is less than 5 in a field. Using a dropdown adds an additional step for the users. They have to click on the dropdown to see which options are available. If less than 5 options, every option should be visible.
If there are more than 20 options, its useful to implement an inline search and fill function which automatically shortlists options based on what the user is typing.
Keep it single column
It's a good design practice to keep the form fields in a single column in case of a form with many fields instead of multiple columns since it is easy for the user to track fields in one direction (downwards) than in two (downwards and sideways). Form completion is easier when there's only one direction to track information in, downwards. You can read more about this here.
Multiple columns can be used only when there are few fields in the form.
Top Align Labels
This is especially important when dealing with forms on mobile devices who are low on real estate. Also, it's better for readability and faster form completion since the user has to scan only along one axis.
Sometimes, designers use placeholders as labels. In case of a form with many fields, this can lead to a lot of confusion since the label disappears when the field is filled.
Labels are not help-texts
Labels should be clear, concise and descriptive. They shouldn't be used as helper texts. If there's any ambiguity about what needs to go in a field, placeholders should be used to guide the user on what's expected to be filled.
Finally, show purpose and reason
The purpose of filling the form should be made clear to the user from the very start. And that purpose should be something the user wants, not technical stuff that your company cares about.
Designing forms can be one of the biggest challenges in terms of intuitiveness, efficient layout, and usability. Most forms are functional, but very few are designed to accelerate user completion and eliminate redundancies which the user may not like. A properly structured form can significantly increase sign up rates and eventually have a great impact on customer conversion and revenue.
Comments and suggestions are welcome! Stay tuned for more!