Doing form design? Here’s the definitive guide!
We often tend to miss out on basic guidelines to bring out a well-designed form field. A good Designer/Developer should ideally give importance to every element of a web/mobile app, from a clickable link to a form full of input fields. Users would love interacting with an application only if it’s
easy to use and is friendly. When it comes to any online business, a quick and easy way to get in touch with customers is through a “ contact ” or a “ query ” form.
Most of the applications we use today have a Login/ Sign Up page and Forgot Password is a must-have. Being a Designer/ Developer, it is our responsibility to design a user-friendly form when we know that forms play a very important role in getting touch with customers.
Here are the things to keep in mind while designing a user-friendly form.
Placeholder is a descriptive text about an input field. Having a descriptive place holder will give more clarity about an input field to users. Users will find it helpful if a Search field has a placeholder saying, “Search by name, mobile no, email” than just a “Search”.
Label in simple words is the title of an input field. An input field must have a label since it gives the user a context of an input field. A good label should be short, appropriate, always visible and self-descriptive .
Never use an Inline label. An inline label will disappear as soon as the user focuses on the input field. This makes the user lose the context.
A floating label is a new way of designing labels and is no doubt a nice way of merging placeholders with labels. Today, most of the websites and mobile applications use floating labels since it has cool animations and trendy designs.
Add helpful information wherever necessary, such as characters allowed for creating a username, types of files allowed for uploading and must-have characters for a password input field.
Field focus gives visual information to users that the field is clicked or selected. Changing the border color of an input field is the most common way of focusing on a field.
Do not repeat the input fields
According to a Research, Over a quarter of all users abandoned their Sign-Up form because of the existence of Confirm Password field. Also, it was responsible for hundreds of user corrections, including field refocuses and deletes.
Users may skip the form if the input fields are repeated unnecessarily.
Differentiate between required and optional field
Marking the input field “Required” or “Optional” is a lifesaver and helps a user to finish the form submission quickly. The most common way of marking the field mandatory is by adding an asterisk symbol (*) next to the label.
Never make all fields mandatory unless it is necessary. You could always procure additional information once user registers.
Organize your form fields
Organizing your input fields based on relevance and priority can keep the user-focused and maintain the proper flow of the form.
Updating input field status wherever necessary will let the user achieve tasks without any hurdles.
While creating a password you can auto-update the completed tasks. This avoids the user to click on the Submit button without confirmation.
Setting a maximum character limit to the input field helps to show total characters entered against the maximum limit.
Prevent users from committing a mistake
Design a form in such a way that it prevents the user from committing a mistake. Here are a few best practices:
- Password field must have an option to “Show” and “Hide” the entered text
- Auto-populate input field values if needed (e.g. Address fields such as Country and State can be auto-populated by detecting location)
- Use drop down fields wherever necessary to avoid typing errors
- Display visual clues for input fields such as OTP and Mobile number
- Do not allow letters in number fields and vice versa
- Indicate Date field with a calendar icon and let the user choose the date from a calendar
Error messages and Toasts
An error message should be clear and constructive. Constructive error messages always help users to achieve tasks quickly.
Toasts can be used to show small messages about user actions. Toast messages are visible for a certain period of time on the same screen.
Use Radio Button, Checkbox, Switch, and drop-down Appropriately
Best use of input controls such as Radio Button, Checkbox, Switch and Drop can make your form UI look great! It can also help users achieve the task easily. Let’s look at when and how to use them.
Note: It is a must that you represent a selected state or an unselected state visually different.
- Radio buttons are to be used when a user must select from 2 to 5 options.
- It is easy for a user to compare and choose one option since they are always visible on the
- Radio buttons let you achieve the task with a minimum number of clicks whereas dropdown
list takes more time
- Let the user select the option either by clicking on a button or on its label.
- If possible, always give an option to the user to choose “None” from the list .
- Dropdowns are to be used when a user must select from a long list of options.
- Dropdowns make UI look neat by avoiding clutter on the screen since all the options are hidden in a single input field.
- You can add a search box within a dropdown if the list is too long; search box can always be helpful since the user will be familiar with the type of content in the dropdown list.
- Checkboxes are to be used when a user has control over selecting any number of choices among the available list of options.
- Group all the options based on relevance and align them based on the priority.
- Always allow a user to uncheck the options at any time.
- Switches (also called “Toggle”) can be used as binary options, which means it allows us to choose between a “Yes” Or “No”.
- Switches can replace a radio button if there are only two options to choose from and a
checkbox if there is only one option to choose from.
- Single Switch per line is recommended.
At Goavega we believe in designing the applications we build that follow simplicity and also user-friendly for our end customers.
Goavega Go Future