6 Tips for Better Mobile Web Forms
Filling out web forms can be tedious on a desktop computer and can be painful on a mobile device if you fall into some of the common traps. What can be a great experience on a desktop can send a mobile user scrambling. These six tips will go a long way toward making your web form's mobile experience quick and easy.
1. Use a Single-column Form Layout with Labels Placed Above the Fields.
On a typical smartphone, once the user has tapped an input field they will have enough room in the viewing window to see at least 3 lines of type. It's a fairly small area but it is enough that they should be able to see both the label and the input widget they tapped on.
If you put the labels to the left of the field it will require the input widget to be too small to see the data entered in it on most phones in portrait mode. Putting the labels as placeholder text inside of the fields is trendy and can result in forms that are more aesthetically appealing but it can lead to user frustration. As a user goes back to correct data on a form or even as they tab through a form, it can become non-obvious as to which fields were for what purpose.
2. Use Native Input Widgets Anywhere Possible
It's quick and easy to use these new attributes just by using the input type="date", type="number" or type="email" respectively. When the user "tabs" or clicks into a field, the operating system will supply a native data entry widget that even validates the user has selected a valid value.
<input type="date" id="MyDate" name="MyDate" class="Datepickers">
3. That Means ALL Native Widgets Wherever Possible
Numerous web sites use custom html widgets to render slick custom versions of what would typically be a drop down list. If very well done, on a desktop computer they can look cool while still matching the basic behavior a user expects from a dropdown list.
On a mobile device, it shatters the user's flow and expectation for how a drop-down list is supposed to behave. The user expects the operating system to pop up a smooth-scrolling and highly responsive list of choices in the on-screen keyboard area that look like their native operating system. Anything other than this behavior will throw off the user and most likely be more difficult to navigate on the touchscreen.
4. Fix Auto-correct and Auto-capitalize
When a user is trying to enter in proper names such as street addresses or abbreviations, auto-correct is typically more of a hindrance than a help. Likewise if the user is entering in something that is case sensitive such as an email address; the on-screen keyboard's propensity to try to fix the capitalization can really get in the way.
Fortunately it is easy to correct these issues on most modern smartphones by using the autocorrect and autocapitalize attributes.
<input type="text" id="Street" name="Street" autocapitalize="off" autocorrect="off">
5. Use the LABEL Tag Correctly
Use the LABEL tag to provide the text description of your input field. This not only helps disabled users use your application but also provides a larger touch target zone for your field. If you properly use the label tag and the user taps the label with their finger, the keyboard focus will automatically go to the widget related to that label.
<label for="MyField">Enter the text</label>
<input type="text" id="MyField" name="MyField">
6. Use a Natural Tab Order
The best choice is to keep the fields in your form structurally where they belong in the HTML for the order they are intended to be filled in. If you're able to do this, the tab order will be correct automatically without any further need for additional mark-up. Sometimes you can't do this because some aesthetic design decisions might have been made that require the fields to be structurally out of order in order to be put in order by the CSS.
The taborder attribute allows you to programmatically define the order of progression for the form starting with the lowest number to the highest number. On mobile devices, the on-screen keyboard typically provides a next/previous type of option that users use to move between form fields without having to touch/scroll manually.
<input type="text" id="MyField" name="MyField" taborder="1"> <input type="text" id="MyField" name="MyField" taborder="2">
Entering data on a smart phone doesn't have to be painful. With these quick tips and a little extra time testing your user experience on a small screen you can make your mobile forms experience smooth as butter.
About the Author:
David Talbot currently works as a Principal Architect at EverBank. He has over 15 years of experience in the software industry and specializes in building rich UI web applications. He is also the author of Applied ADO.NET and numerous articles on technology. He can be reached at firstname.lastname@example.org