Google recently launched a new design system, the next generation of the “Material” design used in their phones and apps:
Introducing Material 3 Expressive, now featuring 30% more rebelliousness and 32% more subculture (whatever the hell that means).
I was immediately startled by how ugly it is. I know it’s someone’s baby, but it’s the kind of ugly that would normally make parents scream and rethink all their life decisions leading up to that point. I could only describe it as “psychedelic vomit mixed with deteriorating mental capacity”. I’ve seen some nasty shit on the internet, but nothing has made me recoil in horror the way these pixels have…
Is it just me? A friend pointed out that “this probably wasn’t designed with people in their 40s in mind”… well, fair enough, but who the hell did they focus group it on? I doubt drunken toddlers could do much worse.
If this ever came to Android, mark my words, I’m going to flush my phone down the toilet and call the biohazard people.
Those of you with kids… do they like it any better? Do you like it? Maybe I’m just a boring, grumpy middle-aged man who hates “modern” design…?
I guess this is what happens when you pay a bunch of designers millions of dollars a year to work on your mature, decades-old phone apps. They have to justify their existence somehow, and so come up with radical new subcultures and rebellious color palettes…
It’s the SDMB’s official coming-of-age ritual
Mostly, you’ll see it on Android, first-party Google apps, and mobile apps made by smaller companies and indie developers.
In more (probably too much) detail:
Google.com, the search engine, actually uses very little of this “Material” design system. The search engine predates the design system. Same with Google’s older properties, like Gmail and Google Docs, which barely use any Material — especially if you access them on a computer web browser instead of a phone app.
But the search engine also funds Google, the now-huge tech company (which itself just a part of Alphabet Inc., the conglomerate that also owns some biotech, robotics, drone, and self-driving companies).
Google, the tech company, is what gave us Android (the phone operating system). Android itself uses Material Design in its interface and menus. It’s usually Material v1 or v2, depending on your particular phone & Android version.
First-party Google apps on recent versions of Android, like Gmail, the Play Store, Google Messages, Google Maps, Photos, Calendar, etc., also use some variation of Material. If you have a recent Pixel phone or other non-Samsung Android, the look and feel of Material Design v2 components should look pretty familiar, though not necessarily in that hideous purple-lavender color.
Most other big tech companies (like Apple, Samsung, Netflix, Amazon, etc.), won’t use Material Design because they don’t want to look like Google/Android. They’ll usually have their own designers make their own look & feel. “Design system” is typically what they call these things, combining some sort of artistic design philosophic, aesthetic choices in color, typography, spacing, branding, etc., alongside a ton of research and marketing and testing and… of course… ego.
Rarely, you’ll also see Material Design creep into places where it’s not really appropriate, like on iPhones. That’s usually because a lazy developer didn’t want to develop two different app versions, so just chose one design system and made a cross-platform app that looks and works the same on both iOS and Android, usually pissing half their users in the process. The inverse (Apple look and feel on Android) also happens.
Anyway, I thought Material v1 was great (and at the time, quite popular and much-copied). v2 brought incremental changes — some good, some bad, but mostly uncontroversial and easy enough to ignore. But v3… this version… is an absolute abomination I hope it doesn’t come to take over all the Android phones…
I shudder to think what apps and phones will look like 10-15 years from now… now where did that cloud go??
What are your specific complaints beyond “it’s just ugly?”
On the face of it at least, the redesign seems to be specifically aimed at Gen Z.
But some of what they are doing, like making some UI fonts bolder, or making important UI buttons bigger and more set off, can really help usability, IMO.
Also, they seem to be introducing springy animation physics coupled with haptic feedback. That is something iOS has had since forever and it works well. And ripping it off is perfectly fine because it’s usually a good idea to steal good ideas. So those are some ways it could be an improvement.
It’s the “32% increase in subculture perception,” “46 separate research studies,” “1800 participants,” the attempt to quantify “coolness attributes” stuff that gets me worried. The Poochieness of it all sort of brings back memories of Microsoft’s Mojave Experiment.
Well, I like boring, functional, “function over form” design, so “rebellious”, “subculture”-oriented design is a huge turn-off right off the bat. But specifically:
I don’t want “expressive” software that is emotive, energetic, creative, and playful. It’s a tool. I want it to get out of the way and stay out of the way.
In the apps I use all the time, I don’t want huge UI buttons that treat me as though I’m a first-time user using a grocery store checkout kiosk. I use Gmail many times a day and I don’t want half the screen to be taken up by huge UI elements that I almost never need. I need to be able to read the message in context and reply to it. I know where the send button is. I don’t think I’m particularly bright, but even I managed to find it twenty years ago, without needing it to be huge and pink. I haven’t lost it since.
I don’t want secondary UI elements that distract me with their fancy colors while I’m looking at the content of the app, in this case the message.
Basically, I hate every single part of this redesign:
I DO like some of the new visual hierarchy stuff they suggest under the “Expressive tactics” part of M3 Expressive: Engaging UX Design, but most of the good parts of that would’ve been fine with Material Design 1 and 2 or any other design system — they’re just best practices, not anything inherently “expressive”, whatever the hell that means.
I don’t know how we went from “simple and functional” to “puking amoeba” in one version. I guess it’s not just me…
The older you are, the less you like this redesign:
I just hate part every part of it. I don’t often feel that way… I work with a lot of web & UX designers (it’s part of my job) and I appreciate most of their work, and generally like what Google does. Not this time.
Wow, I was so distracted by how bad the bar chart looked that it took me a long time to notice that the bar chart is actually conveying the information. I thought it was just an example of terrible.
What are the ovals and arrows supposed to mean? Why are the letters/numbers all different sizes?
Really though, I don’t care about the colors or little flourishes, I just wish UIs would keep the interactive elements in place, so you know, I can interact with them.
The big colored arrow at the end of each line means nothing, as far as I can tell. But it’s much worse than that. Notice that there’s a vertical dotted line on the right edge, with “100%” at the bottom, and a similar line at the left edge with 0% under it. This implies that the bars are proportional to the percentages in the oval, but that’s a blatant lie. The length of the “87%” bar is about 72% of the distance between 0% and 100%. The length of the “81%” bar is 65% of that distance; the “65%” bar is 48%; the “62%” bar is 42%, and the “52%” bar is 35%.
The bars are not only wrong in relation to the “100%” line, they are wrong with respect to each other. That is, you couldn’t just move the “100%” line to make them correct. Taking the 87% bar as setting the scale, the 62% bar should be .71 as long, since 62/87=.71. But it’s actually .58 as long. That’s a huge error. All of the bars are similarly out of scale with each other.
I thought maybe the intention was that the bar should be interpreted to end at the tip of the arrow rather than at the end of the bar, or at the right edge of the oval, but neither of those interpretations works either. It’s a grotesque mess, which completely fails in its purpose, unless its purpose to deliberately mislead the reader.
I went through the exact same process, even taking a ruler to my screen before just saying fuck it, not my bars, not my graph. It was only at that point that I noticed the bars actually represented the ages (or I guess I should say ages)of people who like the graph, or something like that.
The bar chart looks like a collage or sticker art made by a kid in first grade. Ugly, unprofessional, and as @markn_1 points out, graphically misleading. It’s actually like a demo of how not to do graphic design, where everything in the demo is intentionally terrible.
The obvious problem is the data is obfuscated. Does the “bar” end at the right of the square bar, the right of the number bubble, or the right of the arrowhead?
The colors do not have enough contrast. Too hard to distinguish among them. The colors might be fine for a user interface, but the data needs to come first in a chart and these colors make harder to tell the bars apart.
The font size varies too much. Why is the point of the chart “Favors Expressive” so small? Why is the age label so small?
This chart is what we’d call “not customer ready” at my company.
Also, the kid who put this together apparently believes that no one ever lives over the age of 64, or if any such person exists, they won’t be using a computer or are otherwise irrelevant.
I hope it doesn’t come to take over all the Android phones…
