13 ms·

Stop using Material Design text fields

• meerita 7y ago
  I personally use old text fields.
• undefined-1 7y ago
  Material Design has many other bad ideas in it too. Examples: the color suggestions are garish. The idea that a website should simulate physical motion has usability problems for people with motion sensitivity. There is a lack of aesthetic restraint. It encourages gratuitous animation spam, like the ripple effect. It's like a cake where 50% of the cake is frosting. Some of those things could be fixable, but I think it's unwise for other companies to adopt Google's visual branding in general.
• lbj 7y ago
  Its a matter of taste I guess, but Ive always found all of Googles UI design to be incredibly ugly. I use a bunch of them every day from Ads to Gmail and its all just bland and looks half baked. Am I alone in this?
  • unlinked_dll 7y ago
    They have the same aesthetic as Fisher Price.
  • deleted 7y ago
    [deleted]
  • shripadk 7y ago
    No you are not alone. I find it ugly as well. I have a feeling that most people just went with liking the design purely because it was pushed by Google. Classic case of "If you can't beat 'em, join 'em".
  • bschwindHN 7y ago
    Nah man, they hired some designers to have an arts and crafts day cutting out shapes from paper and shining lights on it. It's all physically based on the real world and made by Smart People so therefore it's good.
  • lonelappde 7y ago
    Are you too young to remember original Gmail? It's been downhill ever since that blue and yellow.
    • lbj 7y ago
      Not too young no, but I wasnt impressed back then either :)
• DecoPerson 7y ago
  I’m glad Material Design exists — iteration is important, and MD was a massive effort that provided useful insight. I hope future designers learn from its mistakes.
  • rat9988 7y ago
    The question is why material design didn't learn from other people's mistakes. Design isn't a new field born out of itL
    • munchbunny 7y ago
      Programmers make mistakes in the category of "why didn't they learn from other people's mistakes?" in large projects all the time. In any project of sufficient complexity (not exclusively programming projects), you'll inevitably find something that falls into that category. I've typically seen this type of error as the result of trying to balance trade-offs of the "you had to be in the room at the moment" sort, and then you fix it later when it's a real issue for you. I like that this post points out the issue, and I hope it gets fixed.
      • TeMPOraL 7y ago
        I think more importantly, given the growth rates of our industry, an average programmer or designer has less than 2-3 years of any kind of experience in building software, therefore they didn't have time to learn about, much less from, other people's mistakes.
    • speedplane 7y ago
      > The question is why material design didn't learn from other people's mistakes. While reading the original material design spec, it seemed enlightened, but now its clear it's more of a standard than a best-practice. Its by no means the "best" design, just like the qwerty keyboard wasn't the best. However, due to a huge marketing push by google, it's now considered a standard and if you do not conform, you'll look weird. Not so different than in the 1990s, if you had a Windows application without a "file" drop-down menubar, you would also be considered weird. Material design should not be thought of as an optimal design approach, it should be thought of as a standard to rally behind. If you build something adhering to the standard, regardless of whether it's a good or bad design choice, users will understand it because they have already been it by Google. If you have something that's better, it may be rejected simply because folks weren't already trained on it.
• dfsdfklgjljg 7y ago
  I can't agree with this article more. The old style material field which were mentioned that are just an underlined text instead of a box were absolutely terrible too. It's disgusting that someone would actually think those were a good idea. Also, what he calls out in the end, use high contrast guys! The old material design grey text on grey background was terrible to read. GCP used to be full of this.
• orbital-decay 7y ago
  To be honest, Adresse de courrier électronique professionnelle would probably look awkward on any kind of interface that is optimized for Work email address, and vice versa. Is there any shorter equivalent in French? In my native language (with a non-Latin alphabet), we also have a long word for email, so in localized captions we often just use email or e-mail in English, and nobody has a problem with it.
  • Voyvode 7y ago
    Yes, Courriel pro. Even shorter than the original. The use of e-mail you describe also exists in French.
  • uhoh-itsmaciek 7y ago
    Awkward but at least usable. The way the Material fields break with long or scaled label text is pretty bogus. That said, you're right: excessively long labels are a usability blemish worth avoiding, as long as the semantics of the field remain clear.
  • Kuinox 7y ago
    mèl is valid French and mean email. "addresse mèl" is used in governments websites while regular website simply write "addresse email"
    • outadoc 7y ago
      It's "mél", and I hate it.
      • Kuinox 7y ago
        I can't upvote enough.
  • progval 7y ago
    It's an example though; most of the time, French requires more letters than English to write the same thing. As my browser is configured in French, I regularly see interfaces broken because of these. Most of the time it's not a big deal (as in the article's example), but sometimes it makes the website/application harder to use, either because some text is hidden, or the text box goes over a button/text field, which then becomes impossible to use. > Is there any shorter equivalent in French? The shortest would be "email pro", but it's informal. The best you can do in formal language (and if you're ok with dropping the "address" part of the label) is "email professionnel".
• chmike 7y ago
  Finally accessibility is considered. Grey placeholders are barely readable because the lack contrast.
  • collyw 7y ago
    Can't you style that using standard CSS? (I assumed that you could but have never had the need).
    • hadrien01 7y ago
      You can[0], but you shouldn't put placeholders in most cases anyway[1] [0] https://developer.mozilla.org/fr/docs/Web/CSS/::placeholder https://developer.mozilla.org/fr/docs/Web/CSS/::placeholder [1] https://design-system.service.gov.uk/components/text-input/ https://design-system.service.gov.uk/components/text-input/
• OskarS 7y ago
  Yeah, I really wish Google did a better job across the board here. The gmail settings example is instructive, because the author is right, it's much more usable than the Material design examples. It does, however, look terrible! All the spacing and alignment for everything is wrong and the whole thing looks incredibly wonky (the radio buttons don't line up properly with anything). It looks very "programmer design". I'd take it any day over inaccessible-but-beautiful Material design, though. You'd just hope that a company of Google's scale could do both.
• veeti 7y ago
  > Here is just a small section of Gmail's settings form, which configures a vacation responder message. The form UI here is much more conventional, with bold, persistent labels and clearly outlined text inputs. So it seems that even Google doesn't find it appropriate to use their Material Design form fields for every situation. Or, more likely, nobody touched this part of the UI since 2004.
  • digitalengineer 7y ago
    True! Nowadays a lot of companies have people not working every day here in Europe, but for Google's it's 'Out Of Office' or not. No way to set specific days. I'd like to see Google adding a partial Out-Of-Office option.
  • OskarS 7y ago
    That's probably the case, but if so then that's a real harsh judgement of Material design: that accessibility has actually decreased since 2004.
    • inetknght 7y ago
      > that's a real harsh judgement of Material design: that accessibility has actually decreased since 2004. I think that's rather the point...
    • Seenso 7y ago
      > That's probably the case, but if so then that's a real harsh judgement of Material design: that accessibility has actually decreased since 2004. We've banged it too deep into our heads that change is progress, especially with technology. Sometimes change is really regression, and that's more likely the more refined something gets. Regressions are happening all the time now, and too many people foolishly defend them as progress.
      • joquarky 7y ago
        The overuse of A-B testing is ruining a lot of practical well-thought design.
• IshKebab 7y ago
  Valid points but relatively minor IMO. I don't think I've ever got confused by a material design text field.
  • mellavora 7y ago
    Then you haven't lived, man! Get out in the world and take some risks!
• NohatCoder 7y ago
  What is a material design text field? The article seems to assume that this a well defined and well known term that needs no further introduction.
  • tremby 7y ago
    The article links to Material Design in literally its first line!
  • applecrazy 7y ago
    This thing: https://material.io/components/text-fields/ https://material.io/components/text-fields/
    • NohatCoder 7y ago
      I want a concise definition, what feature makes it so? If I can't tell what is and what isn't a thingy the whole article is pointless.
      • lonelappde 7y ago
        Ironically, that's exactly what the article is about- In MD users can't tell what isn't nor isn't a thingy. Anyway, it's like crystal meth. If you don't know what it is you are winning! The advice is for people who are unlucky enough to be near it.
  • dragonwriter 7y ago
    A text field following the Material Design specification. If you don't know what it is, you probably aren't going to accidentally use them, and aren't a target of the advice, since you would probably have to either read the spec or adopt a library that waves around being an implementation of the spec to do it. The term is well-known and understood by the intended audience.
• kuschku 7y ago
  The interactive floating labels are for forms with only very few fields. If you have a form with many fields, it’s advised to force the label to always be in the top-left corner anyway. The field should also be wider, which also helps with the text being cut off. And with only a few changes, most of the complaints of this article are instantly fixed.
• Kronen 7y ago
  We should make a different internet for dummies who get confused with something so simple as a Material Design text field. Usability is not going to fix stupidity.
  • ngcc_hk 7y ago
    May be not. But the whole user interface is for most of us to interact. Those fields in the ui library is crazily confusing.
  • bsaul 7y ago
    so, if any junior software engineer is looking at this comment : the rule is that users aren't stupid. Your software most likely is, and that's probably because you made the wrong assumptions about human beings.
• collyw 7y ago
  Material design seems very over-engineered. I guess it's nice that you can potentially customise everything, but working out what place in the class hierarchy you need to adjust takes a while. I mean most text fields will have a separate label and don't need a label as part of the text field. But how to get rid of it? That should be simple right..... not in my experience.
  • mosselman 7y ago
    > Material design seems very over-engineered. I'd like to add that most things done in the front-end space seem very over-engineered. It is as if developers are bored a lot and need to build overly complex structures and concepts in order to keep themselves busy, perhaps, employed.
    • seer 7y ago
      The way I see it is that frontend developers at the far far end of a product development funnel. When it gets to their computers any suggestions from them are laughed at and they need to just make it work. Imagine a frontend dev saying “this way of doing things is unreasonable, lets just use this simpler and more robust method instead” - very few places would allow this. So frontend devs naturally gravitate towards solutions that are infinitely customizable which ends up being dramatically over engineered.
      • deleted 7y ago
        [deleted]
  • exclipy 7y ago
    The code for material design components is crazy complicated because it was designed by UX designers for multiple platforms with little engineering input.
• gsich 7y ago
  Material design is bad, stop using it altogether.
  • sebastianconcpt 7y ago
    Agree. Totally overrated. I ran away from it every time. Plenty of far better options.
    • uxcolumbo 7y ago
      Can you list some of those better options? Just curious what you use.
      • cfv 7y ago
        Not OP, but we've used Ant design and the gov.uk systems with good reception from our clients and only minor hiccups with end user testing
        • uxcolumbo 7y ago
          Thanks. I used ANT design a couple of years ago and it was good. I work on enterprise apps and material design just wasn't suitable. I also like the look of Elastic UI [0], but haven't used it on a project yet, so don't know what the dev experience is. [0] https://elastic.github.io/eui/#/ https://elastic.github.io/eui/#/
• dmitriid 7y ago
  Material UI is bad to horrible on many levels. My recent "discovery" was their choice for font, color and contrast [1] And their own guidelines are thrown out of the window on their own website. See an older version of the website [2] (the new one isn't much better), or their approach to displaying information [3] Edit: And the problem is that these designs are applied with literally no thought involved [4] [1] https://grumpy.website/post/0TEJkwzPA https://grumpy.website/post/0TEJkwzPA [2] https://grumpy.website/post/0Ra93yy33 https://grumpy.website/post/0Ra93yy33 [3] https://grumpy.website/post/0TEKUvqDX https://grumpy.website/post/0TEKUvqDX [4] https://grumpy.website/post/0TKa2-she https://grumpy.website/post/0TKa2-she and https://grumpy.website/post/0TBOWnfjB https://grumpy.website/post/0TBOWnfjB
• ptah 7y ago
  i think the solution for the first issue: label vs placeholder, is to just avoid placeholders that are not labels when using material design. EDIT: for help text, put it below label or a tooltip
• d0100 7y ago
  About label size, I don't think the label should be that big anyway. On an input, there is an option for explanatory text under the input element. At least in Material-UI. So with proper responsive design, the input should expand with the label text size, and the label itself should be short, with the necessary explanation on the bottom.
• xdrosenheim 7y ago
  I've never really liked material design. I don't care about your pretty icons, fancy text above (or inside) a box. Save me from your megabytes of CSS and scripts, and just give me the content. That's what I'm here for. To author: Stop having XHR to load your images. Just load them. If I don't want them, I won't load them.
  • xd1936 7y ago
    Yeah! Why can't every website be 12pt black-on-white Courier New?
    • dmitriid 7y ago
      No. The question is: why can't every website be like gov.uk sites: with proper legibility, quick content, clearly designed and labeled for controls etc. [1-3] Or things like BBC's Global Experience Language [4] [1] Government Design Principles https://www.gov.uk/guidance/government-design-principles https://www.gov.uk/guidance/government-design-principles [2] gov.uk Design System https://design-system.service.gov.uk https://design-system.service.gov.uk [3] Or even tings like "Why the GOV.UK Design System team changed the input type for numbers" https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-des... [4] https://bbc.github.io/gel/ https://bbc.github.io/gel/
      • sfifs 7y ago
        Because to some people (like me) the gov.uk website looks ugly and gives off a harsh "beware" vibe? Design is at least as much about achieving a certain emotional reaction as it is about legibility and clarity
        • dmitriid 7y ago
          That's a valid concern. Unfortunately, it looks like most of current design on the web tends to overdo emotional reactions to the detriment of legibility and clarity.
• wvh 7y ago
  I've noticed that when creating a large, dynamic, multi-tab form, the labels and help texts can get in the way of actually viewing the actual entered information in the form. It's actually pretty tricky to come up with technical solutions where the labels are initially very clear up front, when people are adding data, but disappear in the background when most of the information has been entered so the actual contents can get most of the visual focus. It's easy to show in detail how a big, friendly and accessible label makes a field more usable, but in the context of a large, complex form, the overview of the form structure and completeness of the data already entered are also important. Too prominent labels and too much help text can distract significantly, also for those who are visually impaired or are relying on screen readers. My conclusion is that some form of two-phase, view/edit approach seems to work best for large forms. Labels and help are minimal by default, but the parts or "blocks" the user is actively editing gets more help and meta information added while it has the focus.
  • rwparris2 7y ago
    As someone currently struggling with creating a large, dynamic, multi-tab form, I'd love know more about the solutions you've employed.
  • marcosdumay 7y ago
    > the overview of the form structure and completeness of the data already entered are also important Hum... The entered data is only important on the context of the place it is in. By default labels and inputs have very clearly different appearances so that they would not be confused. And if you make the label information not accessible, you have just made the input information context-free and thus useless. (Also, what is that with text prominence and screen readers? Are you completely removing the labels for blind people?)
• notRobot 7y ago
  Is there a site where I can quickly check if my elements and designs are accessible? Like a cheatsheet on guidelines for text, forms, diagrams, etc?
  • DougBTX 7y ago
    It isn't a shortcut, but the UK GDS has some comprehensive material on this: https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-your-service-accessible-an-introduction https://www.gov.uk/service-manual/helping-people-to-use-your...
  • theandrewbailey 7y ago
    Firefox dev tools has an accessibility tab. It can scan and verify things like text size and contrast, and flags violations. https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector https://developer.mozilla.org/en-US/docs/Tools/Accessibility...
• anilakar 7y ago
  Stop using Material Design altogether. It's a prime example of the current "everything must be flat and monochrome" anti-usability principle. The Windows GUI usability also peaked somewhere in the decade spanning 2000, XP and Seven, if you disabled the candy themes.
  • skocznymroczny 7y ago
    What do you mean by candy themes? Aero? I think Windows 7 and Windows 10 still have very clear interfaces (I mean Win32 GUIs, not the Metro/Modern stuff no one outside of MS really cares about). I've never understood however the need to disable Aero and switch to Windows Classic, which looks gray, boring and feels like using Windows 98 again. Ironically, most of the people I know who used Windows Classic mode switched to Linux later using something like GNOME or Cinnamon and then complained how ugly Windows was in comparison :)
    • anilakar 7y ago
      My definition of superfluous eye candy includes the default green and blue theme of Windows XP, Aero in Vista and 7, and Metro in later versions. What you describe as boring is predictable and usable to me. You guessed right, I run various Linux distributions with Cinnamon on every computer but the gaming one, and I still envy the clean and crisp look of 2000. Regarding Metro, the new control panel in Windows 10 lacks most settings a normal power user (not a domain admin) needs so all the useful functionality is hidden behind one extra layer.
      • skocznymroczny 7y ago
        Luckily, most of the settings are just one click away for the "old" configuration panel which has all the nice features.
      • anthk 7y ago
        https://github.com/grassmunk/Chicago95 https://github.com/grassmunk/Chicago95
    • 7y ago
• janpot 7y ago
  I really wish these kinds of articles would take a less condescending tone. "stop doing this", "you should do that". No, I do whatever I want within the boundaries that my employer and the law have set.
• numlock86 7y ago
  > Do make sure all text meets WCAG colour contrast requirements. Presented by the person that places #BBBBBB text on #FFFFFF background. Meh. If you want to talk about good practices on the web maybe stop using lazy loaded images and that other unnecessary JS clutter.
  • tremby 7y ago
    > Presented by the person that places #BBBBBB text on #FFFFFF background I scanned the site source code and the only bit of text which uses that particular colour is the "#" symbol before headings. Sounds like you're just trying to find something to complain about.
    • numlock86 7y ago
      Check the other pages my fam.
• ivanhoe 7y ago
  The best UX test for me was that my kid at age 4 could easily manage iOS apps or sites with bootstrap-like design, but would get totally lost on pages with the material design. In their effort to make it super minimal they've removed too much of the visual hierarchy. If you can't read, you just don't know if something is a static label or a button to click. And that means that even if you can read it requires some extra mental strain to navigate it quickly. Obviously, like with anything, you learn to use it with time, but problem with that is that even a small change will confuse you again. Put an element in an unexpected position or too close to some body of text, and people will miss it completely.
  • AgloeDreams 7y ago
    Their Floating Action Button was one of the worst choices ever made in UI design. No Context, overlaps content if you want to see it, placed in a weirdly hard to reach space, hidden under the thumb. Gah.
• muth02446 7y ago
  Piling onto the material design criticism. I have been using GUIs since the 80s (remember Atari ST GEM). Not once have I been confused about whether an item was selected or not. Enter material design. On android's slide down config screen (the one with wifi, bluetooth, etc toggles) I always have to stop and think a bit to determine if wifi is on or not. Similarly, on many other config screens, horizontal sliders that snap to either the left and right positions are used to indicate on/off but it is never clear which one is which. I believe there are proper check boxes somewhere in the Widget set but they are not used much. To me this seems like a case of aesthetic dogma trumping usability.
  • christophilus 7y ago
    This gets me every single time. I also have seen plenty of screens where buttons are given a "selected" state (e.g. a dark blue background), but it's non obvious if the dark blue background means selected or not. Radio buttons and checkboxes never give me these problems. Just use them.
  • Kaze404 7y ago
    Isn't the consensus that right means selected? I don't remember ever been confused by that.
    • mrkwse 7y ago
      That might be sensible with a latin language read left-to-right, but for other scripts read right-to-left, it's ambiguous. Is the enabled state then the inverse? (I believe the guidelines are that it should be left as selected for RTL languages)
      • lonelappde 7y ago
        The problem with trying to do it properly for RTL is that half of systems won't do it properly which is worse than everyone consistently doing it wrong and users learning to cope.
    • warp 7y ago
• jordan801 7y ago
  I like material design. I have been deploying it to apps for years, and have had zero problems/complaints with it. I work on way too many apps to pay much attention to any of them. I use Vuetify (a material design framework for VueJS) and it works beautifully. Personally I think Development is becoming too idealistic. Ideally everything works for everyone all the time. But that's never the case, in my experience. These principles are a godsend for those of us who have bosses that want the app, "flashy", but also functional. While also having an abysmal amount of time to work on said app. Personally I'd love to see less, "stop using this", and more, "start using this instead, here's why". I don't have time to go in and hack my material design framework, to fix an issue, I haven't had an issue with. Read a book, and create your own UI doesn't work for me. P.S. WCAG principles are basically unattainable in the real world. Almost any national entity has hundreds of millions of violations. I know because I also manage an app that scans for them.
  • concerned_user 7y ago
    All you said just means you are isolated from user's feedback or live in some sort of echo chamber. I would never believe that everyone is satisfied, you can never have 100% satisfaction, there will always be users complaining about any part of UI really just because they had a bad day.
    • jordan801 7y ago
      > All you said just means you are isolated from user's feedback or live in some sort of echo chamber. An insinuation. >I would never believe that everyone is satisfied I've worked in this industry long enough to know no one is ever satisfied. That is background noise. I consider something to be a good implementation if I don't get consistent questions or issues about it. There will always be users that have issues with even the most basic and intuitive UI.
  • JohnFen 7y ago
    > I have been deploying it to apps for years, and have had zero problems/complaints with it. Which means nothing. I would never bother complaining to developers of an application I use because they employed MD, even though it actively annoys me (although I certainly would stop using such apps immediately if I found an equivalent app that didn't use it). The reason is because it's sadly become expected, so complaining would be pointless. > Personally I think Development is becoming too idealistic. Ideally everything works for everyone all the time. I'm not a UX dev, so my criticisms of MD are not from a development point of view. They're from a user point of view. And as a user, I don't care if something works for everyone all the time. I care if it works for me, and MD really doesn't.
• coolyd 7y ago
  Don't forget, the material design specifications and frameworks are being made freely available. When you compare interfaces designed by that vast majority of developers, using MD is an enormous step up in usability and functionality. It also incorporates concepts that, while not being the most "accessible", are patterns the vast majority of users have become familiar with and can navigate without explanation. For example, interactions like gestures are not accessible or obvious but are commonplace and understood. Constructive criticism of design is important and with these frameworks being open source, we can modify and "improve" as we see as appropriate. Google has invested enormous amounts of money, energy, and time into making this available for free. They are not enforcing these concepts, even on their own platforms so we should appreciate that they make these systems available if you choose to use them.
  • otterley 7y ago
    I’m not sure why the effort alone makes it worthy of use. The product needs to be judged on its functional merits, not based solely on what it costs and how much work was put into it. I also disagree that it was a step up for spec made available by other vendors before. Apple’s original Human Interface Guidelines for the Macintosh (http://interface.free.fr/Archives/Apple_HIGuidelines.pdf http://interface.free.fr/Archives/Apple_HIGuidelines.pdf ) was a paragon of usability. AFAICT nearly everything we’ve invented since has been a step back. If anything, Material Design is a textbook example of “you get what you pay for.”
    • coolyd 7y ago
      I'm not saying because of effort it's worthy of use. Just that it's not required and is a free resource. I also didn't compare to other specs, just common developer interfaces: https://blog.codinghorror.com/this-is-what-happens-when-you-let-developers-create-ui/ https://blog.codinghorror.com/this-is-what-happens-when-you-... Outside github and dribbble there is a large population of developers creating internal tools that abide by no UI/UX standards or even common sense. There are many frameworks available. Which ones might be a better choice?
  • cosmotic 7y ago
• gnyman 7y ago
  I'll join the choir with this example I came across a few weeks ago. https://twitter.com/gnyman/status/1230424668970024961 https://twitter.com/gnyman/status/1230424668970024961 Not sure if it's material design widgets being limited, a lazy Web dev or google intentionally making it hard to update your marketing settings. I think I'm having flashbacks to the custom windows UI's/skins of the 1990's when SW devs and designers felt they needed to differentiate and replaced the standard windows components with their own designs.
  • toyg 7y ago
    Hardly a ‘90s thing: every website out there completely redesigns all INPUT and SELECT fields, every day of the week.
    • gnyman 7y ago
      Yes, I was unclear. I meant that I think it's coming back now. My feeling is (but it could be just colored memory) that for a long time people were happy with just changing the colors/borders/css of the standard components. Now I have the feeling people (or frameworks) code new <option> functionality from scratch in JS, thus making them look and function slightly differently on each site.
• sexy_seedbox 7y ago
  > So if Google jumped off a cliff, you would, too? Yes. This is why Google AMP is popular and how their SERP became an SEO wasteland for most search terms.