Forms remain an essential feature that enables interaction with users on a website. Research statistics claim that due to fast-evolving user trends, 88% visitors on a website either purposely leave forms blank, or fill them up with irrelevant information. The major reason behind this remains that forms are not user-friendly at all either because of increased loading times, excessive and irrelevant fields, or poor user interface. This deteriorates your consequent sale generation and conversion rates.
I’m Saad Raja, an experienced UI/UX designer, and I have combined a few tips that will help you in creating user-friendly forms for your websites.
1) Ask for required information only
Eliminating unnecessary information from the forms will make them easier to fill out. Before asking anything out of your users, carefully consider where and how you can use this information. If it is not needed, do not make your form loaded because minimizing the number of fields on a form will positively affect your conversion rates.
2) Limit the typing for users
When designing your forms, you must consider that not all your users are going to be accessing it from a laptop or desktop browser. Typing a lot on mobile screens is not very easy, which is you should consider other alternatives while making forms. There are various options of touch interfaces available like multiple choices, tapping, scrolling etc. You can also make use of GPS, camera or other sensors to make it easier for smartphone users to fill the forms.
3) Add labels
Labeling the fields will help the user quickly know what particular data is expected from them in that input field. However, you need to keep the label succinct, brief and descriptive so that one glance is enough for the user to know about them. If your labels are not clear, your UI will be less accessible.
4) Make use of inline validation
If you are informing your user that they have provided some wrong information in the form, attach your feedback to the particular field that you are talking about. This way, your users do not have to screen the entire form again, but can quickly fix the concerned fields only.
5) Avoid duplicating fields
It is common practice to make forms where users have to type their passwords and email addresses twice. Even though this was done to minimize typing errors, but nowadays users simply copy paste the inputs into the duplicated fields. So, even if the original field has an error, it will be the same in the duplicate field which is why this does not make sense anymore.
6) Group together related fields
If your group together related fields, it is easier for users to fill in the data without overthinking or paying all of their attention to it.
7) Arrange all fields logically
When designing a form, it is essential to view it as a form of interaction between your company and your users. All the fields must follow a logical order; one that makes sense from the user’s perspective. If the flow between sets of questions is structured well, the interaction will resemble a proper communication, and users will find it easier to fill in.
8) Match the length of fields to required inputs
Field length should be determined while keeping in mind the type of response needed for that field. For example, the field where you ask for the email address should be longer than the size of the field where you demand the zip code.
9) Highlight fields that are optional
If there is something that is not required, it is best to leave it out of the form. However, if you still include, clearly highlight to the users which fields can be left blank out of choice and which ones have to be necessarily filled. Using an asterisk * to highlight the fields that are MUST is a common practice.
10) Determine the right keyboard
For every field, depending on the type of required data, match the right type of keyboard to appear for the user so that they do not have to waste time in switching it, but can rather start filling the form immediately. For example, if the field required a zip code or a mobile number, the numeric keyboard should be displayed rather than the alphabetical one.
11) Make use of real-time validation
This feature will let the users know if they make an error in any field immediately, without them having to submit the form so that it notifies them of any mistakes. Real-time validation will help them correct the mistake as soon as they make it, and keep the whole process less troublesome.
12) Ask clear questions
Whenever you design the questions to be asked on a form, recheck it to see if the message is being conveyed to the user. Filling forms is not a much-appreciated task amongst users, and ambiguous questions only make it more difficult.
13) Avoid using reset buttons
A reset button is something that all users particularly dislike because naturally, nobody wants a button that undoes every effort they made in filling out a form. It is very confusing when this button is placed right next to the submit one. Any minor mistake can lead to the whole form being emptied again. Designers should avoid keeping reset buttons in their designs.
14) Let your readers know what they submitted
Majority of the sites do not let the users view the form they submitted. Once the ‘submit’ button is pressed, a thank you note appears but there is no record of the answers that the user added. Designers must let the reader keep a copy of their answers for future record or allow them to print or save it.
15) Avoid giving default options
Since users do not want to spend a lot of time filling out forms, they tend to leave the preselected fields as it is. Avoid including defaults unless you are really sure that majority of your users will choose that option.
About the Author – Saad Raja:
Saad Raja is a 26-year old UI/UX Designer from Lahore, Pakistan. He has a work experience of 5 years in the field. Saad Raja loves turning difficult and complex problems into simple, elegant and beautiful interfaces. When he’s not designing or coding, you’ll find him playing Dota or watching Star Trek.
You can find more helpful articles from him at his own blog: http://saadraja.co/blog