User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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.
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.
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.
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.
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.
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?
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.
