Why is the text box of Google material design not used?

Material Design That unique underlined text box , Everyone must be impressed .

2017 Years ago, it looked like this ：

Indeed, many products have learned from this horizontal line , Especially the login page ：

But the dynamic effect of the real Title , But few of them really use , Even if the Google I use less .

for example , This is a Gmail Screenshot of ：

Material Design Research on text box

Later, the design team may also feel that there is a problem , from 2016.11 To 2017.02 I did a three-month study , During this period, a total of 158 and 400 Two experiments of human .

P.S. This time arrangement is envious of my real name ……

Finally, I got some findings ：

• Closed text box   Easier to understand than underlining .
• This text box is either   Translucent fill and underline  , Or   Fully transparent with a border  .
• Underline and border   Color contrast  , At least compared with the background 3:1.
• title   It should be placed inside the boundary of the text box .
• The text box should have   Round corners  .

therefore ,Material Design The text box in becomes this ：

However , The problem is that we still rarely see strict compliance Material Design Products with text box design specifications .

Even if it is Google own , It also seems that each product department has its own specifications .

Why is everyone right Material Design I don't care about the research results ？

Think carefully , The team I worked for may use Matreial Design This set of text boxes ？

Obviously not , because ：

1. High development cost

browser 、 operating system …… Many platforms have default styles .

Just a line of code , A text box comes out , Basically, you can fill in a box ：

Chrome Browser default text box

If you want to add the title to the left and top of the text box , It's easy to say .

But make it Material Design That kind of dynamic , It's too much trouble .

Although the cost of developing a set of components may not be so high , But the key is that so many old pages have to be changed before .

2. Experience value is not high enough

Generally speaking , A major revision of any product , No matter how well you do, you will be scolded , Unless the previous edition was really bad .

Because human nature is so conservative , Otherwise, why do so many people hate Baidu but still can't quit ？

Most users have long been used to traditional text boxes , Suddenly change a new style , Definitely not used to .

It was not easy for the company to develop and replace new components , And be scolded by users , How to explain to leaders ？

3. The new standard is not necessarily better than the traditional

although Google The design team vowed to spend 3 Months of research , Theoretically, it should be no problem .

however , According to their published articles , It seems that traditional text boxes are not tested at all ！

Maybe , It is also possible that they tested traditional text boxes , But because I hope to make Material Design The component style of is more distinctive , Finally, choose the current style .

If you really test the traditional text box , But do not release information …… It is only possible that the new text box is no better than the traditional text box .

N/N Group Text box research

Nielsen's user experience consulting company , As early as 2014 I have done research on text boxes since .

And in 2018 The year of Material Design Updated this article .

What they recommend most , This is the very common text box style , In particular, which of the following explanatory words is the safest not to disappear （ conservative ）.

In particular, it focuses on , Placeholders are not encouraged to replace titles , Unless it's search 、 Login and other very simple scenarios ：

There are reasons 7 spot ：

1. Missing placeholder text will make users' short-term memory nervous .
2. No label , Users cannot check their work before submitting the form .
3. When an error message appears , People don't know how to solve problems .
4. Placeholder text that disappears when the cursor is placed in the form field is annoying for users using keyboard navigation .
5. It is easy for users to ignore the text box of filled fields （ Eye tracking found ）.
6. Users may mistake placeholders for automatically populated data .
7. Sometimes users have to delete placeholder text manually .

and Material Design Text box , Just violated N/N Group The taboo of , Use placeholders as titles .

Although this placeholder will not disappear , Just move the position after getting the focus .

N/N Group When updating the article, it means ,Material Desgin This text box still cannot solve the problem of 5、6 Two questions , So I'm not optimistic .

Material Design It's really trying to balance aesthetics and practicality , But the technology cost is ignored .

N/N Group Our research is more grounded , But it can't be like Google That kind of packaging and publicity has won a large number of fans' support .

But anyway , I think Material Design Text box , I think it is difficult to popularize in recent years .