Hacker News Reader

Comment by illiarian | Hacker News Reader

> many designers feel the established design systems like Material are insufficient for some reason

Because Material is awful?

In their original iteration they had to do a study with 600 people to find out that text inputs should look like text inputs https://medium.com/google-design/the-evolution-of-material-d...

Their latest abomination has almost nothing aligned optically: https://twitter.com/dmitriid/status/1643607965935476737 When there are 5 elements, they follow 5 different guidelines: https://twitter.com/dmitriid/status/1643682248959328258

> That is OK, if you know the rules you can break them, but often they don't know the rules either

And that's the problem with what I call "dribbble-raised designers" ("designers" of Material UI included): they work for the designs to look nice in static screenshots on presentation pages without much scrutiny, and that's it.

View on HN

On that note: you can't even imagine how bad Material UI is https://twitter.com/nikitonsky/status/1645797661684170754?s=... and https://twitter.com/nikitonsky/status/1643613144143519744?s=...

Yo I thought those tweets might be from a few years ago and "they must have resolved those by now"... no, the tweets are literally from TODAY and SIX DAYS AGO. What the hell?! Sad times...

I built a site using Material in 2018. Never again! I have to imagine that Google just leaves it as unmaintained, considering these issues are still happening.

> When there are 5 elements, they follow 5 different guidelines:

Pixel-perfect alignment is not a hard rule. It's only for a list of homogenous items would they need to be aligned perfectly.

But when the elements are heterogenous, as the screenshot in your link refers to, the human brain does weird thing to what we see, and alignment has to be adjusted for it to "look right".

This is particularly well-known in font design, with things like variable ascender height, cap height, and kerning.

https://fonts.google.com/knowledge/glossary/cap_height

>Note that due to optical illusion, round and pointed capitals (for instance the O and A) will extend a little above the cap height to make them appear as tall as the flat-topped capitals.

Well, this one is non-obvious:

> Label text should be placed within the bounds of the text field box

And I'm perfectly fine with Google spending unreasonable amounts of their money so I can learn lightly-valuable facts like this... As long as people don't mass adopt their findings before they get repeated.

This one, I think, is them just not willing to admit their mistake. I wouldn't be surprised if the experiment went like this: "Here are the inputs with only underline. In one of them the label is inside the input". In this case sure, users will better understand it's an input if the label is inside.

Well, the 3 options they tested are on your link. It is a very limited set, but this one specific mistake isn't there.

I would still hold to the obvious (label above or left of the widget) until it is replicated, as the study isn't of very high quality.

You are just literally making things up at this point…

Yeah. I think that it’s no coincidence that I’ve found it hard to use every Material UI app that I’ve ever come across.

Reply on news.ycombinator.com