Table of Contents
Knowing how to design usable mobile forms is more and more important. The mobile web is on the rise. A lot of people use their mobiles more than desktop computers or laptops. And, it doesn’t look like this trend is going to disappear soon, rather the opposite. Some people think forms are not so important. Great user experience is about excellence in every detail, including forms. Let’s learn how to create more usable forms. Let’s make work with forms finally pleasant experience!
No.1-5 are in part 1.
No.6: Use the right type of input
This is another practice for creating mobile forms that are more usable especially on mobile devices. When you are working with form on mobile device, the type of input determines what type of keyboard you can use. Using the right keyboard can make filling out the form much easier and faster. The user will not have to switch between different keyboard layouts in order to write some specific character or number.
For example, let’s say you want are asking the user for her email address. In that case, you have two options. First, you can use input with type attribute set to “text”. Second, you can use input with type attribute set to “email”. “@” sign for email address. In the first case, device will provide user with the default keyboard for text. This keyboard is great if you want to write plain text. However, it is not the best when you want to write you email address.
The problem is that valid email address has to contain “@” sign and some domain. Standard text input doesn’t provide them in the default layout. You have to switch to layout with numbers special characters to access the “@” sign. This is not necessary if you choose the second option. This keyboard has “@” sign and also “.” in default layout. So, user may not need to switch to another layout for these keys. As a result, user is more efficient while working with mobile forms.
Tel for numbers, not number
The same is true about other inputs types for other data. If you need to know some numerical data, use input with type attribute set to “tel”. No, this is not a typo. Tel keyboard offers user a plain numeric keypad. If you want from the user a number, the tel input type will be a better choice than number. Number keyboard includes a lot of stuff which isn’t numbers.
Dates, time and datetime
Another type of date you may want to ask the user are dates. Then, use type “date”. Don’t try to use those little calendars. Their usability is often horrible. Also, stay away from text inputs with “enhanced” with complex validation rules. Again, usability of this solution is speculative. Instead, use good old (new) date type and let the mobile browser take care of the rest. On desktop, datepickers are okay. I have to warn you that the current support for date input is not great.
Firefox, IE and Safari doesn’t support these input types. These inputs will work properly with all functionality only Chrome, Edge and Opera. Still, I want to encourage you to use them. We have to give people developing browsers reason to implement these inputs. If something is not used often, there is no reason to keep it. And, in the worst case, browser will render date input as text.
Similar input to date is datetime input. The overall support is as bad as in the case of date input. Only Chrome, Edge and Opera will guarantee full functionality. And, I’m not even sure if using this type of input is good for usability. The problem is that users have to scroll day by day in order to change month. Day and month are not separated. Imagine if you want to go two or three months back or forward. Exactly, enjoy it. For this reason, it is better to ask for date and time separately.
Mobile forms and older generation
We could spend a lot of time talking other input types. However, there is something more important we need to discuss. There is always some possibility that some users are not so used to working with smartphones. For example, a lot of older people don’t use smartphone to access the Internet as often. In addition, a lot of them also know only so much about using smartphone. Meaning, they may not know where the “@” sign is. Do you think something will suggest them to intuitively switch to keyboard layout with numbers? Well, the key is so clear.
You may also try to hope that they will try different keys and see what happens. Unfortunately, we all know how much inclined are older people to experimentation and trying new things. It is more likely that they will either give up or look for some help. And then they will give up. You may argue that older people are not your target market, or your client’s. And, this can be true. Still, take a look at the numbers. There is a chance that some of your users are 50 years old, or older.
And, even if we assume that there is zero chance of this happening, that doesn’t mean you should neglect usability of your mobile forms and the experience based on it. Experience matters. Beautiful design will not make it on its own. So, even if your user base is much younger, you can still improve their experience and help your design succeed.
No.7: Use the right size of the input
First of all, use drop-downs only when no other options seems reasonable. If you there are only 4 options, use radio buttons. Radio button are a much better choice because they require only one click or tap of the finger. And, user can always see all available options. Also, some developers like to use custom drop-downs that usually require JavaScript. If user working with form have JavaScript blocked or not supported, he can’t finish the form. Yes, this can happen.
Now, let’s finally talk about the size of an input and information. Text fields, including tel, email, password and other types, should be about the size of the expected input. Why? The reason is simple. Users are more likely to make a mistake if the input is too short and they can’t see the full text. What if there is more than one possible length of the input? In that case, I suggest using one of these two options. The first option is to use the average value of these lengths.
The second option is to use the length of the most often used value. Stick to the length of the value the majority of users use. This is easier with fields with predefined values such as datalists and selects. What about some generic inputs like inputs for name or address? Yes, these can be a pain. It is also hard to predict what the average length of name or address could be.
As a rule of thumb, I suggest that you make the input for these information such as name and address longer rather than shorter. It is better to give users more space than less. So, if you have the screen real estate, let the fields for these data take up more space. Put the field for name on one line and let it take the whole space. Then, do the same with field for address. Will this make the mobile form longer? Possibly. Will it improve its usability? Definitely.
Use size as a cue
Another reason for matching the size of the input with the information you are asking for is about suggesting what is expected. Put simply, shorter input suggests that the information you ask for should be also short. The same is true about the opposite. So, if some information has limited length, you can reflect it in the size of the input. For example, you don’t have to make field for age as long as the input for address. This field can be much shorter. Use the size of the field as cue.
No.8: Provide explanation when necessary
What if one of your mobile forms contains some input that requires specific format of input? For example, what if some inputs accepts only numbers or text, or certain file types? What if some user’s input has to have a minimum number of characters, or maximum? In that case, write down specific instructions somewhere close to the field. For example, you can put this information between the label and input or under the input. Just don’t make users guess these requirements.
Remember that the same applies to format of the information you are asking the user for. If you want the user to use specific punctuation or spacing, for phone numbers or credit cards, say it explicitly. Don’t make the user guess what is the right format. However, I would suggest not to use this practice of forcing specific formatting. If you want to get information in specific format, and you can write short script to convert the data into that format, do that instead.
It is better to format the data by yourself than leave this task on users. Here is why. Some users might not read the instructions. Others might read it and not care about it. In both cases, it will cause problems to you. So, if you can, allow users to type in wider range of formats and do reformatting of the data by yourself. Make it easier for your users to use your mobile form.
No.9: Provide users with clear feedback
You should notify the user when something is happening on the background and when something is wrong. Don’t rely on users to recognize these events. And, when you want to notify the user about something, use a variety of cues. For example, if some field contains an error, don’t rely solely on using colored outline for it. Instead, use visible outline for that field along with showing error message using visible color and heavier font-weight. Make it hard to be overlooked.
Colored outline on its own is not enough since some users may have troubles with recognizing some colors, or all colors. They may not recognize that the input is different. Another thing I have to mention is that the error message should be specific. It is not enough to just say that there is something wrong with that mobile form. Be specific. Tell the user what field contains the error and what the error is. Also, tell them how to solve these errors.
This is something we need to remember. We shouldn’t make our users guess. If there is some problem, we should say it explicitly and give users clear instructions to solve it. It is in our own interest to help users work with the form, complete it and send it.
Give feedback after the form has been sent
The same is true for events such as submitting the mobile forms. A lot of websites and apps provide users with only very subtle notification that the form has been sent. For example, the color or the label of the submit button will change. That’s all. Although this is already quite bad, it can be even worse. Some websites and apps don’t provide any feedback at all. And, some websites and apps will simply reset the form. What if there was some problem that caused resetting the form?
In this case, user has no other option than to guess and hope that the form has been sent. Give users clear and feedback that is hard to overlook. There are different ways in which you can provide users with feedback, after they submit the form. You can automatically redirect them on a new page. This page can contain a short confirmation message. You can also use modal with overlay and put confirmation message inside it. This tutorial on modals will help you create it.
Another solution is to use visible (colorful) notification with short confirmation message on the top or bottom of the screen. In both cases, it might be a good idea to add a button to close the modal or notification. It is hard to miss something when you have to click on it. You can also use animation to make the message more visible because movement naturally draws attention.
My final advice for designing more usable mobile forms is to never add reset or clear buttons. If user wants to clear the form, clicking a single button is faster. However, there is a risk that user will tap or click this button accidentally. I think that this risk of accidental deletion outweighs the benefits of having the “feature” to clear the form with a single click. Let’s be honest. How many users do you think will have the need to use that button?
As far as I can remember, I never needed to reset the whole form. In most cases, I wanted to delete content of only one or two inputs. Also, I have never met anyone who would need such a button. When you think about it, it can be actually quite difficult to recall mobile forms or any form with reset or clear button. Usually, there is either only one button–“Submit”, or two–“submit” and “cancel”. If you want to add some button, I think it is better to add the “Cancel” button.
This will be useful for those users who want to leave the form and delete the information. If you decide to add this button, make sure it has significantly less visual prominence than the “Submit” button. For example, use less contrasting color and make it more subtle. Also, add enough space between “Cancel” and “Submit” buttons. Remember that there is a difference between clicking with mouse and tapping with finger. A good rule of thumb is to use at least 48px of space.
Closing thoughts on mobile forms
Congrats! You’ve just finished this mini series. During this series, we discussed 10 best practices that will help you design and build not only more usable mobile forms, but more usable forms in general. I hope you enjoyed this series. Also, I hope that you’ve learned something that will come in handy in the future and help you become a better designer and developer. Now, let me repeat the last advice I gave you in the first part. Always design with the user in mind.
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
