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.

underlined-fields-example

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.

content_divider-underlined-text_field

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.

content_list-underlined-text_field

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.

underlined-textfields

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.

tappable-textfields

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.

solid-disabled-text_field

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 and placeholder text harder to read. When you have gray text on a gray background, the color contrast isn’t strong. Many low vision users will have a tough time reading the text and could abandon the form as a result.

distinguish-disabled-text_fields

Overlooking and reading solid text fields isn’t the only problem. Users could also have trouble distinguishing any text fields that are in an actual disabled state. If your form has a mix of regular and disabled fields, low vision users will have difficulty noticing the difference. Usually, the only difference with disabled fields is a fainter text label.

solid-textfields

Fillable Appearance

The ideal experience is when users recognize your text fields and begin filling them out immediately. This immediate reaction only comes when they contain white space for a fillable appearance. The white space is a clear cue of emptiness that prompts users to fill the space with their input.

To achieve a fillable appearance, keep the inside of your text fields white and empty with closed borders. Darken the borders just enough for users to liken the outline to an empty box. Outline text fields may look plain, but they attract attention and are easy to recognize, which is what users need.

To enhance the fillable appearance of your text fields, place them on an off-white background. An off-white background color makes the white space more prominent and provides the clearest cue for a text field. Not only that, but it makes any disabled fields on the form easier to distinguish.

off-white-text_fields

With this approach, it’s quicker for users to notice filled and unfilled fields when they’re checking the form. The brightness of the white space gives the input and placeholder text higher contrast for better readability. Any text placed on the off-white background remains readable, and won’t visually clash with the input or placeholder text.

fillable-textfields

Google Got It Wrong

The popularity of solid and underlined text fields originated from Google’s Material Design system. It’s novel approach to text fields garnered the attention of many. However, this led designers to sacrifice usability for trendiness—a move that doesn’t pay off in the long run.

Even Google realized their mistake when they changed the underlined text fields on their Gmail login form to outline text fields. From the enormous amount of Gmail users, they got feedback that many were having trouble logging in.

google-gmail-text_fields

They’ve further addressed the issue of underlined text fields in a study that found “enclosed text fields with a rectangular shape performed better than those with a line affordance” (source). Although they still promote the use of solid text fields, they’ll soon realize that this is also a mistake.

Usability First

A novel and minimalistic style for text fields has no use if it’s not easy to use. Before you consider changing the style of your text fields, make usability the requisite. Ensure your text field style is easy to recognize and tap for normal-visioned and visually impaired users.

It’s okay to make your form components attractive and fashionable, but not at the expense of usability and accessibility. Don’t follow trends because everyone else is. Question whether they meet user needs first. Not doing so won’t just hurt the user experience, but also your conversion rate and bottom line.

The Bulletproof Case

Still not convinced? Need to convince your boss or colleagues to follow these best practices? Send them this video or watch it at your leisure. This video makes the most compelling case that will convince others to change their ways.

It contains more in-depth insight and examples than the article. You’ll get the video, slides of the video presentation, and a best practices cheatsheet—the perfect package for making the bulletproof case.

Buy Bulletproof Case

By and large, web designers are very passionate about their job. That stands out in contrast to most other industries. But when it comes to the bottom line, web design is just like other businesses. The main point is to gain clients and make a decent living.

As such, there is a lot of talk about booking big clients with budgets to match. Yet, that’s not always realistic – especially for freelancer designers who are just starting to make their way. Even seasoned pros may not have the desire or capacity to take on larger projects.

Still, going for the biggest fish seems to be the prevailing advice. So, does that mean smaller projects aren’t worth anything? Absolutely not. There are still important things to be gained. Here are a few reasons why you may not want to toss those little fish aside.

The Web Designer Toolbox

Unlimited Downloads: 1,000,000 Web Templates, Themes, Plugins, Design Assets, and much more!

Learn to Build Client Relationships

Among the biggest challenges any business owner must face is in learning how to deal with people. I’d say it’s nearly as important as being a talented designer and developer.

Just as no two projects are the same, you’ll find that no two clients are, either. This means that you will interact with all kinds of different personalities over the course of your career.

Soon after I launched my business, I took on all manner of small projects – and met a few characters along the way. And, even though I didn’t see it that way at the time, it also presented a great opportunity.

You see, I didn’t make a whole lot of money. But I learned some important lessons about how to communicate with my clients. I figured out how to explain things in more user-friendly terms, how to keep them updated on work in progress. I also gained valuable insight into what their expectations were and how to take/respond to criticism.

It was a bumpy ride, for sure. There was a lot of stress and worry. Sometimes I could have handled things better. But the experience itself was priceless. Learning to build working relationships can be a key to both personal and professional growth.

Two people sitting at a desk. learn new skills. But to truly put those skills into practice, you need to build something. Small projects can serve as a great proving ground.

For one, the expectation level should be equal to a client’s budget (though it’s important for you to explain this to them). A low-end eCommerce project, then, should mean fewer features and customizations.

This allows you to start small and build a foundational understanding of the type of site you’re working on. It can also serve as a bit of a playground for experimentation.

Because you’re on a shoestring budget, you probably won’t have access to some of the fancier scripts or plugins. The result is that you may have to dig into code a little more to get things done. It’s a wonderful method for figuring out how things work.

Person pointing at laptop computer screen. workflow works for you?

These are valuable lessons to learn before you move on to bigger things. Because, until you understand your niche within the industry, it can be difficult to set yourself up for success.

For instance, it’s probably not a good idea to take on a massive project without having any idea of how you’re going to approach it. Without knowing which tools to use or even whether or not you’ll be comfortable with the work involved, you’re opening up a dangerous can of worms. You could well be placing yourself in a bad situation.

While smaller projects still need to be taken seriously, you can use them as a sort of guide. Inevitably, you’ll find that you like some aspects more than others. Perhaps you’ll realize that you are really into SEO, while learning that membership-based sites aren’t your cup of tea.

Whatever your preferences, the goal is to find out where you fit in. That takes time and often requires working on a variety of different projects. This is where you can use smaller gigs as a way to discover who you are.

Why You Shouldn?t Gray Out Disabled Buttons

August 10, 2019 • Disabled, Shouldn

What should you do if you have a button that isn’t active in a given context? Removing the button from its native location and revealing it later can surprise users. Instead of doing this, designers will indicate that it’s disabled to avoid displaying a drastic change to the interface.

The way most designers communicate a disabled state is by graying the button out. However, this approach also surprises users because the button’s enabled state has little resemblance to the disabled one.

A button that turns from gray to fully colored is an unexpected change that makes users wonder what just happened. For a smooth and seamless experience, it’s best to avoid this. Instead of graying out your disabled buttons, you should decrease the opacity to make it transparent.

When the disabled button is transparent, users can see some semblance of the button in its enabled state. Although the button is faded out, some color still bleeds through for users to recognize. As the disabled button transitions to its enabled state, the new appearance won’t catch users off-guard.

A transparent button blends into the background more, while a gray one remains in the foreground (unless the background is gray). Foreground elements are more noticeable to users. They tend to view them as interactive, which means they’re more likely to interact with a grayed out disabled button.

Users are less likely to confuse a transparent button with other buttons. A gray button doesn’t always mean it’s disabled. Sometimes gray is used to communicate a low priority button in a group (e.g., cancel buttons). Users can easily mistake a grayed out disabled button for a secondary call to action. Or, worst-case scenario, they can mistake it for a poorly designed button with low color contrast.

When designing disabled buttons, adjust the opacity, not the color. The optimal opacity values will vary based on your background color. But a rule of thumb is to aim for an opacity level of 40% or below. It’s important to make the opacity level low enough, or some users may still view the button as enabled.

By following this technique, you’ll make your disabled buttons look disabled without giving users any surprises. Instead, the only surprise they’ll get is how smooth and seamless your interface is.

Why You Shouldn?t Use Solid or Underlined Text Fields