Organizations across industry verticals have made the shift to mobile forms to improve organizational efficiency, reduce the risk of data loss, improve collaboration, and cut costs. Even paperwork-heavy industries such as the construction industry have adopted this type of electronic forms in their workflow.
Before making this shift, however, you should be aware of the best practices for designing mobile forms.
Avoid Overwhelming Users with Multiple Input Fields
Use fewer input fields in your form whenever possible. Having too many can increase user frustration, especially if they require switching between input modes. So, instead of asking for a user’s first and last name in separate fields, consolidate both in a single input field labeled “Name”.
Design with Mobile Usability in Mind
Due to the limitations of mobile devices, specific elements are used to design mobile forms. These ensure better usability, quicker data entry, and enhanced user experience. Take for example these three.
- Vertical Scrolling – Mobile devices have limited screen real estate, which is why scrolling is an important feature for mobile forms. Contrary to what most believe, scrolling comes naturally to mobile users. According to MOVR, 50% of mobile users start scrolling within 10 seconds while 90% start within 14 seconds. This feature provides better usability for continuous and lengthy content, preventing breaking up text into several screens.
- Multi-tab Forms – Like vertical scrolling, using multi-tabs in forms minimizes the number of input fields on the small screen. This reduces the form’s complexity and spares users from becoming overwhelmed while entering data. In order to make the most of this feature, though, the form’s fields should be logically grouped. For instance, an HR form for new hires can group fields under qualifications, job history, and personal information tabs.
- Single Column Layout – Paper-based forms may display fields across multiple columns per page to save paper. This, however, may not be a feasible option for mobile forms due to devices’ smaller screen size. Forms with horizontally adjacent fields force users to scan them in Z patterns. In turn, this slows users’ comprehension speed and affects their ability to complete entering data quickly. Tablets are an exception to this rule, though, as they have larger screens.
Design Mobile Forms that Can Be Filled Quickly
According to a 2016 study by AnswerLab and Google, mobile users are more goal-oriented than desktop users. Keeping that in mind, you can use the following to make form filling less onerous for users.
- Avoid adding unnecessary or redundant fields from paper forms in your mobile form.
- Automatically pre-fill values in fields. However, allow users to clear these values wherever feasible as you can’t predict user information all the time.
- Incorporate features that speed up form filling such as eSignatures and image upload and annotation.
Make Field Usability a Priority When Designing Mobile Forms
The usability of form fields is as important as their visibility. The limited screen space can make entering data difficult, especially on devices that do not come with a pointing device such as a stylus. To make forms easier to use and ensure the accuracy of the data entered, measures such as the following are used.
- Fields are placed at finger-friendly spacing to prevent misses and selection errors.
- Accordion fields (collapsible sections) are used to allow users to toggle the display of sections of content.
- Check buttons and drop down menus list all the options available for users without taking up much space in the form.
Personalize Content According to Users’ Roles
To match the interactive and responsive nature of mobile devices, mobile forms can display content according to user roles. The biggest advantage to this feature is delivering content and functionality that matches the user’s needs.
For instance, only users with the role of “Manager” can see a large text box and eSignature panel to respectively add comments to and electronically sign a site inspection form submitted by their team members. This, in turn, reduces the chances of human error while eliminating the need to clutter forms by adding hints for filling certain fields.
Keep Drop-down Menus and Lists to a Minimum
As useful as drop-down menus seem to be, experts refer to them as “the UI of last resort” for mobile. In addition to forcing users to guess how information is organized, the menu’s items can be difficult to select. That’s why the chances for error and user frustration are very high.
There are several good alternative design solutions to this issue though. A group of buttons (or in our case, the segmented control) can be used to display fewer than five menu items. On the other hand, an auto-complete box can substitute longer menus such as the country selection menu. As for date selection, your mobile forms can feature a thumb-friendly calendar overlay instead.
Use Labels Instead of Placeholders
Using placeholders, or short hints describing the value to be entered in an input field, is a common practice. However, it can affect the usability of your mobile forms. Placeholders alone force users to rely on their short-term memory. Once they start typing in the field, the clue is gone. The only way they can view it is by removing the text they typed.
Labels, on the other hand, are a permanent fixture in your form. They reduce the chances of error as they can expand to guide users on the type of input they should enter. Therefore, use them instead of or in tandem with placeholders.
Don’t Add a ‘Reset’ or ‘Clear’ Button Unless Required
In order to make your mobile forms more usable, avoid adding a ‘Reset’ or ‘Clear’ button unless necessary. While these buttons make clearing a form faster, not many users would need such a button. You can add a ‘Cancel’ button instead. Just make sure to add sufficient space between the ‘Cancel’ and ‘Submit’ buttons.
If you must add a ‘Reset’ button, make sure it isn’t as visually prominent as the ‘Submit’ button. You can use a less contrasting color or make it more subtle so that users don’t tap on it by mistake.
Add Mobile-Friendly Error Messages
You may add form validation to make sure users input the right information, but you should complement it with good error messages. These messages guide users, reduce their anxiety, and ensure they complete forms successfully. Here are some principles to follow while creating error message for mobile forms.
- Keep the messages clear, concise, and explanatory.
- Ensure the visibility of the messages. One way of achieving this is by adding them close to the field in error.
- Use colors to convey meaning. For instance, red can indicate a warning or an overdue task.
- Include a solution with your error messages. For example, if a user isn’t able to submit a form, ask them to check their connection as well.
The Bottom Line
Mobile forms are becoming an integral part of any enterprise mobility strategy. Yet with poor design, they won’t help enterprises achieve their goals and users will opt out of using them. Avoiding these outcomes is easy if you adhere to the best practices detailed in this post.
So, keep these in mind while designing your next form in Makeen transform platform.
