by anthony on 04/12/16 at 10:28 am
All clickable user interface elements need visual cues that signify clickability. Without cues, users won’t know to interact with them. Most buttons and links use color, location, and shape for a strong visual cue. But the only visual cue most text fields have is a 1-pixel border.
A thin, faint line is too weak of a visual cue because that’s not how users recognize text fields. This can cause users to overlook text fields or click them with uncertainty. Text fields need a stronger visual cue to signify clickability.
A text field is a container for user input. Its emptiness is how users recognize text fields. The empty space is a visual cue based on the principle of horror vacui. Horror vacui is a latin expression that means “fear of emptiness”. It describes the tendency to fill empty spaces with information over leaving them blank. By making your text fields look empty, you can trigger horror vacui and give users a stronger visual cue.
The Sign of Emptiness
What makes a text field look empty is the inner whitespace. But the whitespace isn’t distinct when the text field is on a white background. You can make the whitespace more clear by placing your text fields on a light gray background. This makes text fields easier to spot and motivate users to fill the emptiness with their input.
The background doesn’t have to be light gray just a dark color. Light gray is a practical color to use on your form if the rest of your site is on white background.
Avoid using infield labels on your text fields because it compromises the empty space. Instead, opt for infield top aligned labels so that the label is visible without concealing the clear whitespace.
Text Field Hover Effect
Hover effects often give buttons and links a stronger visual cue. But they can also work on text fields. You can give them a hover effect by changing the color or brightness of the border. You should display a different border color when the user selects the field to make each state clear.
Empty Your Text Fields
A 1-pixel border is not enough to signify text field clickability. Placing your text field on a dark background instead of a white one will make its emptiness stand out. This emptiness is a strong visual cue for text fields. Users have a natural desire to fill empty spaces. Take advantage of horror vacui and empty your text fields to get them filled out.