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.

Inputs equals output

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.

Input-Type-Mobile-Form_Design

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.

Inline-Validation

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.

Image result for input mask credit card number

Smart Defaults 

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.

Input Masks Mobile Form Design

Condense Inputs

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.

Image result for input mask mobile

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.