fabernovel loader

Mar 12, 2014 | 6 min read

Design

Good practices for mobile forms

It is getting hard to publish an app where forms are not mandatory. Users are exposed to input data through forms in order to access the service (login, registering), achieve a task (searching, checking out) or complete secondary actions (for instance getting in touch with the editor). Constraints due to the mobile environment (screen sizes and the digital keyboard among many others) make forms a major traffic leak.

To the question “What makes you uninstall an app?”, 38% of Android users answer the need to fill a form for registering. Let’s take some time to think about problems users can encounter.

This post is the first of a series coming along with our new app optimization activity.

How to avoid typing

How to limit typing

The keyboard can be a major source of frustration for users, here are some tips to limit its use in a mobile context.

Use mainly action buttons, native gestures (tap, swipe) and native features (tap-to-call, GPS, camera).

  • The application SeLoger (v3.2.0) allows users to draw their search zone on the map instead of typing it.
  • The application trivago (v1.80) cleverly uses action buttons for search filters.

Only display mandatory fields, the best practice is to place optional fields in a folded area.

  • Opodo (v1.0.0) only displays mandatory fields where optional ones are reachable through a “More options” button.

Simplify typing

When you cannot get round typing, useful tips can make it easier for users.

Correctly use pickers by grouping what could be: for instance, the selection of a day, month and year can be in the same picker.
Tip: if a user must choose a departure and a return date, it could be easier to have both fields on the screen at the same time and not to close the picker when tapping on the next field. The application liligo (v2.6) does that correctly.

  • This kind of picker can be reused for other purposes: eDreams (v1.8.0) unites in one picker the choice for how many passengers you want to book the flight regarding their age Adults/Children/Babies.

Displaying the correct keyboard is mandatory: for typing an email the “@” must be displayed, for a phone number there is no need to have a keyboard with letters.

Think about input masks, they automatically format typing in a field. Users are informed on how to type what they have to and are reassured they typed properly.
Tip: input masks must be used diligently with a correct wording and do not exclude simplifying the experience by allowing multiple masks forms.

  • When registering on Twitter (v5.8) the user does not ask himself if he must add the “@” in front of his user name, it is already in the field.

Knowing and guiding

Make a guess on what the user is about to type

If the user finds it painful to type an information once, typing it several times will probably make him give up. Here are a few tips to avoid this situation.

Autocompletion and suggestions can help the input: for instance if a user types “user@gma”, it would be welcome to suggest “user@gmail.com”. Errors are limited and input shortened!

Validate the correct form of the input while it is done with a visual clue: you prevent the user from filling the entire form and discover that many fields must be filled again.

Try to fill automatically some fields: if the user is asked for a zip code, a town, and a state, the zip code should be enough to determine the rest of the fields. Note that it would be clever to display them in an order allowing to do so.

You can also fill a form by using informations you can find in the personal card of a user from the address book.

Default parameters can save time. You can guess or know what choices will be made by most of your users. You can untick the newsletter registration, or know that most people look for a double bedroom in hotels around their position and for tonight.

  • The application of the dating service Twoo (v3.13) pre-filled the form for a man, single, looking for a woman which is certainly its main audience.

Reassure

You have to reassure users when they type personal data. They will be reluctant to give phone numbers or email adresses. Language elements can be used to inform users they will not be spammed for instance.

The lost of typed information can be irritating. Make sure information is saved and reassure users that a tap on the back button will not make the data disappear!

Make it understandable

The clearer the presentation and the workflow are, the more you increase your chances of users completing entirely forms.

Make it easy to access the next field while users are typing, especially when the keyboard is out.

  • Vine (v1.3.1) does a fantastic job by making all fields visible when the keyboard is out.

Organizing fields by theme free the user from potential headaches due to dealing with information of different natures.

Wordings placement is key. They can be on the left outside the field which can lead to space issue on small devices. You can place them above the fields if you have no problem with stretching out your form. Another solution is to merge the wording with the input mask, you gain space but the wording will not be displayed once the user has started typing. This last solution is OK for short forms, with less than four fields.

  • Polar (v1.4.7) places wordings on the left, artfully merged with the design
  • Even better, Instagram (v4.1) uses fields with pictograms to avoid the loss of wording when typing. These pictograms also give the validity of what has been typed by switching colors between green and red.

Input masks and wordings inside the fields must not repeat the field name even if they are erased when typing. They give great information on the format of the information requested.

Use cases

Forms are vital in certain types of applications. We will describe two major categories: those requiring registration and m-business applications.

Registering

Social plugins for registration must be looked at closely. They allow users to skip a painful form.
Their integration requires to follow some guidelines which will be described in an upcoming blogpost. Are you thinking about Facebook and Twitter? Many other services allow for a quick authentication. You should find out which ones are relevant with your audience.
Tip 1: do not hesitate to tell your users nothing will be posted on their profiles without their approval.
Tip 2: promote these quick registrations!

You cannot avoid typing for one thing: the password. The mobile environment specifics allow you to deal with this differently from a web platform. It has been demonstrated that hiding the password on a mobile device does not increase security and on the other side several fails come from mistyped passwords. The best practice is to show the password by default while giving the opportunity for the user to hide it. The confirmation field is therefore optional.

  • The application Polar (v1.4.7) from Luke W. shows us an elegant integration.

Asking a confirmation for email addresses seems useless. It could be more clever to use suggestions to limit typing errors.

A good practice to speed up registration is to ask for the minimum amount of data and to suggest completing the profile later while demonstrating the benefit of a complete profile.

  • Dating service applications often remind you that a profile with a picture boosts your chances to meet someone!
  • SoundCloud (v2.6.3) does not ask for a username when registering and gives one by default. Users can change it later in the settings.

m-business

On top of asking for registration, m-business services also integrate forms for the check-out.

Downsizing the number of fields is key for check-out funnel (which can be very long). Many tricks can be used, for instance instead of asking for a surname and a name, a field “Surname Name” can be displayed. Most of the time the billing address and the delivery one are the same : therefore, it is interesting to automatically fill the second one while giving the ability to edit it.

Allowing alternative payment services like Paypal or Google Wallet would probably make the check-out easier for users of these services.

Registering is probably not what the user wants to do when buying something, a guest checkout should be available. If the whole experience is satisfying, the user will come back and have incentives to complete his profile.

Native features can be useful: you can suggest retail outlets nearby using the GPS or call assistance in one tap. The camera can be used to scan bar codes to find a product or even credit cards to pre-fill banking information.

  • The application Club Privé Vacances (v1.1) uses tap-to-call when checking out.
  • Amazon (v2.5.1), like many m-business applications allow to search for product by scanning bar codes.

Filling banking information can be stressful for users. You should reassure them about privacy and security concerns to increase chances users will go through the entire process.

These forms are usually very long, it is useful to give context to users with breadcrumb or a progression bar.

Conclusion

While many applications offer great user experiences for filling information, we wanted to highlight major issues through this blogpost. Knowing your audience, being aware of the offered experience and a touch of good sense will help you increase conversion rates on your mobile forms. As these improvements rest upon details, a good analytics integration is essential.

logo business unit

FABERNOVEL TECHNOLOGIES

150 talents to face technological challenges of digital transformation

next read