Mobile Must Have: Streamlined Forms

Streamlined Forms

Filling in forms can be a difficult task for mobile users.  Forms require scrolling, tapping to highlight an input field, and entering accurate information using the phone’s slide-out or touch-screen keyboard.  If a user has to scroll to see all the input fields, has difficultly selecting fields or has to input too much information, they will likely not complete the form.

Reduce the number of input fields.  This is the best way to optimize forms for mobile users. Do you really need the user’s middle name? Limiting registration forms to two fields is ideal (Email and Password).  Requiring more than seven fields is excessive.

Avoid open-ended text fields.  Radio buttons, checkboxes, select menus and drop down lists are easier for mobile users and should be used where ever possible.  Typing on a phone can be frustrating while tapping to select the appropriate option is fast and easy.

Use the browser to your advantage. Most mobile browsers have built in features to make forms more accessible.  For example, Safari’s form assistant gives the user form navigation options including previous, next, autofill and done.  Mobile browsers also use ‘field zoom’ to zoom in on the highlighted input field.  These features can make it easier to fill out a form, but they can also cause problems.  The keyboard and form assistant slide up from the bottom, often obscuring the submit button if the form is too long.  Field zoom works well with forms that have labels positioned above the corresponding field (as in the image at left).  If the label is left or right of the field it will disappear in field zoom.  The user may forget what each question was and will have to adjust the display repeatedly to complete the form.  Keep the browser’s treatment of forms in mind while converting a site to mobile and always use vertically positioned labels and large, easy-to-tap input fields.

Rely on built in HTML input types to make data entry easier.  Most mobile browsers recognize HTML5 input types.  The “number” and “tel” types will switch the keyboard to numeric options.  The date and time related input types may also provide a pop-out calendar the user can tap to select a day.  The “password” type will automatically use password masking and replace each letter with a • for privacy.   The image at the left shows Apple and Android responses to a “tel” input and a select list.  W3Schools has a complete list of HTML input types.

Rely on built in HTML5 input types for data validation and better information.  Using specific input types limits responses and ensures a certain level of validation.  The browser won’t allow text in a number field or a missing @ in an email field.

iTouch Built-in Form Treatment

       

Android Built-in Form Treatment

        

 

If you liked this read, check out these: