The Evolution of Material Design’s Text Fields

How user research reshaped the design of Google’s open-source text fields

Designed by David Allin Reese

This article was co-written with Michael Gilbert, Senior User Experience Researcher on the Material Design team. Dave Chiu , Staff Interaction Designer, and Sameer Bansal, User Experience Designer, collaborated with Michael on redesigning the text fields.

You might not always notice, but Material Design is constantly evolving and iterating based on research. We recently received an inquiry about why the style of Material text fields changed in 2017, and we’re taking this opportunity to share a behind-the-scenes glimpse into our research process. Here’s the story of how data improved Google’s text fields.

Text fields before the 2017 redesign

Why did the text fields need a makeover?

A text field is one of the most common ways for users to enter and edit text in forms and dialogs. However, some users didn’t know that they could interact with and click on the text field. It looked like an empty box. The line affordance under the old text fields was not clear to some users. The line was confused with a divider. The label and input were confused with body text, especially in dense compositions.

Unclear line affordance in old text fields

Material Design’s goal was to determine how to improve the text field to make it more distinguishable, easier to read, and more understandable — with a more clear touch target. We wanted users to be able to fill out a form correctly and quickly.

Research

To improve the usability of text fields and to determine which text field variables to alter, our researchers and designers conducted two studies between November 2016 and February 2017, with actual users.

Study One had three tests, plus a preference ranking. There were 158 participants (+ 45 pilot participants).

Participants were asked to find a specific text field, such as “Item L.” They also clicked on both filled and empty text fields.

The goal of this first study was straightforward — we wanted to compare the design of the original text field with three distinct alternatives. In presenting users with this range of options, having them click through simple, complex, and even realistic task-based forms, we were aiming to get a sense of the styles of design that worked best, rather than aiming to find any single best individual text field.

For each of the possible text fields, and for each form type that we had designed, the team timed how long it took participants to find and click the proper text field. To make sure that participants couldn’t learn and predict where text field alternatives might show up during the test, we randomized the order in which we presented those text fields.

At the end of Study One, participants ranked the possible four text field alternatives in order of their visual preference.

Study Two had two tests, plus a preference ranking.There were 400 participants.

Where Study One aimed to determine a broad direction for design to focus, Study Two was intended to zero in on what, exactly, the new Material text field should look like. For this study, instead of looking at 4 individual text field prototypes, we built a custom tool that would allow us to test the individual characteristics of text field design. For instance, with this tool we were able to vary between text field “box style”, label location, contrast, and border styles. In all, we looked at 7 text field characteristics, with over 140 possible text fields that could result from combinations of those characteristics.

Example illustration for the “Label Location” text field characteristic

After the timed tests, participants ranked their preferred text field style. The participants answered 20 questions.

To determine which text field variations were preferred and the most effective, the researcher and designer team found ways to map user behavior to these three factors:

1. Identifiability: The number of correct versus incorrect clicks
2. Find-ability / scan-ability: The time it took a participant to find and click on a requested element
3. Preference: Participants rank-ordered each text field variation

There wasn’t a maximum time for any of the tasks, participants could ask for help over email if possible (but none did). The team collected data about what participants clicked on via heatmaps.

Main findings

The new text field has: a text field box, semi-transparent fill, proper color contrast, rounded corners, and a label inside. Designed by David Allin Reese

The results of the two studies showed that these elements of text fields were of most value:

• Enclosed text fields with a rectangular (box) shape performed better than those with a line affordance
• The text field box should be represented with a semi-transparent fill and a bottom line or with a fully transparent fill and an opaque stroke.
• Color contrast of the text field’s lines or strokes met the minimum 3:1 contrast ratios with the background
• Label text should be placed within the bounds of the text field box
• Text fields should have rounded corners

Conclusions:

Text field before the makeover

Text field after makeover

And there you have it. Redesigning the text fields involved around 600 participants, two designers, and one researcher. Today, these new text fields appear across Google products from account sign-in pages to Google forms. Given the approach described above, we were able to do more than simply tackle usability issues of the previous text fields one by one. We were able to test an entire range of possible text fields, to identify the specific design characteristics that performed well or performed poorly, and to provide our designers not just with a single best text field, but a set of options — each of which we could show to be more beautiful, and more usable than the original.