5

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?

  • 1
    I'm not sure there is a definitive answer to this. MD is being pushed by Google, iOS strictly remains flat, whether one is better than the other is simply too broad a question to answer. – DarrylGodden Jan 9 '17 at 12:20
  • 1
    It's not my question : Does removing borders on form fields, except the bottom one, have any benefit ? – jeremieca Jan 9 '17 at 12:24
  • Yes, but any perceived benefit is subjective. – DarrylGodden Jan 9 '17 at 12:45
  • You can answer this question yourself with some paper and some users for a simple preference test, or A/B testing an actual form to see if it impacts form completion. – Sullivan Jan 9 '17 at 14:36
  • You are right Sullivan. Also, I suppose other people already test it and I would like to discover their conclusion. Moreover, I'm not an ux, just a developper. And I have no time, at the moment, to test that correctly. I think that the result can be very different between debutant or experimented user. – jeremieca Jan 9 '17 at 15:02
5

Decreased clutter

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.

  • 2
    Does a full box (one object) require more processing than a single line (also one object)? – Sullivan Jan 9 '17 at 14:32
  • It is difficult to say with certainty, but in attentional models like, feature integration theory , suggest that attention has 2 stages: preattentive and attentive. So the visual processing of color, size, arrangement and shapes occurs in the preattentive stage. – Kristiyan Lukanov Jan 9 '17 at 14:49
  • 2
    @Sullivan I don't know it a full box requires more processing than a single line but by incorporating a single line Google has cut off the need to use two distinguished elements, a field label and a placeholder by merging them into one clutter-free context. That would definitely require lesser processing. – ikartik90 Jan 17 '17 at 6:19
2

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.

enter image description here

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.

2

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.

1

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.

enter image description here

  • Also looks a lot like the paper I had at at school where a line meant "write here", so indeed only the placeholder is a bit tricky here, as that obviously is not a part of physical paper – Stephan Bijzitter Jan 9 '17 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.