The Evolution of Material Design’s Text Fields

• evolution, Material

5 min. (912 words)

the-evolution-of-material-design’s-text-fields

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.

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

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

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.

114 comments

  1. Yesterday, while I was at work, my cousin stole
    my iphone and tested to see if it can survive a twenty five foot drop, just so she can be
    a youtube sensation. My iPad is now broken and she has 83 views.

    I know this is totally off topic but I had to share it with someone!

  2. Hi there! This post couldn’t be written any better!
    Looking through this article reminds me of my previous roommate!
    He constantly kept preaching about this. I am going to forward this post to him.
    Pretty sure he will have a good read. Thanks for sharing!

    Take a look at my web site Sion Air Cooler Reviews

  4. Nice post. I used to be checking continuously this blog and I’m impressed!
    Very helpful info particularly the ultimate phase :
    ) I care for such information a lot. I used to be
    seeking this certain info for a very lengthy time.

    Thanks and good luck.

    Here is my homepage … Glacier Portable AC

  5. I do not even know the way I finished up here, however I assumed this put up was
    once good. I do not recognize who you might be however
    certainly you are going to a famous blogger
    in the event you aren’t already 😉 Cheers!

    Feel free to surf to my web blog … Testo Bull Capsules

  6. I was wondering if you ever considered changing the page layout of your website?

    Its very well written; I love what youve got to say. But
    maybe you could a little more in the way of content so people could
    connect with it better. Youve got an awful lot of text for only having one or
    two images. Maybe you could space it out better?

    Also visit my web site – Keto LeanX Pills

  9. Right here is the right blog for anyone who really wants to find out about this topic.
    You understand a whole lot its almost tough to argue with you (not that I really would want to?HaHa).
    You definitely put a brand new spin on a topic that’s been discussed for ages.

    Great stuff, just great!

    Also visit my blog post :: Forti Prime

  14. Pretty great post. I simply stumbled upon your weblog and wanted to mention that
    I have truly enjoyed surfing around your blog posts.
    After all I will be subscribing to your rss feed and I’m hoping you
    write once more soon!

  21. Good website! I really love how it is simple on my eyes and
    the data are well written. I am wondering how I could be notified when a new post has been made.

    I have subscribed to your feed which must do the trick! Have a nice day!

    my homepage IQ SuperCharged

  22. Woah! I’m really loving the template/theme of this blog.
    It’s simple, yet effective. A lot of times it’s very difficult
    to get that “perfect balance” between user friendliness and visual appeal.
    I must say you have done a excellent job with this. In addition, the blog loads very
    fast for me on Firefox. Superb Blog!

  24. Link exchange is nothing else however it is
    simply placing the other person’s website link on your page at proper place and other person will also do similar for you.

  25. Hey there, You have performed a fantastic job. I’ll
    definitely digg it and in my view suggest to my friends. I’m confident
    they’ll be benefited from this website.

    My website :: Blosum CBD

  29. I’m truly enjoying the design and layout of your website.
    It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you
    hire out a developer to create your theme? Fantastic work!

    Feel free to visit my homepage Keto Fat Burner

  32. Can I simply say what a comfort to discover
    somebody who actually understands what they are discussing online.
    You certainly know how to bring an issue to light and make it important.
    More and more people really need to read this and understand this side of your story.
    I was surprised that you aren’t more popular given that you definitely
    have the gift.

    Here is my blog post http://www.wizardhardware.com

  33. Undeniably consider that that you stated. Your favorite justification seemed to be on the net the simplest factor to take into account of.

    I say to you, I definitely get annoyed even as people think about worries that they just don’t recognize about.
    You controlled to hit the nail upon the top as neatly as outlined out the entire thing without having side-effects , other people could take a signal.

    Will likely be again to get more. Thank you!

    Here is my site; Syner Sooth CBD Review

  39. I am really impressed along with your writing talents as well
    as with the format on your blog. Is that this a paid
    theme or did you modify it yourself? Either way stay up the excellent quality writing, it is
    rare to see a great blog like this one these days.

    Have a look at my blog … Syner Sooth CBD

  40. I have been surfing online greater than three hours nowadays,
    yet I never discovered any fascinating article like yours.
    It is beautiful value enough for me. Personally, if all website
    owners and bloggers made excellent content material as you probably
    did, the net shall be much more helpful than ever before.

    my page – Oracle Leaf CBD Reviews

  42. You actually make it seem so easy with your presentation but
    I find this topic to be really something which I think I would never understand.
    It seems too complex and very broad for me. I am looking
    forward for your next post, I will try to get the hang of it!

    My web page … Keto Fat Burner

  49. I like the valuable info you supply on your articles. I will
    bookmark your weblog and take a look at again right
    here frequently. I’m relatively certain I will be informed many new stuff proper here!

    Best of luck for the next!

    Feel free to visit my web blog … Keto Lean X Reviews

  50. I was curious if you ever thought of changing the page layout of your website?

    Its very well written; I love what youve got to
    say. But maybe you could a little more in the way of content so people could connect with it better.
    Youve got an awful lot of text for only having one or 2 images.
    Maybe you could space it out better?

    my web blog Hydra Riche Skin Serum

  51. Howdy! This is my 1st comment here so I just wanted
    to give a quick shout out and say I truly enjoy reading your articles.
    Can you recommend any other blogs/websites/forums that go over the same subjects?

    Thanks a ton!

    My webpage: Hempizor CBD

  61. To follow up on the update of this matter on your web site and
    would really want to let you know just how much I loved the
    time you took to put together this beneficial post. Inside the post,
    you spoke on how to actually handle this problem with all comfort.
    It would be my own pleasure to get some more strategies from your
    web site and come as much as offer others what I have benefited from you.
    Many thanks for your usual fantastic effort.

    Stop by my blog post – Apple Cider Vinegar Keto Diet

  77. Hey would you mind sharing which blog platform you’re
    working with? I’m looking to start my own blog soon but I’m having a hard time selecting between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your layout seems different then most blogs and I’m looking for something unique.
    P.S My apologies for getting off-topic but I had to ask!

    Here is my webpage; Biodermeux

  80. I have to convey my admiration for your kindness in support of individuals who need help
    with in this area of interest. Your personal commitment to getting the message along has been exceedingly useful and has regularly made
    associates much like me to get to their goals. Your amazing
    helpful instruction means a whole lot to me and further more to my office workers.

    Many thanks; from all of us.

    Visit my blog post; http://www.1stanapa.ru/modules.php?name=Your_Account&op=userinfo&username=CalabresePolly

  85. Hey! I could have sworn I’ve been to this blog before but after checking through
    some of the post I realized it’s new to me. Anyhow, I’m definitely glad I found it and
    I’ll be bookmarking and checking back frequently!

    Also visit my web site – Synaptic IQ Reviews

  87. Write more, thats all I have to say. Literally, it seems as
    though you relied on the video to make your point.
    You obviously know what youre talking about, why waste your
    intelligence on just posting videos to your weblog when you could be giving us something informative
    to read?

  90. The other day, while I was at work, my sister stole my iphone and tested to
    see if it can survive a twenty five foot drop, just
    so she can be a youtube sensation. My iPad is now destroyed and she has
    83 views. I know this is entirely off topic but I had
    to share it with someone!

    Also visit my blog post Infinity CBD Gummies

  91. Pretty nice post. I simply stumbled upon your weblog and wanted to say that I have really enjoyed surfing around your blog posts.
    In any case I’ll be subscribing in your feed and I’m hoping you write once more soon!

    my webpage :: Testo Bull Review

  92. Hello would you mind stating which blog platform you’re using?

    I’m looking to start my own blog soon but I’m having a hard time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design and style seems different then most blogs and I’m looking for
    something unique. P.S Sorry for getting off-topic but I had to ask!

    Here is my web site; True Keto 1800

  93. Heya! I know this is sort of off-topic but I needed
    to ask. Does managing a well-established website like
    yours take a large amount of work? I am brand new to running
    a blog but I do write in my journal everyday. I’d like to start a blog so I
    can easily share my personal experience and thoughts
    online. Please let me know if you have any kind of
    suggestions or tips for new aspiring blog owners. Appreciate it!

    Review my webpage – Vigalix

  98. Hey! I know this is kind of off topic but I was wondering which blog platform are you using for this website?
    I’m getting sick and tired of WordPress because I’ve had problems with hackers and
    I’m looking at alternatives for another platform. I would be great if you could point me in the direction of a good
    platform.

    my web site … Sparkling CBD

  100. I just wanted to thank you once again for the amazing site you have developed here.
    Its full of ideas for those who are genuinely interested in that subject, especially this very post.
    You’re really all so sweet along with thoughtful
    of others in addition to the fact that reading the blog posts is a wonderful delight in my opinion. And exactly what a generous surprise!
    Jeff and I usually have fun making use of your suggestions in what we need to
    do next week. Our listing is a distance long so your tips
    is going to be put to good use.

    Also visit my web blog – http://www.anapapansion.ru/modules.php?name=Your_Account&op=userinfo&username=MaderaHerbert

  103. Hey, I think your site might be having browser compatibility issues.
    When I look at your blog in Chrome, it looks fine but when opening in Internet
    Explorer, it has some overlapping. I just wanted
    to give you a quick heads up! Other then that, terrific blog!

    Feel free to surf to my web site; Clean Cut Keto Pills

  105. May I simply just say what a relief to find a person that really understands what they are discussing on the internet.
    You certainly realize how to bring a problem to light and make it important.
    A lot more people should look at this and understand this
    side of the story. I can’t believe you aren’t more popular given that
    you certainly possess the gift.

    Feel free to visit my web site: Semzia Keto Reviews

  114. With havin so much content and articles do you ever run into any issues of plagorism or copyright violation? My
    site has a lot of completely unique content I’ve either authored myself or
    outsourced but it appears a lot of it is popping it up
    all over the internet without my agreement.

    Do you know any methods to help stop content from being stolen? I’d genuinely
    appreciate it.

    Also visit my blog – whole foods

Leave a Reply

Your email address will not be published.