Text fields are the most common interface component used to request information from users on forms. They come in various shapes, and styles. But what is the best way to display them for optimal usability?
The best way signifies to users how the text field functions and how to interact with it. In other words, it follows the principle of Clarity.
Strong visual cues are what give text fields its clarity. Text fields allow users to enter text into the interface. Therefore, they must appear empty and clickable to the user. Text fields that don’t embody these attributes have weak visual cues.
Having a weak visual cue doesn’t mean users won’t click or type in the text field. It means that it may take them longer to do so, which especially applies to elderly users. The stronger the visual cue on a text field the quicker it is for users to recognize and interact with it.
Clickability + Empty Space
There are a few text field styles that violate the Clarity principle. The first one is the solid text field that has a strong cue for clickability, but a weak cue for empty space. It looks more like a button than a text field because it’s filled with gray.
Users associate white space with emptiness. Text fields need to have white space so users recognize that their input goes inside it. A solid text field lacks the cue for empty space which means it’s not the best way to display them.
Another common style is the outline text field. These have a strong cue for empty space due to their inner white space, but have a weak cue for clickability. Only a 1-pixel outline is used to signifiy it’s clickability, which makes it easy for users to miss when it’s placed on a white background.
Underline text fields are worse. They have weak clickability and empty space cues. A 1 pixel horizontal line is not only easy to miss, but users can mistake it for a line separator used for separating content. Lacking both visual cues increases the time it takes for users to interact with the text field. This may be a few seconds more, but when it comes to form completion every second matters.
Placing it on a dark background and filling it with white space is the best way to display a text field. This strengthens both its clickability and empty space cue, giving it the utmost clarity. When users see it, it’s clear how the component functions and what it’s for. This visual clarity allows them to immediately interact with the text field without hesitation.
Once your text fields have strong visual cues you can start to think about rounded corners. Rounded corners don’t act as a visual cue, but they do influence the user’s attitude toward the object.
A research study discovered that sharp contours on visual objects convey a sense of threat and trigger negative biases. Another study found that curved contours are preferred over sharp angled ones across cultures. In other words, rounded corners on text fields could cause users to view your form as more user-friendly. But it’s questionable to what degree.
It’s important to note that if a user views your form as user-friendly, it does not mean it has optimal usability. The effect is only on the user’s initial perception of your form. It’s possible for them to view your form as not user-friendly if they have trouble filling it out despite the rounded corners on your text fields.
You can adjust the border radius to how round you want the corners to be. A higher border radius is neither good or bad, but rather an aesthetic preference. Adding enough border radius to round out the sharp corners is all you need.
Users need an additional visual cue when a text field is selected. The select state indicates the active text field so that users know where they are typing their input. The visual cue helps users focus on the active text field so that they don’t mistake nearby text fields for the active one.
The visual cue for the select state needs to have more than a change of border color to meet the principle of Clarity. Only changing the border color would make the select state indistinguishable for visually impaired and color blind users.
Along with changing the border color, you should also increase the border thickness from 1 pixel to 2. This will give the text field a distinct change in both color and shape to signify a clear state change for all users.
Clear Visual Cues
Clear visual cues give text fields optimal usability. You may look at a text field and think it’s clear, but not all users see what you see. The principle of Clarity is only met when the interface is clear to all users.
To give clarity to all users, you have to use more than one visual cue. With text fields, the visual cues are clickability and empty space. But with other interface components the visual cues could be different. The interface component’s function is what determines which visual cues you should use.