0

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...

enter image description here 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.

  • 2
    Possible duplicate of Why the textfield in Google Material Design without box – Devin Oct 4 '16 at 17:05
  • Edited in regards to your duplicate. – Bryce Snyder Oct 4 '16 at 17:21
  • read the answers on that question, because the answer to yours is there. Anyways, to make it easier: MD is just a set of guidelines. You can use boxed inputs, as a matter of fact it's done frequently because of your same issue. As an additional tip: we used MD approach on Polymer (with the input animation and such), but keeping all borders of the input box, so it looked like a regular box, but it had the same behavior on user interaction as in Material Design – Devin Oct 4 '16 at 17:29
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.

enter image description here

0

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:

enter image description here

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.

  • 1
    To be honest, I don't see any obvious difference between your mockup and the one OP provided in the question. – JonW Nov 4 '16 at 10:01
0

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).

enter image description here

0

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

enter image description here

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!

-2

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

  1. Whitout focus

enter image description here

  1. Focused

enter image description here

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

i.stack.imgur.com/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

  • Please give more detail here. Can you provide a mockup? Is what you're suggesting still applicable within the Material Design design language? – JonW Nov 4 '16 at 10:02
  • yes, I'll edit my answer... I make a example using materialicss – liwston Nov 4 '16 at 11:46
  • @JonW, I'm using MaterializeCss, to do this example you need 2 css rules. – liwston Nov 4 '16 at 13:11
  • 1
    This is a UX site. We're not really too concerned with how to implement things. We're concerned with what the best user experience is going to be, and why. Can you elaborate here to explain why your solution is preferrable? And how relevant it is to Material Design. Don't assume people have CSS knowledge here, it's the end result we're interested in, not how to produce it. – JonW Nov 4 '16 at 13:15
  • I'm sorry, my alternative come to solve question problem: "If the textarea is smaller like an input, then they don't assume a larger response is available" – liwston Nov 4 '16 at 17:03

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.