Mobile Form Usability Design
Designing long forms for mobile can be a big challenge. We are constrained by the limited space available. The only way is to break down the forms into smaller sections with logical grouping. Only then, it is more manageable and visually, it is easier for users to identify and categorize with their eyes. I mean as an end user they should not have to think too much.
The second challenge would be to design the validation steps. Inline live validation should be preferred. It can be difficult to find space for the error messages. Special care also needs to be given to support color-blind users. Therefore, simple border color or text color change will not help.
The third challenge would be the constant movement of users which can disrupt their form data entry. Whenever possible, we must save the form data.
Below is a few patterns that I like.
1) Multi-step mobile forms
2) Mobile Validation
Popup validation look nicer but took more space and can be quite cluttered with lots of errors. By default we should show only the error icon indicator (at the right). The popup should show only when the field's focus is back on.
Popup iPhone Validation
Validation should happen instantly when user has finished typing in the field or move to the next field.
3) Prev/Next Done keyboard
Add buttons on top of our keyboard so that it is easier to move between the fields or to next field of focus. Also, use the appropriate keyboard type (e.g. numeric for phone number, email address for email address, autocomplete or picker drop-down for small number of choices).
iPhone Keyboard with Prev/Next Done on top
Android Keyboard with Next/Done at bottom right
4) Auto-saving of data
Users are easily distracted on the move. They can be interrupted by phone calls in the middle of completing the form. It would be an absolute nightmare if all data are gone when they are back :) Whenever possible, save data (even if it is invalid).
For iOS, simple way is to make use of NSUserDefaults. For Android, probably SharedPreferences would be an ok choice.
This has the following advantages: - User does not need to re-type the same information across multiple forms (e.g. personal info for various job postings) - Data is captured and will not be lost during interruptions/system shutdowns - Data is not lost in version/os upgrades if use the right storage mechanism (nsuserdefault, sharepreferences, etc)