Designing form for a mobile experience differs with the operating system, the device used and also tweaks that developers need to make for different platforms. Forms on mobile can deliver a smooth and seamless experience to users provided developers pay attention to what really matters. Please find our list of essentials for mobile form design below for developers and designers.
Input equals output
When the user inputs information into a form he expects feedback to ensure that he completes the task within minimum stipulated time. When creating form always set input type & attributes and set conditions favorable to the field in contention.
Set Input Type & Attributes
If the user is required to input his email address set input type as an email address and turn off auto-correct & auto-capitalize. Input types are available for wide variety of fields like a number, email address, date, range, telephone numbers and more.
Set Inline Validation
When the user enters input into particular field use Java Scripts to provide real-time inline validation. Inline validation results in better conversions for forms. We have covered the concept of inline validation in more detail here.
Set Inputs Masks
Input masks enforce specific formats that are needed for specific fields. For example, if a user from the US needs to input a telephone number it needs to be in a specific format xxx-xxx-xxxx. Setting input mask ensures that user doesn’t make mistakes while submitting inputs required in specific formats. To sum up, inputs masks are essential for formatting and accuracy. Check the below example where the user has enter credit number in a specific format.
Smart defaults allow users to fill the form with more accuracy and improve overall conversion of the form. A great example of smart defaults is show password which allows the user to make sure that the password they are typing in is accurate to the last character. Alternately smart defaults can also be used to condense inputs with help of list/picker menu or picker box.
Condensing multiple or more fields into one helps people to fill more data as it keeps them in input mode. For if the field for pin-code auto-populates the city/location that would make the users task simpler. Similarly, do not divide a single field into multiple fields as users find it annoying and illogical. Condense the inputs to ensure you get the maximum information from the user in minimum time span.
Design Considerations for Mobile Form Design
Set Correct Expectations
Clearly show the user what’s involved to ensure that you guide them through the entire journey. If it’s a shopping check-out process make sure that steps are clearly denoted to give the user a clear idea of what’s expected from them.
Go Beyond Drop-down Menus
Don’t use a drop down menu for every field consider other alternatives like a stepper menu or picker menu. Choose a menu control options based what best suits the field.
Primary Action Matters!
Make sure that your call-to-action or primary action doesn’t go out of focus. Make sure that the design gives maximum weight age to the primary action required from the form. In other words, make it obvious to the user in contention.
If you want to know more about mobile form design head to Luke Wroblewski’s blog which has some really great insights into the subject and has been the source of inspiration for this article.