All clickable user interface elements need visual cues. Without them, users won’t know they’re clickable. Buttons and links have size, color, placement, and shape. But the only visual cue a text field has is its border.
A thin, faint 1-pixel line is not a strong visual cue because users can easily miss it. Text fields need a stronger visual cue to signify clickability, so that users can spot them quicker and easier.
A text field is an element that contains user input. Its border is not a strong visual cue, but the empty whitespace inside the text field is. The empty whitespace 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 giving your text fields an “empty” appearance, you can trigger horror vacui in users and give it a strong visual cue.
Signal of Emptiness
What makes a text field look empty is the inner whitespace. But the whitespace isn’t distinct when the text field is placed on a white background. To make horror vacui work, you have to place your text fields on an off-white background. This makes the emptiness in the text field more apparent to users.
Light gray is a practical color to use if the rest of your site is on white background. But you can use other off-white colors as long as the text field’s emptiness is noticeable.
Some designers may want to put labels inside their text fields. But this will lessen the strength of the text field’s visual cue. Instead, opt for top aligned or infield top aligned labels so that the label is visible without concealing the inner 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 and brightness of the border. You should display a different border color for when the user hovers over and selects the field to make each cursor state clear.
Text Field Size
Most text fields are a modest size where the font size of user input is the same as the site’s body text. This is far too small for user input because it makes it harder to check for character accuracy. Making user input bigger will allow users to clearly see what they’re typing to prevent any mistakes.
Increasing the height of the text field also strengthens its visual cue because it creates more empty whitespace for users to spot. The average height of a text field is 30 pixels. Increasing it to 50 pixels gives it a stronger visual cue and allows for larger user input.
Combine the Cues
A 1-pixel border is not a strong enough visual cue to signify clickability. Make use of other visual cues such as empty white space, hover states, and sizing. When you use all these cues together, your form won’t just look easy to fill out, it’ll actually be easy to fill out.