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

Susanna Zaraysky

New Material Text Field

New Material Text Field

Designed by David Allin Reese

This article was co-written with Michael Gilbert, Senior User Experience Researcher on the Material Design team.

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 with normal with hint text, hover, press, focus, normal with input text, error, and disabled states

Text fields with normal with hint text, hover, press, focus, normal with input text, error, and disabled states

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.

Multi-line input text with unclear line affordance

Multi-line input text with unclear line affordance

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.


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

sample filled and empty text fields

sample filled and empty text fields

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.

Text fields label in the below, embedded and above locations

Text fields label in the below, embedded and above locations

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

Text field with rounded corner, label inside, box, lines and strokes and semi-transparent fill

Text field with rounded corner, label inside, box, lines and strokes and semi-transparent fill

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


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.


Andrian Valeanu is a web designer and project creator at Designmodo.

10 Useful Steps to Get Started with Material Design for Bootstrap

Material Design for Bootstrap (MDB) is an overlay built for Bootstrap that provides results that are consistent with the standards set by Google’s Material Design. It’s also known as Material Design Bootstrap and can be described as a theme that provides access to Google’s Material Design so as to achieve consistent results.

MDB uses HTML, JavaScript, and CSS to provide developers and designers with unique design patterns, Bootstrap templates, and a grid system they can use. With so many free and paid features, MDB is one of the most popular options for web development and design.

Below is a step-by-step guide that will get you started with Material Design for Bootstrap.

  1. Download the zipped folder

    The first step is to visit the official Material Design for Bootstrap website and download the overlay. There are two versions of MDB available: the free and the pro version. Pick your preferred choice and click the “Direct Download” link to get the zipped folder. Unzip the folder and save it to your preferred location. The folder now contains essential documents, files, and libraries. We will go through each of these in the next steps.

  2. CSS

    The CSS document determines the lookup and style of what developers and web designers choose to build. Files contained in this document include bootstrap.css which contains predefined Bootstrap classes, bootstrap.min.css – a smaller version of bootstrap.css, mdb.css which contains design patterns and predefined classes of MDB, mdb.min.css – the minified version of mdb.css, and style.css which helps with customized styling code as per the project.

  3. js

    The js document contains JavaScript files that help with achieving functionality for various components. You can use it to cut your code short. Files within the js document include bootstrap.js which introduces bootstrap related js into your project, bootstrap.mi.js which is the minified bootstrap.js version, jquery-2.3.3.js which introduces the jquery code that’s compatible to your code, its minified version jquery-2.3.3.min.js, mdb.js which combines all the jquery code and javascript you’ll need, its minified version mdb.min.js, tether.js which allows you to position elements next to each other on a page, and its minified version tether.min.js.

  4. font

    As the name suggests, the font document contains all the fonts that web designers and developers need for their projects. A default font called Roboto is provided with your download. Other basic formats included within the file are .ttf(True Type Font) which is developed by Microsoft and Apple, .otf(Open Type Font) which was built jointly by Microsoft and Adobe, .woff(Web Open Font Format) which resulted from a collaboration by Microsoft, Opera Software, and Mozilla Foundation, .woff2 – a second version of .woff, and .eot(Embedded Open Type) which was built by Microsoft for the web.

  5. img

    The img folder provides a place where developers and web designers can keep the images that they need for their project. They are kept in a well-arranged manner for easy location. The path to this folder that you see in your index file shows the images that you want to appear on the pages you’ve built. The img file is the default folder but, can be changed according to the type of project.

  6. sass

    The sass file contains maintainable and modular versions of CSS that are adaptive and can be shared easily. It improves output by enhancing productivity. Components can be shared in all environments. Web developers can opt for sass if they wish to add more style to their work and carry it out in an advanced manner.

  7. License.pdf

    The License.pdf file contains all the details pertaining to licensing of Material Design for Bootstrap and its usage. The information contained within the document shows all features that users get under the free and pro versions of MDB. The free MDB version comes with 500 basic components; detailed documentation; SASS, CSS, JS, and HTML files; tutorials, 8 basic modules, enhanced Bootstrap modals, and BrandFlow-Bootstrap automation software. The Pro version includes all these plus 5,000 pro components, 9 pro plugins, 50 premium sections, 22 pro modules, JavaScript modularity, 10 pro page templates, professional premium support, and MDB Pro repository as well as GitLab account access.

  8. README.txt

    The README.txt file contains all the important links that may be helpful to developers and web designers. They cover support, templates, FAQs, tutorials, and many more links that may be of importance. Users get access to information that can help them learn, practice, ask questions, and access relevant material from the MDB community.

  9. Start working using MDB

    Once you familiarize yourself with all the folders and files, it’s time to use them in your project. You can start by making a new folder on your workstation. Give it a name like DemoMDB. Cut all the files from the original MDB folder and paste them inside the new folder. The index.html file provides a demo page that you can start with. The most important thing is to maintain the order in which the files are provided. A file that is placed higher means that it has components needed by the files below it. If this order is changed, the console in use may show errors and warnings that might block major functionalities.

  10. Stay updated

    Material Design for Bootstrap comes with a host of features that make it easy for developers to build interactive web pages. To learn more, consider visiting the official MDB website for examples and tutorials. Subscribe to the MDB newsletter to stay updated with the latest updates and news. You can also create a free account that will give you access to technical support, CLI, free project hosting, and prototyping tools.

Material Design for Bootstrap is used by some of the largest organizations and companies to develop and design the best outlays for front-end frameworks. The information provided above is only but a drop in the ocean when it comes to what MDB contains. Developers who are passionate about design are encouraged to explore more as they work on their projects.

Enjoy this post? Give Andrian a like if it’s helpful.


Andrian Valeanu is a web designer and project creator at Designmodo.

Andrian Valeanu is an enthusiast web designer and project creator at Designmodo, who literally live for creating the best tools for web designers and developers. He is focused on websites building systems, bootstrap templates, an…

Discover and read more posts from Andrian

Enjoy this post?

Leave a like and comment for Andrian