The Do’s and Don’ts of Mobile Form

avatar

by

on

Filling up an online form on mobile is just like standing in line for your driver’s license, you wish it would be simpler, but since there is no other option you still do it. Wishing all the same, that the next renewal would be easier.

Well, maybe not as dramatic as that. After all, mobile forms are getting simpler and more convenient. With one-time signup and secure data storage, it’s getting easier. Yet, UX designers have to fight the importance of ‘good’ forms time and again.

A form is also a conversation in the user experience flow. Therefore, we must build it like one. At any point, if your form is unclear or messy, it will leave the user with a bad taste.

User experience is more than good images with working code. For any website or mobile application to have good UX, you will need to create a flow or path. A path with necessary cues that lead the user to what is expected and in the end delivers the promised value.

Thus, mobile forms become the means to the end. For example filling in information on sign up form guarantees creation of an account or filling up the shipping address means users will get their goods delivered. These are expectations that users have when they are filling out a form. So keep in mind that your messaging should be clear and concise.

Here are 12 lessons to improve your mobile form experience.

1. Keep forms in one column

Since mobile screens are much smaller, there is no space for more than one field to appear clearly. In case the web version of your website has two fields next to each other, it’s time to realign it. Keeping it as one column also ensures, the users do not miss any fields.

Keep all mobile form fields in one column

2. Align your labels to the top

Usability research with the help of heat maps has supported the idea of lean form structure where the input labels are aligned on top of the field. This means there is more space for your input fields for touch or tap actions.

Align labels to the top of input field

3. Use spacing to serve visual clue

White space is the most subtle clue in User Interface. Be it web or mobile. Adjusting the space between two labels to be more, while keeping the space between the input field and its label would certainly serve as a visual clue.

spacing serves as visual clue

4. Avoid ALL CAPS

As in the heading, capital letters can be very jarring. They are also difficult to read. So avoid using them, unless necessary or if you want to write abbreviations. Use basic grammar laws such as capitalize the first alphabet. These are rules that customers are aquatinted with and will tend to follow effortlessly.

 

avoid all caps

5. Resist using labels as input text

The rise in minimalist design brought out the concept of using labels as input text. However, it did not last its original popularity. Especially in mobile devices with a host of distractions which can lead to confusion when the input text disappears. The user is left staring a blank box.

Resist using labels as input text

6. Design your checkbox and radio buttons for fingertips

Though names and password are the most common fields in forms, there are situations where you need checkbox and radio buttons. Having horizontal list for radio buttons is not a hassle when it is on the web because it is easy to move the cursor. However, you need to ensure there is enough spacing between options on mobile for fingers to be able to click.

Designing checkbox & radio buttons

7. Describe and highlight CTA’s

CTA’s are the ultimate step in your user experience. It signals the completion of an action or leads to the next phase. Therefore, CTA’s need to be descriptive. Instead of generic terms like ‘Submit/Cancel’ or ‘Yes/No’, try using specific verbs such as ‘register’ or ‘sign in’ or ‘place order’. Also, highlight them to create a sublime clue that will lead the user towards an intended path.

Describe and highlight CTA’s

8. Define optional fields and additional information

Compulsory labels are often denoted by * sign, which leaves the optional fields unmarked. This practice is counter-intuitive. UX designers want to keep minimum fields possible. Therefore, only the most relevant ones make it to users. More often than not, forms have very few optional items. Thus, it only makes sense to label the optional field rather than using * sign.

Specify errors and validation

Most web forms have tool tips which provide additional information like password rules or restrictions. However, these small tooltip icons can be distracting on the mobile if they overlay input field or any other object for that matter.

 

9. Specify errors and validation

When you define validations for input fields, ensure that your descriptions are detailed yet succinct. Similarly, if an error occurs the user should have a clear understanding of what went wrong because only then the user will be able to rectify it. Unclear and recurring errors can result in frustrated users on your website or mobile app.

Define optional fields

10. Adjust field length according to character limit

All input fields have a set character length, yet some inputs require even smaller fields. For example CVV codes or zip codes. Setting a smaller input field provides a visual cue to the user. On the contrary, an absence of these can leave the user confused. Having shorter input field also save valuable space on the mobile screen.

Mobile field length based on character limit

11. Set numeric keyboard as default

This tip is only common sense. If your input only requires numeric characters, set the numeric keyboard as default. It ensures faster and easier filling process for the user. In case you want to avoid special characters in the password section, disable them from the keyboard. There is no simpler way to ensure it. However, it’s not as easy as it sounds.

Set numeric keyboard as default

12. Group related information

When your form is long with multiple input fields, try to break it into small chunks. Group related information together to create logical flow between the sections. It will help the user process the input fields better by creating visual cues.

Group related information

These are two-cents by our designing team. In case you are looking to explore mobile forms, feel free to reach out to us.