Until material design, form fields always have a border all around. For me, it's a cultural habit. Users use these borders to identify the field in the page. Google itself, on Gmail, Google Search... Always have border around fields.
However, in the material design fields, there is only one border, at the bottom of the field.
What benefit does removing borders - except the bottom one - have?
What publicly available tests show that is no (bad) impact on users?
There are less lines for the eye to visually process when using border only on the bottom of the input field. This leads to decreased clutter and faster visual processing of the page.
According to (Alvarez, and Cavanagh, 2004) the higher number of information in an object corresponds to more workload required to process the information.
Moreover, the current experiment shows an inverse relation between the information load per object and the number of objects that can be stored (in working memory).
Therefore, the more shapes/lines are presented on a screen the more time will be needed for low level visual processing.
In my opinion, this is the primary reason material design proposes input fields with one bottom line only. It's a brave move from them because they are violating the consistency heuristic.
I am new to Material design and had the same question. Since most of these answers appear a bit subjective, I'd like to offer an answer based upon my newness to the field underscore paradigm that Material design adopts.
Where I struggle with this is that it violates expected norms for forms, the consistency heuristic, mentioned by Kristiyan. I've been working through a tutorial on using Material with Angular, and came up with the following page. My first response when viewing the result was "Where is the search field?". I thought the field border was a horizontal rule and did not recognize the place holder was where I needed to click.
Thus, at least while Material design is new, the cognitive load is greater for me because I have to think about where to click. Countering that would require modifying the placeholder to "Click here to search for a picture" or something. And while that works as a placeholder, it is awkward as a label.
My answer then, is that having only a bottom border is currently detrimental to user experience. Thus when using Material design, we still need to determine a way to guide user input in the absence of a full border around fields. This could be done with color or shading, where the fields are lighter or darker than the page, or where a drop shadow accentuates the field dimensions.
Q. What benefit does removing borders - except the bottom one - have?
No benefit for the User. Arguably a dis-benefit by creating micro-seconds of doubt, hesitation and micro-stress - versus the near certainty of a fully enclosed box which is consistent with many if not most forms - paper and on-line.
The idea that the brain cannot process 3 extra lines is nonsense. Humans process way more detail every moment of their lives.
Presumably the "benefit" is in getting closer to some designers' "minimalist aesthetic". Have these designers never tried navigating a snow-covered (near uniform) landscape ?
"What publicly available tests show that is no (bad) impact on users?" I await the minimalist's answers with interest.
My guess is that the UI is cleaner (has less elements) while it is still understood by the average web user.
These are some thoughts about text fields. I have always seen both cases in paper forms, border around or only bottom border. My impression is that in web the border surrounding the whole element helped the user understand where can he interact. So possibly this has been common practice and convention. Placeholders, which can't be used in paper, are helpful on web and understood/accepted today.
In Material design, when there is no text in the field there is only a Placeholder that acts as the Label. Once focused the Placeholder becomes the Label. My guess is that this kind of interaction helps the user understand how can he enter information without the need to use border all around+label+placeholder, all in a simpler UI. But a less experienced web user will possibly find some difficulty at first understanding that the placeholder is where he is supposed to tap to enter the text.
Material's documentation clearly distinguishes between each type of field and its use case:
https://m2.material.io/components/text-fields#filled-text-field
Filled text field Usage
Filled text fields have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components.
https://m2.material.io/components/text-fields#outlined-text-field
Outlined text field Usage
Outlined text fields have less visual emphasis than filled text fields. When they appear in places like forms, where many text fields are placed together, their reduced emphasis helps simplify the layout.
