15 tips to Improve Usability of Web forms Part 1

Almost every website contains at least 1 form. It can be a simple login form to a very complex Income tax return form. A form on a web page usually comprises a set of input fields for the user to fill in and submit to the website. In simple language a user or human interacts with form and submits some information. Forms play an important role in user experience and also decides conversion or success of your website. We all have faced frustrations while using some forms in our life and that bad experience affects the brand identity of website owner/company. So it is very necessary to design better, easy, helpful and user friendly forms. Presenting some suggestions for making forms more Usable below.

Tips for Improving Usability of FORMS

#1. Group the form fields logically

Categorize the form fields in logical groups, this reduces cognitive load and user understand forms easily.

#2. Make labels visible

It is a good practice to make 'Labels/titles' always visible for user. It improves association and this information is really important for a user.

#3. Action buttons should be labeled in verbs

Every form has some intention or motive. That motive or goal of a form can be called 'Verb' of a form. Ex. a form for booking movie ticket online will have 'Verb' as 'Book ticket'. Always label primary action buttons as 'Verb' of that form. This reduces cognitive process and makes decision making more stronger. Specially in confirmation messages (pop-ups) use 'verb' in action buttons.

#4. Provide suggested text to help user

If possible, show the suggestions or contextual help to user. It can increase efficiency of form submission and also reduces the chances of errors.

#5. Show info and tips along with fields

For complex and difficult form fields show the Tip/information along with fields. It helps user in understanding about fields and makes form more user friendly.

#6. Using wizards for simplifying forms

Break the complex and lengthy form in simple and short steps for the ease of user. Use step wizards for simplifying complex form. This makes user's life easier and less load on him/her while filling form.

#7. Increase the affordance of primary actions

Separate the primary actions with secondary action buttons by increasing affordance of primary actions. It reduces the probability of accidentally hitting wrong button and getting data lost.

#8. Don't ask for unnecessary info.

Don't increase form by asking some unnecessary information from user. Optimization of form fields is the first step in improving form usability.

Tip #9 to #15 -  15 tips to Improve Usability of Web forms Part 2

Author: Abhishek Jain (@uxdabhi)