Design Better Input Fields
The input field is the affordance
Summary: Blank fields afford action, and the style of an input communicates what information is needed.
There are many guidelines to take into consideration when designing forms. This article focuses specifically on how the styling of input fields impacts usability.
Obscure design deters action
The input field is an affordance. Without an explicit visual cue, a user may not understand where the input area is and fail to enter information accurately.
Field width communicates what’s required
The size of the input communicates the length of the content needed. In the left design in the above illustration, the “Zip Code” field width communicates to the user that the basic version of the zip code is needed. The design on the right presents an arbitrary length, which confuses the user on what is required (ex. 94887–3829 vs. 94887).
The design on the left works well for U.S. addresses and should be localized to other countries. If the country is not known, it is better to use the generic design on the right. For more information on localization and internationalization read, Form Internationalization Techniques.
Structure communicates format
The structure of an input communicates the required format. The designs on the right in the above image makes it clear how the entry should be formatted and guides the user when doing so.
The top design on the right employs an input mask on focus. This implementation benefits from the blank input acting as an affordance and guides entry when a user clicks into the input field. This aids user understanding and reduces the chance of an erroneous entry.
Again, it is important to note that the design on the right is structured for U.S. phone numbers. It should be localized to the user’s respective country. If the country is not known, it is better to use the generic design on the right.
Placeholder text causes confusion
Placeholder text diminishes the visual cue for action. It also misleads users to think the placeholder text is an entry. For more thoughts on Placeholder text, read Alternatives to Placeholder Text.
