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

Multi-step form patterns

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

Popup Validation

Android Validation

Android Validation

Inline Validation

Validation should happen instantly when user has finished typing in the field or move to the next field.

From (http://mobiledesignpatterngallery.com/)

Simple validation

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

Numeric keyboard with easy navigation

Android Keyboard with Next/Done at bottom right

Numeric keyboard with easy navigation

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)

comments powered by Disqus