6

enter image description here

I need to convert a form to material design guidelines but I don't think MD has considered how to deal with long labels on narrow forms. As you can see in my example I have 3 pairs of dropdowns that are well presented in the original form but runs into problems with MD. How would you deal with this? I'm leaning toward option 2, or not using MD at all for this form.

  • Is this english only or do you have to localize your form into other languages? – Chriskowalskowski Dec 18 '15 at 3:34
3

It's important that each pairing of selects has a parent label to bind them. A side benefit of this is it provides you a full line width – it could actually wrap to multiple lines and still work property – in which to explain the purpose of each grouping.

enter image description here

2

Option 2 is the clear choice.

The field labels need to read as labels and not data right from the start. In options 1 and 3, before a selection is made, the labels are indistinguishable from data. Additionally, it is important that the labels remain persistent in style and location to avoid confusion, unnecessary learning, and a sense of instability.

Once UI/UX designers recognize the many weaknesses of Google's Material Guidelines, they are free to create effective designs that take the users' familiarity with the Guidelines and Android customs into consideration as one factor to weigh against other usability considerations.

Also consider making the data bold and the label normal weight. This highlights the data and makes it easier to scan over the data. It's not always appropriate, but I find it is more often than not.

1

It's helpful that you grouped optional information together and avoided the annoying red asterisks. However, why repeat "(optional)" for each select? Group them as optional under a single headline after required fields, thus reducing cognitive load and length for the long labels.

enter image description here

  • I agree that grouping required and optional fields separately is helpful, but the required field asterisk is a Material Design standard: Text Fields - Required Fields. – Tory Oct 18 '16 at 16:55
1

The label is not the same with the placeholder. Please see some example of forms in material design. The label has the font-size smaller and it will be easier to have it in a single row.

It is true, the placeholder is usually the same in material design and with an animation, it will appear as the label when the user fills the field. In your case, I think you can make an exception because it is more important to have a responsive form and also follow the design line.

You can see below how the font-size is different for the input and label.

enter image description here

0

I think your new MD form compared to the old is like Blu-ray compared to VHS video tape!

The new form rocks so I would say definitely stick with it!

I think option 3 would be best because what if You had a bigger label than option 2 could handle in the future?

Have you checked the form/labels for responsiveness?

0

Concern with the 1st and 3rd option is

1) Once you have selected an option (or entered the text in a field) there is no label to indicate what this field is about.

2) Since there is no label with the input field, you loose the opportunity to show any validation about the field (such as mandatory indicator *, etc.)

So out of the three options you have given, 2nd one seems to be the best one.

  • oops I should have been more clear. The labels will move above the field once selected. That's a part of my conundrum – Mopo123 Jan 17 '16 at 20:22
  • @Mopo123 Sorry, in that case your question totally changes. Please post a new one with updated image. – gurvinder372 Jan 18 '16 at 6:33

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.