Material Design is continually evolving. The style of the Material text fields changed in 2017 for the following reasons:<ul><li>Users didn't know that they could interact and click on the text field (the most common way users enter and edit text in forms and dialogues).</li><li>The line under the old text fields was confused with a divider.</li><li>The label and input were confused with body text.</li></ul>

How data improved Google’s text fields

Two studies were conducted to improve the usability of text fields and to find out which text field variable to change. <ul><li>The first study aimed to get a sense of the design styles that worked best instead of finding a single best individual text field.</li><li>The second study aimed to determine what the new Material text field should look like, such as the "box style", label location, contrast, and border styles.</li></ul>

Improving the text field

The results of the two studies showed that these elements of text fields were of most value:&nbsp;<ul><li>Enclosed text fields with a rectangular shape performed better than those with a line affordance.&nbsp;</li><li>The text field box should be represented with a semi-transparent fill and a bottom line. Or it should be a fully transparent fill and an opaque stroke.&nbsp;</li><li>The Colour contrast of the text field’s lines or strokes met the minimum 3:1 contrast ratios with the background.&nbsp;</li><li>Label text should be placed within the bounds of the text field box.&nbsp;</li><li>Text fields should have rounded corners.&nbsp;</li></ul>

Main findings

<figure><img alt="New Material Text Field" src="https://miro.medium.com/max/500/0*KvBjxdkU_J5" width="680" height="382"><figcaption dir="auto">Designed by David Allin Reese</figcaption></figure>This article was co-written with <a rel="noopener follow" href="https://medium.com/@mdgilbert" dir="ltr">Michael Gilbert</a>, Senior User Experience Researcher on the Material Design team. <a rel="noopener follow" href="https://medium.com/@dave.chiu" dir="ltr">Dave Chiu </a>, Staff Interaction Designer, and <a href="https://www.linkedin.com/in/sameerkbansal/" rel="noopener" dir="ltr">Sameer Bansal</a>, 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 <a rel="noopener follow" href="https://medium.com/@dave.chiu/thats-true-we-made-changes-to-improve-the-scannability-and-discoverability-of-text-fields-cdb05687e530" dir="ltr">inquiry</a> about why the style of Material <a href="https://material.io/components/text-fields/" rel="noopener" dir="ltr">text fields</a> 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.<figure><img alt="Text fields with normal with hint text, hover, press, focus, normal with input text, error, and disabled states" src="https://miro.medium.com/max/500/0*6K4165R6DPBK9v2d" width="680" height="488"><figcaption dir="auto">Text fields before the 2017 redesign</figcaption></figure><h2 data-selectable-paragraph="">Why did the text fields need a makeover?</h2>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.<figure><img alt="Multi-line input text with unclear line affordance" src="https://miro.medium.com/max/500/0*mphh7FJKCBQgr-Kw" width="344" height="209"><figcaption dir="auto">Unclear line affordance in old text fields</figcaption></figure>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.<h2 data-selectable-paragraph="">Research</h2>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).<figure><img alt="sample filled and empty text fields" src="https://miro.medium.com/max/500/0*yTxoZXR5wDzrAj5D" width="680" height="311"><figcaption dir="auto">Participants were asked to find a specific text field, such as “Item L.” They also clicked on both filled and empty text fields.</figcaption></figure>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.<figure><img alt="Text fields label in the below, embedded and above locations" src="https://miro.medium.com/max/500/0*DixVp4JH_tnQghAb" width="680" height="211"><figcaption dir="auto">Example illustration for the “Label Location” text field characteristic</figcaption></figure>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:<OL><LI>Identifiability: The number of correct versus incorrect clicks</LI><LI>Find-ability / scan-ability: The time it took a participant to find and click on a requested element</LI><LI>Preference: Participants rank-ordered each text field variation</LI></OL>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.<h2 data-selectable-paragraph="">Main findings</h2><figure><img alt="Text field with rounded corner, label inside, box, lines and strokes and semi-transparent fill" src="https://miro.medium.com/max/500/0*fZKHNqg-yL1H1NgD" width="680" height="383"><figcaption dir="auto">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</figcaption></figure>The results of the two studies showed that these elements of text fields were of most value:<UL><LI>Enclosed text fields with a rectangular (box) shape performed better than those with a line affordance</LI><LI>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.</LI><LI>Color contrast of the text field’s lines or strokes met the minimum 3:1 contrast ratios with the background</LI><LI>Label text should be placed within the bounds of the text field box</LI><LI>Text fields should have rounded corners</LI></UL>Conclusions:<figure><img alt="" src="https://miro.medium.com/max/500/1*aKHr0kbu4IKyMywRnqrkLw.gif" width="295" height="150"><figcaption dir="auto">Text field before the makeover</figcaption></figure><figure><img alt="" src="https://miro.medium.com/max/500/0*uMBjIQ9C_7H17yqn" width="613" height="317"><figcaption dir="auto">Text field after makeover</figcaption></figure>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.

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…

product

Product & Design

This article was co-written with <a href="https://medium.com/@mdgilbert">Michael Gilbert </a>, Senior User Experience Researcher on the Material Design team. <a href="https://medium.com/@dave.chiu">Dave Chiu </a>, Staff Interaction Designer, and <a href="https://www.linkedin.com/in/sameerkbansal/">Sameer Bansal </a>, 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 <a href="https://medium.com/@dave.chiu/thats-true-we-made-changes-to-improve-the-scannability-and-discoverability-of-text-fields-cdb05687e530">inquiry </a>about why the style of Material <a href="https://material.io/components/text-fields/">text fields </a>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.

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.

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.

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).

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.

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:

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

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.

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

<ul><li>Enclosed text fields with a rectangular (box) shape performed better than those with a line affordance </li><li>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. </li><li>Color contrast of the text field’s lines or strokes met the minimum 3:1 contrast ratios with the background </li><li>Label text should be placed within the bounds of the text field box </li><li>Text fields should have rounded corners </li> </ul>

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.

The Evolution of Material Design’s Text Fields

How data improved Google’s text fields

Improving the text field

Main findings

CURATED BY

Related collections

More like this