Material Design text fields are badly designed

I’ve been designing forms for over 20 years now, and I’ve tested many of them for large organisations like Boots, Just Eat and GOV.UK.

One topic that comes up a lot with forms is: where to put the label. In the early days, we talked about left aligned labels versus top aligned labels.

These days the focus is more about placeholders that replace labels and float labels. The latter start off inside the input. When the user starts typing, the label ‘floats’ up to make space for the answer.

Material Design text fields use the float label pattern

Some people assume float labels are best because Google’s Material Design uses them - you know, because “it’s Google”. But in this case, Google is wrong.

Instead I recommend using conventional text fields which have:

  • the label outside the input (to tell the user what to type)
  • a distinct border all the way around (to make it obvious where the answer goes)
A conventional text field

Here, I’ll explain why I recommend conventional text fields and why Google is wrong about using float labels for Material Design.

Float labels are better than a common alternative but they’re still problematic

Float labels were designed to address some problems with a commonly used alternative: placeholder labels.

This is where the label is placed inside the input but disappears when the user starts typing.

Placeholder label text field

Having seen lots of people interacting with forms through my work first hand I know that placeholder labels are problematic.

This is because, for example, they:

Float labels don’t solve 2 of these problems: poor contrast and the chance of the label being mistaken for an actual answer.

And while they attempt to address the problem of the label disappearing, in doing so, float labels introduce a range of other problems.

For example, the size of the label has to be tiny in order to fit inside the box, which can make it hard to read. And long labels cannot be used as they’ll get cut off by the input.

Long labels get cut off with Material Design’s float labels

Conventional text fields are better than both placeholder labels and float labels

Conventional text fields don’t have the above problems because it’s clear where the answer goes and they have a legible, readily available label.

The labels can be of any length and hint text, should it be needed, is easy to accommodate as well.

Conventional text fields can accommodate long labels

I’ve watched hundreds of people interact with forms and seen many of them struggle. But not once was that down to the use of a conventional text field.

They take up a bit more vertical space. But saving space at the cost of clarity, ease of use and accessibility is a bad tradeoff to make.

Google’s test didn’t include conventional text fields

Google’s article, The Evolution of Material Design’s Text Fields shows that only 2 variants were tested, both of which used float labels.

The 2 variants of text fields that Google tested: float labels with underlines and a white transparent background (left) and float labels with grey backgrounds (right).

Crucially the test didn’t include conventional text fields which means they haven’t actually compared the usability of their float label design against conventional text fields.

And having read Google’s responses to the comments on their article, it seems usability was not their top priority.

Google inadvertently prioritised aesthetics over usability

I looked into why Material Design uses float labels, and discovered comments from Michael Gilbert, a designer who worked on them.

The comments indicate that they tried to balance aesthetics and usability.

Matt Ericsson commented:

This seems to imply that there was more of an emphasis on form over function […] or even a desire to simply differentiate Material components from tried and true (boring) input boxes. […] was there research conducted on the original inputs that validated that they met a goal that was not being met by box inputs? Is there something that stood out as valuable going with a simple underline?

Matt Ericsson

Google’s response:

The design decisions behind the original text field predate my time on the team, but I think the goal was likely similar [to this research]: Balance usability with style. I believe at the time we were leaning towards minimalism, emphasizing color and animation to highlight usability.

Matt Gilbert

Denis Lesak commented:

[…] this is one of those moments were I wonder why all of this research was necessary as I have long thought that the old design was flawed for all the reasons you mentioned.

Denis Lesak

Google’s response:

[…] the goal of the research here wasn’t to simply determine that one version was better than another […]. This study was instead focused on identifying the characteristics of design that led to the most usable, most beautiful experiences.

Matt Gilbert

Even though Google aimed for balance, in the end they inadvertently sacrificed usability for ‘minimalism’ and ‘a beautiful experience’.

But aesthetics and usability are not in competition with each other. Interfaces can look good without causing problems for users. In fact, these qualities go hand in hand.

An example form using conventional text fields that look good and function well too.

In conclusion

Float labels are certainly less problematic than placeholder labels.

But conventional text fields are better than float labels because they look like form fields and the label is easy to read and available at all times.

Aesthetics are important. But putting the label inside the box does not make it look beautiful. What it does do, however, is make it demonstrably harder to use.

Thanks to Caroline Jarrett and Amy Hupe for helping me write this. And thanks to Maximilian Franzke, Olivier Van Biervliet, Dan Vidrasan, Fabien Marry for their feedback on an earlier draft of this article.