Table of Contents
Designing and building great mobile forms is hard. Quite often, filling out these forms is not easier either. When we think about filling some form, we are usually not filled with joy. For most of us, forms are just a tool we need to use to get some job done. As a tool, it is not the most user-friendly one. What makes it so difficult to design usable form? Can we take even very bad examples of mobile forms and make them better? Let’s talk about a couple of best practices to achieve this.
No.6-10 are in part 2.
P.S.: There will be a bonus advice in the end.
No.1: Keep it short and specific
How many input fields do you think mobile forms should have? The only correct answer is as little as possible. Mobile forms should be short. Unfortunately, this is not often the truth. In reality, forms are usually much longer than is necessary. I’m not talking about reducing the number of input fields such as first and last name into one. This is not a real problem. The real problem is that many mobile forms contain optional input fields. My question is, why?
The answer is usually goes like “because some users my want or need to use this field”. Okay, how many users do you think will want to do that? Also, do you need to ask for this information right now? There is a difference between information you need to get right now and information you can ask for later. For example, register form should contain fields for email and password, or username. Otherwise, user can’t login after she finishes the registration. Well, you can send her a link.
However, is it necessary that the register form also contains fields for phone number, gender, address and other things? Are these information crucial for finishing the job user wants to get done? You should ask the same about other types of forms. Is it necessary to ask for phone number if the user wants to buy something? What if she wants to be notified by mail? Then, the phone will be useless. Asking for it will be a waste of time. And, you will waste screen real estate.
Show only what’s necessary
American author Mark Twain once said: “I didn’t have time to write a short letter, so I wrote a long one instead.” The same could say a lot of web designers as well. When we design mobile forms, we often don’t take the time to think about it deeply. The truth is that eliminating unnecessary elements, not only form fields, is hard and time-consuming. It is usually much easier to add new elements than to remove. However, it is worth the time and effort.
Take a minute, or five, and think about the form you are designing. What is its goal? Is it collecting information? Probably not, unless it is a survey. The goal is helping user finish some job, or task. The goal of register form is to help user create an account. Order form helps user buy certain thing. As you can see, the goal is never just collecting information about the user. So, why do you ask user on information that are not necessary to achieve this goal?
I think that you know where am I going with this. Eliminate all the fields that are not necessary at the moment. If you would like to know some additional information, ask for them later. Send user welcome message with link to her new profile where she can fill these information. The benefit of removing unnecessary fields will be increased completion rates. Shorter forms, not only mobile forms, are easier to finish for users. This is your goal, to help users finish the form.
If you are still hesitant, remember that every time you remove a field or question from a form, its conversion rate will increase. Let’s remove the obstacles and help users get their job done faster and with less effort. Again, show only necessary inputs.
No.2: Use single-column layout
Always use single-column layout for your forms. This practice could be harder to implement on desktops because there could be a lot of space left. Well, who says that whitespace is bad? However, it is a must for mobile forms. The reason for using single-column is simple. It helps sustain vertical momentum of moving down the form. When you use multi-column layout you force users to visually reorient themselves.
In multi-column layout, users’ eyes have to jump from one column to another. And, they have to look for the point where the line starts. From the left to the right, then on another line and repeat. After a while, this will cause eyestrain. If you don’t believe me, repeat this movement for a while. The best way to avoid this is staying away from multi-column layout in both, desktop and mobile forms. Use single-column layout to keep users in the flow and sustain the vertical momentum.
There is one exception to this rule. You can show short and related fields such as zip code, state, age and gender on the same row.
Another good thing to do is aligning labels vertically. In other words, above the inputs, not next to them. There are two reasons for following this practice. First, horizontally aligned labels break the vertical momentum. And, they also force users’ eyes to constantly move from left to right. The result is again more pressure on the eyes causing eyestrain. Second reason is that mobile forms has less screen estate.
When you place label and input on the same line, the input must be smaller. This can cause a lot of issues. Also, the form will look more cluttered, which may discourage some users from completing it. And, this is something you want to avoid.
No.3: Prefer logical order of fields
Another practice for making mobile forms easier to use is ordering fields in standard and commonly used order. For example, it would not be a good idea to ask for credit card number first and name second. People usually expect the less confidential information to be first. You can think about it as meet someone face to face. If you don’t know that person, you will probably first ask for her name, not phone phone or credit card number.
Again, you will start with first name and then last name. Then, you may ask on couple more information that are not too personal. It is only after these initial steps when you ask for information that are personal and for many people uncomfortable to talk about. So, when you design a mobile form, think about it as meeting someone you don’t know yet. Keep it friendly, start with less confidential information. Remember to order the fields properly.
Let me give you a simple example for order of inputs asking for credit card information. Credit card number should be first, expiration date second and security code third. In case of location, the order should be address, city, zip code and state.
Finally, remember to use logical order for multiple options. For example, standard shipping should be first while 2-day shipping should be second. Lastly, think about the most often used values in selects and drop-downs. What values are used the most? You can list these values first to make completing the form easier. Also, using autocomplete and plugins like typeahead might be a good idea. It will allow users to type less. This can increase completion rates of your mobile forms.
This practice has two forms. First, always make sure to group label with the form field it describes. Label should be right above the input. There should be relatively small amount of space between the label and input related to it. On the other hand, there should be more space between these two elements and other form fields. As a result, the label and input will look like they are connected, that they are in the same group. This is a one of the gestalt principles, proximity.
Also, keep in mind accessibility of your mobile forms. Meaning, make sure to use for attributes with correct values. This will explicitly associate label with the right form element. What if you don’t want to use labels, but only placeholders? Well, we will talk about this in the next practice. If you want to do it, this is one thing you can do to improve the accessibility of your mobile forms. Use aria-label attribute on input fields. This information will be visible only to screen readers.
The second form of grouping form elements is to group parts of form together if they are logically connected. This way, you can divide the form into sections. This practice can make it easier for users to work with the form. For example, you can put inputs for personal details into one section and inputs for billing information into second. And, if you still want to include some optional inputs, you can put them into third section. Just remember to use standard order of inputs.
No.5: Avoid placeholders, use labels
Are placeholders good or bad? Is it a good idea to use only placeholders or to use them in tandem with labels? What do you think? It is a very common practice to provide information about form field in the form of placeholder. I have to admit that I used this practice by myself for a number of times as well. The problem is that there is some evidence that this practice is not the best one. In a fact, it can be even detrimental to usability of the form.
The biggest problem with using only placeholders is that it forces users to rely on their short-term memory. Let’s say that there is no other clue or description for the field other than placeholder. Then, when user input some text, this clue is gone. From that moment, there is no way user can make sure she filled in correct information. Well, there is a way. She can “simply” empty the field by removing the text. Sometimes, click outside is also necessary. Then, the placeholder will appear.
Forms and world full of distractions
When she checks the clue or description, she can type the text into the input again. How user-friendly approach is this? Also, imagine doing this with more than one field. Let’s think about one hypothetical situation. In this situation, something interrupts the user while she is filling in the form. It is something important and she has to do something else before she can finish the form. Let’s say that the task will take her 20 minutes. What will happen when she returns to the form?
Let’s say, the form is half complete and there are no labels. There are no clue to confirm that the half of information is correct. Our user has to rely solely on her memory. The question is, how reliable her memory is at that moment? She didn’t predict that she will have to interrupt her work and so something else. And, she probably didn’t think about trying to memorize what all the inputs are for. Although this may seem like an extreme example, it is not.
Another example could be user filling in the form on his mobile form while someone suddenly interrupts him. The result is the same. Without labels, short-term memory is the only help. This is the world we are designing mobile forms for. This world, the real world is full of distractions.
We are designing for illusory world, not for reality
Unfortunately, many designers design, not only mobile forms, for world that is not congruent with this reality. In that ideal world, users are always completely focused when they are filling out forms. There are no distractions. Again, the reality is different. In the real world, users are not single-tasking. Instead, user are quite often multitasking. A lot of people have open more than just one tab at single time. The same for apps. Some people are quite good in switching between them.
Some people might be also talking with someone else. How many times did you see person in coffeehouse talking to someone who was looking at the phone? Nowadays, this is not so rare. And, what if you get a message in the middle of filling some form? Or, someone might call you. You switch your attention to the distraction without thinking about it. When you return to the form, will remember where did you stop? Will you know what that information belongs into that field?
All these distractions put our ability to finish the form successfully into question. The reality is that people are often not completely focused on the task at hand. You don’t need to read stacks of research papers on usability to know this. Mobile users are frequently distracted and interrupted while using their devices. And, it doesn’t matter what is the source of distraction. The consequences are the same. Our short-term memory and ability to recall information is disrupted.
Labels improve usability of forms
We have to adjust the way we design mobile forms, and forms in general, to fit the reality. The question is, how? First, we should help users continue where they stopped. They need to have some clue about the field they are filling. Yes, this means adding a labels for all fields. Unlike placeholders, labels are omnipresent. Users can always use labels to ensure they are filling the field with the right information. This is true even if they return to the form after longer time.
Another reason for replacing placeholders with labels is that labels allow users to check the information before submitting the form. How many times did you submit a form without making sure all information are correct? Probably not that often. How can you make sure all information are correct without any clues describing all input fields? You can’t. You have to delete the information for each and every field to show the placeholder. With labels, this is not necessary.
Next, placeholders can be a pain for people using keyboard to switch between fields. When I need to fill some form, I like to use tab key on desktop or arrow key on smartphone. It is much easier to switch between fields. This can cause problems in forms that don’t contain labels. Placeholders can disappear when you select the input. If you didn’t have the time to read the placeholder, you don’t know what to type in. This can’t happen if the form contains labels.
The last reason for using labels instead of placeholders is to avoid confusion. Some users may think that the placeholder is text that was automatically filled in. Or, they may think that the placeholder is a default value. As a result, they will skip the field. Ask yourself, can this happen if you use labels? Let me give you one more reason for using labels. Placeholder should be used as a hint. Placeholders should provide users with supplemental, not essential, information.
If you have field for password, placeholder should tell the user how long the password should be. Or, it should say what characters are allowed, or both. It should not just say “Password”. It is the purpose of labels to label form fields, not placeholders.
Using labels in conjunction with placeholders is not a solution
Can we say that using both, labels and placeholders, is the best for great creating mobile forms? Unfortunately, no. There is still the possibility that some users will think that placeholder text is either a default value or result of browser’s autocomplete function. So, what if you need to add some additional information? My recommendation is simple. Add these additional information or hints outside the field. This way, it will be always visible.
For example, you can place the label as first, hint text as second and form field as third. And, make sure to use proper amount of space between these elements. Remember, proximity matters. Elements that are near each other tend to be perceived as a group. Put simply, use less space between the label, hint and input than the rest of the form elements. I would also suggest using lighter color and font-size for the hint text than label. This will increase the importance of labels.
Closing thoughts on mobile forms
These are the first five best practices that will help you design and build more usable mobile forms. Hopefully, these practices will help you create forms your users will like to use. I have one last thing to say. Take this advice as a bonus or reward that you read the whole article. Always design with the user in mind. Look at it through her eyes. Think about what her needs are and what she wants to get done. Remember that empathy is the key for creating user-friendly designs.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
