4

enter image description hereI was wondering if there has been any usability research on the shape of form fields. I'm mainly interested if using the line form field popularized in material design introduces any usability issues.

My gut tells me older, less savvy users might not see the lines as fields and I'm curious to see if anyone has seen any effect on conversion rate?

Jonathan

1
  • My gut agrees with you. Can we not simply standardize some things and let them alone? Why must we keep changing simple and obvious things just to look cool? Computers are not cool. UIs are not beautiful: they are to get things done. Hammers are still sticks with grey steel lumps on the end, and nobody minds at all. – user67695 Dec 15 '16 at 14:46
2

I've tried both with a different user group and different product. What I found out was people who perform formal transaction like online banking, paying bills and even government related transaction, feels much comfortable with boxes. When the same group perform a form fill for something casual, the lines (only with label re-appear on top of the fill once user tap,click,input, interact) works and it keeps the layout rather clean.

1
  • Interesting. Do you have some metrics on this? – xul Mar 12 '20 at 13:27
2

As stated by Nielsen Norman Group, flat design has a smaller user efficiency enter link description here

For usability it is best to keep labels always visible. Flat design can be more esthetic pleasing and provide a clean form. However, the user is forced to pay extra attention for recognizing text-fields from static text.

The 'swap label' option balances between both options.

enter image description here

1
  • For something that we will have to do often for the rest of our lives (use computer forms) please can we just make it clean and bone-obvious what to do? That means: once it works, don't change how it looks. It has been working for a long time now, so it's ready. – user67695 Dec 15 '16 at 14:48
1

Just to add more value to the topic. A study at Google took place in 2017. The rest of the text is an excerpt from the article The Evolution of Material Design’s Text Fields.


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

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.