Material Design - label to the left of underline input field?

Question

We use the Material Design underline text fields with floating labels in our application (see right on the picture).

This works well on mobile, but for long forms on a desktop a label to the left of the field would be more beneficial (see left on the picture). Scanning would be easier especially in cases where the fields are already filled out. It would also require less vertical space making the form less long.

My question now is, is this a conventional user-friendly pattern? Or are the underline fields for some reason not to be used with left labels (I couldn't find it anywhere)?

Thanks for your input.

Answer 1

I am debating the same thing as we speak--it is a much better use of space to have labels that are NOT top-aligned as is suggested by Material UI for mobile in my context where we are trying to keep things as much above the fold as possible.

I would look at Luke Wroblewski's Web Form Design guidelines. Though the book is getting older, I think a lot of the general principles apply in terms of when to choose left, right or top-aligned labels, and here is an article about just that: https://www.lukew.com/ff/entry.asp?504

In your screenshot above, I'd suggest right-aligned labels rather than left-aligned as they are easier for users to parse when they are familiar (as an address surely is!).

Answer 2

I worked on it recently for my company. Long form with some UX problems in it. We (The UI team and me) choosed to have 2 differents designs (1 for mobile and the other one for desktop)

The mobile is the one you already have (google thing, works really well, good micro-interaction and the room for visual feedback all the way along the user journey).

The desktop is more "Classic", we will use "boxes" with the title of the section at the top left of the box. This is more adapted to the web "classic" standard and you can still display a lot of nice micro-interaction and visual feedbacks to make your users understand what they're doing.

Still, We will test it and probably do some modifications for it using hotjar (observation of user sessions AND data about each field like time spending filling it and number of time re-filling it) and Google Analytics (Conversion rates depending on the country, etc...).

This is just an input, not a "Do as I say" thing. I worked on the concept for quite some time, will test it soon enough to have feedback about it.