- #1: Cut Down on the Keystrokes
- #2: Maintain Context and Readability
- #3: Minimize Gestural Interaction
- It's Still a Band-Aid
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
#2: Maintain Context and Readability
On sites that offer no mobile-sized version of forms, there is one surefire way to cause users to lose context and find themselves struggling with a form that should be easy: Make it two columns (labels on the left, fields on the right).
On iOS devices, not only are two-column forms next to impossible to read without zooming in on the screen due to their small size, as soon as you tap a field to make it active, the labels in the left column disappear from view as the field itself butts up against the left edge of the screen. To see the label, then, users must drag the page from side to side. To avoid this fate for your users, position the labels directly above their corresponding fields to ensure users can see the labels at the same time they're typing (see Figure 2).
)
Figure 2 Zooming in on two-column forms results in disappearing labels.
Also, though I've already mentioned auto-removing default values when a user taps to them, it's important to note that default values should be used whenever the exact format of data to be entered is unclear. When users need to enter phone numbers or social security numbers, for example, which may or may not require dashes, a default value can make this clear and eliminate the need to guess and possibly reenter the number after the form throws an error.
Finally, be sure the default value reappears if the user deletes his own text; remember, he could be doing this to remind himself of what needs to be entered.