Mobile users who use your app or site have a particular goal. Often the one thing that is standing between the user and his goal is a form. In fact, forms are often considered to be the final step of the journey to the completion of goals. That’s why it’s so important that users complete forms as quickly as possible and without any confusion.

Make forms quick and easy to complete by following seven rules:

Rule #1: Forms Should be Compatible With How Users Enter Data

Ensure that form fields are not obstructed from view by interface elements such as the keyboard. As the user completes form fields, automatically advance each field up the screen.

Image credit: Google

Rule #2: Minimize the Number of Input Fields and User Typing Effort

The longer or more complicated a form seems, the less likely users would like to start filling in the blanks — especially on small screens. Minimizing the number of input fields makes your form less loaded, especially when you request a lot of information from your users.

Keep the form as short and simple as possible. Image credit: lukew

But minimizing the number of input fields isn’t enough — you should also pay attention on user effort for data input. Typing has high interaction cost; it’s error prone and time consuming even with a full keyboard (and even more so on a touch screen).
Thus, try to minimize typing and prevent users from making errors:

Smart Defaults

Smart defaults can make the user’s completion of the form faster and more accurate. For example, pre-select the user’s country based on their geo-location data.

Auto-detection of location can save users time for a Find a hotel form

Radio Groups For Closely Related, But Mutually Exclusive Choices

When the user needs to choose from a list of options, consider using a horizontal tag list, because it makes better use of the available screen space.

Sliders For Minimum / Maximum Price or Budget Range

Consider using sliders for fields which contain prices or budgets, so user can move a slider control to set a minimum / maximum range. A slider is easy to swipe horizontally and provides simple visual cues to customize this action. But keep in mind, that numbers shouldn’t be hidden when slider is being operated (by fat fingers).

AirBnB dual continuous slider for a price range

Rule #3: Form Labels are Either Above Form Fields or are Floating Labels

Labels tell the user the purpose of the field and clear label text is one of the primary ways to make UIs more accessible.

Why You Should Never Use Inline Labels

Inline labels (or placeholder text as a field label), is a text located inside a form field, which disappears when the user types in the field.

Inline labels. Image credit: snapwi

While inline labels look good and save valuable screen estate, these benefits are by far outweighed by the major usability drawbacks, the most significant of which is the loss of context. Once the user clicks on the text box, the label disappears and thus the user cannot double check that what he/she has written is indeed what was meant to be written.

Placeholder text is a poor replacement for a visual label. Image credit: Amazon

Another thing is that when users see something written inside a text box, they may assume that it has already been prefilled in and may hence ignore it.

Why Left-Aligned Field Labels are Bad For Mobile

The main issue with left-aligned field labels relates to the mobile phone display size and aspect ratio. If a left-aligned label is used in front of the field, the narrow screen leaves very little space left for the field itself. This creates a usability issue since the form field will often not be wide enough to display the user’s entire input. Not being able to see input data caused trouble for users, because it makes it much harder for them to spot any typing errors before submitting the form, which leads to more erroneous forms being submitted.

It’s very hard to spot the error if input data isn’t fully visible. Image credit: baymard

Label Above the Field or Floating Label

Form labels should be above form fields so that users can easily see what they are filling in and why. The main benefit of placing the label above the field on mobile is that you can have the form fields extend the full width of the screen, making them large enough to display the entire user’s input (in a decent font size like 16px). Additional benefit is the much better opportunity for writing clear and meaningful field labels as we don’t have to be limited to 1–2 words.

The main downside of placing labels above the field is that it takes up more vertical space, which means users have to scroll more. However, it’s not a serious problem — nowadays it’s absolutely natural to scroll.
Alternatively, you can use a floating label which ensures users that they filled out the correct field. The placeholder text is showing by default, but once an input field is tapped and text is entered the placeholder text fades out and a top-aligned label animates in.

Image credit: Matt D. Smith

Rule #4: Form Input Should Be Validated in Real-time

In an ideal world, users will fill the form with necessary information and finish their job successfully. In the real world, users often make mistakes. But users dislike when they go through the process of filling out a form only to find out at submission, that they’ve made an error. The right time to inform about the success/failure of provided data is right after the user has submitted the information. Real-time inline validation immediately informs users about the correctness of provided data. This approach allows users to correct the errors they make faster without having to wait until they press the submit button to see the errors.

Image credit: Google

If answers are required in a specific format, state this in advance, communicating the imposed rule (format specification) without an additional example.

Image credit: Material Design

Inline validation also helps decrease hard bounces. In the example below, you can see a good example of inline validation which provides a solution for fixing a potential problem.

Image credit: lukew

Rule #5: Match the Keyboard With the Required Text Inputs

Users appreciate apps that provide an appropriate keyboard for text entry. For example, when users need to enter a credit card number, only display the dial-pad, to limit their input to numbers and not characters. This will reduce their choices and mistakes, and accelerate completion.

Image credit: Google

Ensure that this is implemented consistently throughout the app rather than only for certain tasks but not for others.

Rule #6: Provide Helpful Information in Context

Sometimes you need to have relevant, in-context information ready to assist users to move through the form easily. But the accompanying text should be used only where it really needed:

• • When scheduling dates, users appreciate context like a monthly calendar to identify days of the week, eliminating the need to leave the app to check the smartphone’s calendar. It also reduces the risk of the user becoming distracted by another task.

Image credits: Google

• People may be concern about the security or privacy of their data and you need to reassure them that the data won’t be shared with 3rd party sources.

Image credits: Google

Rule #7: Use Forgiving Formatting

Some tasks really do require users to type very precise information, but forcing people to provide this information in a specific format can be at odds with good usability principles. If you are asking users to input numerical information (such as phone number) into a form, be flexible, and design screens that can interpret multiple input formats and show that information in a way that is easily scannable (by humans, not machines) in order to prevent mistakes.

Don’t use fixed input format. Image credit: Google

Conclusion

Users can be hesitant to fill out forms, so you should make this process as easy as possible. All changes described in this article can significantly increase form usability.

About the Author: Nick Babich is a software developer and author of a blog dedicated to usability