Everyone knows filling out forms can be a tedious and mundane task, and doing so on a mobile device can be even worse with small touch areas and multiple fields to input information into. But by adding microinteractions and anticipating user behaviors, you can make form input on mobile a much better experience for your users. Here are a few interaction-design patterns that will go a long way towards getting you there:
1. Jump Straight to the Input Field When a user navigates to a new view with input fields, immediately jump them into the form by automatically prompting the keyboard and pulsing the cursor inside. By doing this, you’ll make it much easier on users by ensuring they don’t have to think about where or how to start because you’ve already initiated the process for them. You’ve also saved them time, taps, and created a process that is easier and more straightforward for them.
2. Don’t Use Inline Labels We all know space is precious on mobile phones. And in order to save it, designers began using inline labels (descriptors or placeholder labels placed inside a form field). Inline labels became popular due to Apple’s use of them and allow designers to create clean, space-efficient form designs that let users know what to type in a field. Inline labels do have a downside though, they can cause a loss of context for users. This occurs because as soon as a user begins typing inside a field with an inline label, that label disappears and only leaves the user with what they have typed up to that point to provide context.
Fortunately, the Design Director at Studio Mds, Matt D. Smith, has created a design interaction and animation to address this issue. They are called floating labels. When a user begins typing inside a floating label, the inline label floats to the top of the user’s input where they can always see it, solving the problem of context loss. Floating labels also allow us to save space in our designs by keeping labels in their form fields. Google realized the benefits of floating labels quickly, and added them as a design standard in their Material Design Guidelines. Since then, floating labels have gained more popularity in the design world and are now a go-to for UX designers looking to improve the form-entry experience for their users.
3. Provide Guidance and Design Validation When it comes to form-entry design, it’s your job to help users understand exactly what’s needed from them and to provide them with helpful feedback. For example, if you’re asking a user to enter their phone number into a field, specify the input type to prompt the number keypad automatically and use an input mask to keep the format consistent. Doing this sets a clear expectation for the user, and limits their margin for error. If the user makes a mistake in the form, display inline validation to help them fix it. Displaying a “X” in the field is often not enough because it leaves the user guessing what they did wrong, and with no way of knowing how to fix their error. You can improve form experiences greatly by using colors to highlight user mistake(s), adding a few words near the error to inform them of their mistake, and by letting them know how to fix it quickly.
It’s easy to include microinteractions in designs. Despite this, however, designers often forget to incorporate them (unfortunate, as it’s almost always the little details that make a product’s design truly great). But by taking the extra time to really think about how users will input data, you can make mundane tasks much more tolerable for your users, and create a much better user experience that you can be proud of.