A Stronger Visual Cue for Text Fields

by 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.

Horror Vacui

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.

textfield-visual-cue

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.

textfield-cursor-states

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.


OUR PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATE

Elegant Themes

Author and editor-in-chief of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

7 Responses to “A Stronger Visual Cue for Text Fields”

  1. Colin

    Apr 18th, 2016

    Accessibility wise a Colour change on focus is hardly a “strong visual cue”. The default “blur” effect on OS X on focus is much better for example.

  2. Ted Drake

    Apr 22nd, 2016

    The grey background is a good tip for making the empty text field stand out. But you also have to make sure the text has adequate contrast. The medium grey text may work against white, but it’s lost when placed on a light grey background.

  3. seb

    May 18th, 2016

    I’m fine with typical 1px or 2px border input field on white background. Just please remember about hover, on focus effect and of course add placeholder text even if you have labels for your input fields.

    Btw. this website uses 1px border fields on a white background :)

  4. Terry Breschi

    Nov 30th, 2016

    That’s a great point @ seb…

    Makes me wonder how one *should* handle text fields on white backgrounds?

    I’ve used a light-grey background for inputs before, but I worry that can render a field ‘disabled’ in the user’s eye

    • Joshua Ziggas

      Dec 8th, 2016

      You can also put a box shadow in addition to a border. Bootstrap does this. We also have a lot of forms/inputs appear in a modal so you could say the modal itself is the visual cue to do something.

  5. Nai

    Feb 9th, 2017

    What do you think about one line input fields (android) versus regular form fields? Do the users understand them? Is it easier or not? Even old people? Which one would you recommend? Do you have any research about it?

    • anthony

      Feb 14th, 2017

      I think users do understand them because the underline has been used on paper forms for a long time. The only trouble with them is that they’re a smaller click target than a rectangular field. This means users will tend to move their mouse to the beginning of the underline to activate the field which can take more effort as opposed to anywhere inside a rectangle.

Leave a Comment