The screen simply does not have enough room for both the input field and its corresponding label. Anyone using such a form on Google’s Android OS (below) faces the problem of disappearing labels. Mobile browsers that don’t have field zoom also run into issues with left- and right-aligned input field labels. Long input fields also suffer a bit with field zoom. With no visible label, the user can easily forget what question they have to answer. As you can see on Google’s registration form (screenshot below), left-aligned labels disappear when input fields are expanded to fill the screen. Excessive spacing around the “Submit” button can tuck it behind the keyboard.įield zoom is another great reason to top-align input field labels in forms. So, make sure the controls on the Web page still allow them to complete the form. However, not everyone will know about the form assistant or know how to hide the keyboard. No need to worry if an input field is off screen: the user just hits “Next” and won’t miss it! The Safari browser on Apple’s iPhone makes use of field zoom together with a “form assistant.” The form assistant displays “Previous,” “Next,” “AutoFill” and “Done” buttons below the magnified input field, giving people an easy way to move through and complete a form. Given that many form errors are caused by people not seeing their inputs well enough to correct misspellings, the usability of this feature is clear. This makes an otherwise tiny field large enough for people to actually see the data they are entering. In many mobile Web browsers, when a user selects a form’s input field, the “field zoom” feature expands it to fill the screen’s viewable area. Mobile And Accessibility: Why You Should Care And What You Can Do About It.Designing A Better Mobile Checkout Process.

You may also want to check out the following Smashing Magazine articles:

Instead, it may become the place to encourage them. Thanks to the modern solutions covered in this article, the mobile space may not be a place to avoid forms much longer. The limitations of mobile devices have forced developers and designers to find new ways to allow users to input data faster and more easily. When you do want input from users on mobile devices, radio buttons, checkboxes, select menus and lists tend to work much better than open text fields.īut constraints breed innovation, and mobile forms are no different. So, limiting the number of forms in your mobile applications and websites is generally a good idea. Mobile forms tend to have significantly more constraints than their desktop cousins: screens are smaller connections are slower text entry is trickier the list goes on.

Web Form Design by Luke Wroblewski