Why You Shouldn’t Use Solid or Underlined Text Fields
Text fields have evolved stylistically over the years. Designers are getting more creative with them, but sometimes a little too creative. One particular style that’s caught the eye of many is the underlined text field. Its novel and minimalist appearance may attract you in using it, but when you understand how it affects user behavior, you’ll think again. Underlined text fields are hard for users to recognize and tap. If they have trouble recognizing and tapping your fields, they won’t be able to start your form nor finish it. These issues lead to user frustration, form abandonment, and lower conversion rates. Not every user has trouble with underlined text fields. Tech-savvy and normal-visioned users can often figure them out, but many elderly and visually impaired users have a hard time. They’ll usually land on a form and wonder where the text fields are to begin their task. When all they see on the page are text headings and content dividers, they get confused and leave. Text Field or Content Divider? Users are most familiar with horizontal lines used to divide content. When you use underlined text fields, it’s easy to mistake them for content dividers. The underline looks like a content divider, and the field label looks like a heading. Sometimes the placeholder text inside the field can even look like body text. Users can also mistake them for content lists. A content list isn’t what they expect to see when they land on a form, which can make them think they’re on the wrong page and leave. Not only that, but underlined text fields are also hard to tap because the edges of the tap target are missing. When the top and side borders are open and invisible, the target becomes a thin and faint one-pixel line. A smaller and less visible target to aim at decreases the user’s tap accuracy and causes mistapping. In some cases, they may accidentally trigger an adjacent text field when aiming for their target. Without clear target boundaries, it’s easy for the finger to land in the wrong area. Tappable Appearance Text fields should appear tappable so users can start the form right away and tap through each field quicker. Instead of opening the borders, keep them closed on all sides. Doing this will make your text fields look like tappable objects with larger targets. It’s also beneficial to round the corners of your text fields to enhance its tappable appearance. Research has discovered that humans innately perceive rounded, contoured objects as friendly, and sharp, angled objects as threatening (source). This finding suggests that users have a positive bias toward rounded corners, which draws them to interact with those objects. Text Field or Disabled Element? Along with a tappable appearance, your text fields should look fillable, not filled. Many designers make the mistake of filling the inside with a solid gray. Solid text fields are an improvement from underlined ones, but they’re still not the best practice. The solid gray fill makes text fields look like they’re in a disabled or inactive state. It causes users to wonder whether they should interact with them or not. Sending these mixed signals confuses them before they start the form. When text fields look like disabled elements, users are less likely to interact with them right away. They’ll first scan the page for regular text fields. When they realize those are the only elements that resemble a text field, they may interact with them then. This cognitive effort is taxing and slows down their form completion time. On top of that, solid text fields make input…
Like to keep reading?
This article first appeared on uxmovement.com. If you'd like to keep reading, follow the white rabbit.