• Chui Chui Tan
• 24 Mar 2011
• 2 Comments

A Web form which works well on desktops won’t necessarily work on mobile devices. With the nature of desktop computers, Web forms are not designed to be efficient. Due to the constraints of a mobile device and its context of use, efficiency is extremely important when filling in a mobile form.

This is a summary of an article on Mobile Form Design Strategies which offers strategies that you can apply to design a more efficient and less error prone mobile form as compared to your Web form.

Design strategies

• Label alignment: Avoid using horizontal labels (left- and right- aligned) for mobile forms. Use vertical align labels instead.
• Remove: Get rid of unnecessary elements and features to help users focusing on their tasks. If possible, omit optional fields or elements which do not have primary uses.
• Combine: Combine various similar input fields into a single field. Make sure it is clear what users can do and what they could enter in the field.
• Improvise: Make good use of mobile devices’ built-in features such as location detection via GPS satellites to simplify your mobile form input.
• Break into small steps: Split a long form into a few smaller steps to make your mobile forms easier to use. Use this approach sparingly. Also, try reducing unnecessary elements on each page to avoid slow page downloads.
• Use appropriate input elements & menu controls: Replace one type of control with another which could simplify the form and its interaction. Prioritise mandatory content and fields, and avoid over emphasizing optional fields or those which are only useful for a very small group of users.
• Choose appropriate list selections: There are two main ways to present a list selection: locked drop down (in alphabetical or non alphabetical order) and open predictive search. Both have pros and cons. Choose the appropriate list selection based on your field and selections.
• Set sensible defaults: Provide some default selections where appropriate based on the context in which your forms are used.

Mobile and Web forms

In conclusion

Follow these steps when designing for mobile forms:

1. Understand when and why your users use your form on mobile devices
2. Identify the primary content or fields for the tasks
3. Use the strategies above to work out the best ways to present each field for an ideal interaction

Just remember: the ultimate objective of your mobile users is to complete their task (whatever they are) efficiently and effortlessly.

You can find various examples for each strategy above in the full article on UX Booth.