1

Google's material design champions the use of text fields that imitate ruled lines on a piece of paper. This is a pattern that seems acceptable to me when using a mouse because of the precision that the mouse allows.

Google's Material Design form on mobile

My concern is that when on a touch device the user feels much more comfortable targeting a bounded box, and that text alone or lines offer much less affordance than an object to press.

Has anyone encountered usability issues on touch devices while implementing these material design forms? Noticed any discrepancy in conversions or difficulty inputing information?

  • I don't have numbers at hand, but yes, many people encountered this behavior very problematic. Personally, we built a Bootstrap+Material framework for internal use, and input fields are regular boxes rather than those lines. Remember Material is just a guideline, you don't need (and probably shouldn't) abide to everything it says, not all cases are the same – Devin Aug 1 '17 at 18:34
  • Thanks Devin, that's helpful. Our developers are also using a combination Bootstrap and Material Design. I want to recommend that they change forms on touch devices to be boxes, but having a hard time finding data on the subject. – Audrey B Aug 3 '17 at 16:53
2

I believe the Material guidelines were recently updated to include text field boxes, which aid in identifiability. See here: https://material.io/guidelines/components/text-fields.html#text-fields-text-field-boxes

  • Thanks Massif, this is extremely helpful. One of the arguments my colleagues presented that since it's Google, they probably did their research and determined that the line was sufficient. But if Google recommends that text boxes increase discoverability...kind of difficult to refute that argument. – Audrey B Dec 7 '17 at 23:56

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.