Material Design - texarea & select visuals don't work!

Question

I love Material Design, don't get me wrong, but it falls apart visually when you are dealing with the UX associated with some inputs.

Specifically, text areas are one pain point for the users. The users do not understand why there is a floating line below the input and think its just a break, proceeding to scroll over the area not input any information.

If the textarea is smaller like an input, then they don't assume a larger response is available.

This is my current UI, but it definitely doesn't look pleasing...

the red commented out is to hide IP

I'm curious as to other potential ways to represent a textarea and a select input.

There was a suggestion as to WHY this is done, I'm not looking for why more so what is another way, if any, to represent these two areas that may look a little better alongside Material Design. Or, is there anything I can do to help MD function better in my use-case.

Answer 1

Unfortunately, the example you provide with Material Design has some usability issues - certainly not what we want! There are a few problems with that approach:

• Field labels run into the underlines above them. Jumping around the form may prove confusing to some as to which field labels apply to
• Lack of hint text for fields like 'Date of Birth' (what format will this field take if I write it out instead of use the modal date picker?)
• Lack of required field labels
• Lack of obvious tap zone for mobile devices

Now, the above are coming from a strict usability standpoint. They're certainly all not necessary, but their inclusion would greatly improve this experience.

I would use the traditional form approach (an example below) and change the styling to a way that you see fit if you're looking for high usability.

Answer 2

This has been a small hiccup in how a broader demographic interprets material design. I've also had concerns with how different material design libraries implement the textarea UI.

This modification to your UI below is an example of something I have implemented in the past:

You can keep the styling of the textarea somewhat similar to what it is now, but just reduce the amount of space between the label and the line. Additionally, you can provide some context help below the line itself so people understand what they can do with that input.

This way the overall look and feel of your form stays intact and you don't have to bring in boxed inputs.

Answer 3

Since you wanted the text area to be in-line with Google MD, from the visual affordance standpoint, the below-attached options will give the users some clues (affordance) like:

• Resize
• Expand
• Hold more than one line of text / data

Probably, the scrollbar can be sleeker (option 3).

Answer 4

After user testing and playing with some various designs, we have found that this was the best representation of "Material Design" textareas.

This allowed for the layout to remain intact throughout the product, didn't add too much of a visual difference, and didn't just look like a line-break throughout the page.

It still, however, proved to show the user that they were able to input more information into the textarea if desired.

Note: The animations need to be fixed for height increments, of course!

Answer 5

Put a text area like a textbox, and expand it when focused, its a better way... Example using MaterializeCss

1. Whitout focus

2. Focused

User can see the textarea like a textbox, its friendly.. on enter on textarea, the size change to a big text area, when the textarea already have a long text, the height will be long too..

3.long text already inputted in the link

https://i.sstatic.net/OzhjL.png

If the textarea is smaller like an input, then they don't assume a larger response is available

Any user will see this "TextArea" like a "TextBox", but when focus it the large size, shows how much text is needed