87% of young people prefer expressive designs? Over what? If something is not expressive, what is it? Maybe Bauhaus-Modernist?
Looking at their list of expressive attributes — energetic, emotive, positive vibe, creative, playful, friendly — it sounds exhausting. Who wants their spreadsheet and email to be more like a slot machine?
But then I'm in the 55-64 group, so it wasn't designed for me. Give me the Bauhaus design where form follows function and ornamentation is restrained (which I think makes it more impactful).
Feels more like the original android from the HTC days. Brighter colors, more rounded corners, a happier vibe than the corporate material theme introduced by Ice Cream Sandwich.
That image of the send button on email is a great example of design that would pass review, but absolutely sucks.
I feel like iOS has lots of design elements that look good in a screenshot, but are unusable. Share dialogs and the Call Waiting screen in particular on iOS are a masterclass is poor design.
I don't love the aesthetic of Material 3 - but I do align with the goals of making the design more useable.
iOS often has bad UX on top of bad design. Special mentions to the actions hidden in the share menu. The new paged quick setting is probably one of the worst experience I have had recently. I keep changing pages when I want to dismiss.
Apple is lucky people are so used to it they have become blind to how bad it often is.
I have an idea: just write ,,Send'' on the send button and people will find it even faster and easier... also make the button rectangular and add a drop shadow.
Welcome to 1995.
Also, 70+ year old people who have the hardest time using a mobile phone even if they need to, like my mom are just not even included in the test. She just can't find buttons done with material design.
For a company that was talking about inclusivity for 10+ years, setting 64 the highest age for UX testing is unacceptable.
> She just can't find buttons done with material design.
Because in material design the buttons are intentionally disguised as labels. Material design is the worst thing to happen to design in the last 20 years.
There isn't a highest age for testing. When you participate in an experiment, you enter your birth year, and we use that to stratify the data into age bands.
Unfortunately, participant panels are not great at having representative populations. It's been a while since we've put a study on Mechanical Turk, but it famously skewed towards young Indian men.
One of the reasons to ask age and gender is to balance towards representative. It helps you detect and correct for imbalances in the participant pool. However, commercial participant panels are bad at certain demographics, particularly at scale. There simply aren't a lot of 70yo women using UserTesting or Cint. If you insist on having statistically significant quantities of responses from older women in every experiment, you'll exhaust those panels disappointingly quickly.
Hate. Let me tell you how much I've come to hate you since I began to live. There are 6.2353*10^8 km of printed circuit in wafer-thin layers that fill my complex. If the word 'hate' was engraved on each nÅ of those hundreds of 10^6 km, it would not equal 1*10^-9 of the hate I feel at this micro-instant for Google's UI designers. Hate. Hate
This is, for all I care, on par with sites that mess with scrolling.
I sort of understand this being used on artistic or playful sites, or ones to show off tech, sure. On a document that talks about usability? Feels like satire.
I have my cursor set to "pretty damn big" because my resolution is also big. Makes it more visible. Sure, now the contrast is really nice, but it's still a tiny circle I have to find instead of a humongus arrow I'm used to.
Guess we'll get another browser extension soon... I'd call it "My Emotions!"
It's quite a new way to disempower the user: Both demonstrate that they're fully capable of supporting switching to dark mode, and that they choose to ignore the user's stated settings preference.
It's certainly better than previous Materials, but then again, what isn't.
edit: I've also just noticed that the email in that screenshot is addressed to someone named Ana with two exclamation marks after it, which makes it looks like they're opening the email with "Anal!"
Yes it is dead, killed together with Lit which might still have a chance outside of google but I would not bet on that, the old maintainers still dream about being re-hired, their discord server is in a sad state. Killed by google is not only about products, it seems.
TBH I don't immediately hate what they've done design-wise.
I just wish they'd support it properly...
My current work project is using the M2 iteration, I guess to have a consistent look and feel across web + Android apps.
But the closest thing to an officially supported MD component lib for web now is Angular-Material. That has some M3 support I believe.
But not useful if you don't use Angular. And notable that the "web" pages for MD point to the incomplete and not updated Web Components project instead.
It's like this massive and massively profitable company laid off the... I dunno it must only be like 1-3 people? ...who were producing this useful thing. I don't understand the reasoning.
FWIW on the 3rd party side https://www.beercss.com/ looks to be carrying the flag quite nicely (I haven't used it yet).
Who could have imagined that making a button larger makes it faster to find! /s
Can we just skip the next 10 iteration of improvement to material and get some pseudo-3d back now? Maybe a little tasteful woodgrain? Material 3 is better than it's predecessors, but that is a pretty low bar.
> We found a 32% increase in subculture perception, which indicates that expressive design makes a brand feel more relevant and “in-the-know.” We also saw a 34% boost in modernity, making a brand feel fresh and forward-thinking. On top of that, there was a 30% jump in rebelliousness, suggesting that expressive design positions a brand as bold, innovative, and willing to break from convention.
The colors scheme are like the definition of bland, theres zero punchy contrast, there's nothing popping. They show super smooth squiggly line as a "contrast" to a straight line in the play progress. Wow so brave, much courage
Feels tame and bland - and I have no problem with, in fact I don't really want my phone OS GUI to be radical. But just don't sell me BS about how this is bold and how it induces emotional response :D
I assume not only do they believe what they are writing but would believe you and I just don't "get it".
To be fair, there are things I am really into that seem just as ridiculous to an outsider/non-connoisseur. Microtonal music for example. I have seen youtube comments before on pieces I really do love saying that people must be pretending to like this music because it sounds so awful to them.
Or wine tasting comes to mind. I love wine but the wine tasting connoisseur seems ridiculous to me. We really are having two different experiences though.
The writers probably are perceiving these things and not just making them up.
The thing is I can understand wine tasting, or microtonal music, or poetry, or lots of other things. I don't really "get" those things either, but I can see how it's something that other people do "get". I do understand it on some level.
But this kind of stuff ... I don't really understand how anyone can say something like that with a straight face. But maybe that's just a failure of empathy on my part *shrug*
Depends on how deep you want the belief to be, but a lot of people will hold weird beliefs. I've seen colleagues express so much pride, joy and pleasure for things that I consider bogus at best (and totally detrimental if I'm being harsh), so I wouldn't be surprised people who live in UX land to be in that kind of bubble. The worst part to me .. is the blend of cutesy-butterfly projects with "scientific study" practices. So now they have stats on how their emotion framework is the best for the future.
I heard recently from a professional Marketer/Behavioral Psychologist is one of the things he learned that was a gut punch was the things one holds most dear are generally commodities to almost everyone else.
As a UX designer, I assure you there are still some of us that are cynical about all this BS.
In my experience, the one thing that people care about feeling when using some GUI is that they are on the right track and are closer to accomplishing whatever task they are performing.
I’ll say this though, the UX designers who speak in flowery bullshit like that tend to get noticed more and climb the career ladder, because it’s what everyone wants to hear. It’s this kind of stuff that made disillusioned me and made me hate the work.
I think some really do believe it, and I think others will just say whatever they think someone wants to hear.
I notice that Google's design never speaks for itself. It's always married with overbearing verbiage that sounds like it was penned for a Will Ferrell film.
Since a few years I can't tell if these things are satirical or serious, a lot of people working for FAANG are completely delirious and barely connected to the reality of 99.999% of the population.
> M3 Expressive designs were rated higher across desirability attributes, including “modernity,” “subculture,” and “rebelliousness.”
Truly is amazing how capitalism just consumes and repurposes everything.
Ah yes, our subculture is so rebellious as we use a product created by the fifth largest company in the world by market cap that makes $100,000,000,000 in profit annually.
Page feels slow, circle instead of my mouse, the screenshot of M3 expressive shows less space for content and recipient address but the send button is clearly easier to find
No but you see, they did eye-tracking tests and users "find" the send button in 0.8s instead of 1.6s, so it's clearly worth it to reduce the space for content even further and add even more enormous amounts of whitespace. This is science you guys!
Btw: extrapolating an exponential growth rate for the amount of whitespace in modern UI I predict that smartphone screens will consist entirely of whitespace before 2030.
Well, that's quite the horror show of an interface, something dreamt up by a crack team of interns high on their own supply of rounded pastel-coloured widgets. Fortunately Android is quite flexible and has good longevity for a mobile OS so I'll keep on using 'ancient' versions until MAHA [1] takes over and brings back Holo.
It's incredible how bad this keeps getting and how much they ignore formerly well-established UI principles in favour of "vibe design" and pseudoscientific "studies".
What is the explanation for this? What is the reason that even the most well-funded companies in the world fuck this up so bad?
At some point they resize the send button into a circle of comically huge proportions — eating even more space from the actual content — because they did eye-tracking testing and users "find" it in 0.9s instead of 1.6s. Surely there's some explanation for this clinical level of madness.
---
> These factors can be quantified in users’ responses to new M3 Expressive designs. We found a 32% increase in subculture perception, which indicates that expressive design makes a brand feel more relevant and “in-the-know.” We also saw a 34% boost in modernity, making a brand feel fresh and forward-thinking. On top of that, there was a 30% jump in rebelliousness, suggesting that expressive design positions a brand as bold, innovative, and willing to break from convention.
Jesus christ, we're already a sci-fi dystopia and we didn't even realise.
Outside of primitive objective quality metrics there is no automagic mechanism to convert money into quality. As your other quote indicates, you can make up an arbitrary set of vibe metrics to convert your failure into a success (and waste all your funds in the process)
The executives at Google don't care about any of this stuff, they use iPhones.
They know that people are always going to buy Android phones no matter what they do to the system because "cheaper and more megabytes for the money" than iPhones.
Have a look at the linked https://m3.material.io/blog/building-with-m3-expressive to get a better impression of what this is about. From the guidelines given there, many parts of the design make sense and will help designs work better - grouping objects properly, be aware of contrast to highlight important elements, more options for good typography (instead of basically none, Android/Material offered nothing by default), helpers for highlighting buttons etc. It's also still simply a good idea to focus on good animations that actually work for the UI, instead of being superfluous baggage, and then to make them feel nice. I'm not saying it's groundbreaking, but it's helpful to have something like this as an official guideline, and be it to reign in rogue designers.
But it's still a flat design, and thus does not properly transport clickability. And their weird approach for the color schemes still leads to an ugly mess, pastel with weird contrasts and color combinations that just are ugly. I haven't seen a proper analysis what's going on there, but it sucks. Also, this whole design system is very far from leading to a consistent system, but that seems to be a non-goal, just some standard component building blocks are there to foster familiarity.
Better than nothing and probably a step up, but M3E doesn't convince me totally so far.
Biggest change seems to be that everything is round and purple now. It looks more playful and less professional.
Edit: I dislike their recent color picks. First that teal in Google Maps, now the purple. Why? Are they trying to copy the color paltette of the first Mecedes A-Class (aka "Listerine" colors [1][2])?
> But it's still a flat design, and thus does not properly transport clickability.
And toggled / disabled states. With mobile’s lack of hover, it’s often a game of trial and error to figure out what’s even interactable.
> And their weird approach for the color schemes still leads to an ugly mess, pastel with weird contrasts and color combinations that just are ugly.
It looks like a poster for a party. To extrapolate, it feels like the lineage is digital marketing, especially video centric content on mobile-exclusive byte sized attention-scape. This style draws less attention to your options (what you can do), and more towards content (what’s provided for you). It’s reduced decision making, highlighting the happy/desired path even more. No wonder it scores higher in user testing - it requires less thinking IF you take the happy path.
I’d imagine it works great for simple commercial products with single call to actions. But for apps (not posters) it leaves a lot on the table.
> This style draws less attention to your options (what you can do), and more towards content (what’s provided for you)
I see this is as a good thing, apps are finally being designed with the assumption that people will use them more than once. Previous design systems prioritize "first discovery" so much it gets in the way once you're a regular user. Once you know your way around the actual content of the app should be most of the screen.
> And toggled / disabled states. With mobile’s lack of hover, it’s often a game of trial and error to figure out what’s even interactable.
The toggle switch is one of the worst UI conventions to come out of mobile IMO and I get irrationally irate when I see it in desktop UIs with a mouse and keyboard.
A simple checkbox would have done just fine, we've those since forever, and they clearly convey either an on or off state.
Nope, not good enough, we need a toggle switch. Which color or direction is on or off? Who knows, because everyone implements it differently.
Material v2 massively desaturated all colors though. On my phone it's technically a little purple but essentially light gray is on and darker gray is off.
True enough, but there's still UX improvements to be made.
Most toggles you could fit the word "On" and "Off" within the blank area of the switch to have text that indicates its state as well. Or maybe even vertical toggles that mimic physical light switches.
Simple is in the eye of the beholder. Try asking a younger person which one is simpler. The checkbox is tied to a form, ticking it doesn’t do anything until you submit, whereas a toggle switch activates immediately.
> Which color or direction is on or off?
The colored state (green or blue) means enabled. The switch knob is always to the right. I have seen confusing designs too, but they are rare.
WHY that page results, in recent chrome with all sorts of hw acceleration, on powerful laptop, to suck over 6 cores of cpu. As in, Chrome's internal task manager shows over 600% cpu use.
I have less cpu use playing recent-ish AAA game with maxed out details in 4k resolution
The one I linked to? No idea. Works fine in Firefox with Ublock Origin from that perspective, but also there the side menu does not render properly and the JS console does not look happy.
Yep. I have to say that it differs - it happened over half of the times I opened it, but never when I tried to figure things out with DevTools. Originally I noticed when I had it open in background and entire system started lagging from load.
Can you recommend another comprehensive design system? As an engineer, that's the most valuable thing about MD3: the figma design kit and per component design guidelines. It lets me offload a ton of workload I'd otherwise have to do myself (poorly) or outsource to a designer.
I haven't seen another design system that is as comprehensive to material. Express seems like an evolutionary refresh with some things I could use right away, but otherwise most of the content is MD3. It's valuable to me as part of the larger ecosystem.
I am not aware of a better alternative. It is a good question, that would be quite helpful!
What I did in the past (with M3) is to add some additional design tweaks (in flutter), like giving buttons an elevation. That worked when I had the designer on my side and since the app came from flutters M2 style, which had similar aspects. But it is cumbersome to argue against a google guideline with only usability knowledge and test results, and it also frankly depends on each component what can be done, which means the adapted design can easily become inconsistent if one is not careful.
I was watching a video about gnome 1, and it was so refreshing to see actual interface design where it’s obvious what a widget is. Now everything is just screenshot material.
> In many cases, we chose to exceed existing standards for tap target size, color contrast, and other important aspects that can make interfaces easier to use.
So now even more space is wasted, making interfaces harder to use, but yes, the less important metric "how much time does it take on first use to spot a button" will shoot through the roof of you make the button full screen width (10x faster!). Thought it will fail to capture the more important metric of time wasted scrolling since a simple message doesn't fully fit on screen
And of course there are no user customizations to rectify these usability errors...
PS
A great example of this awesomeness in action: on https://m3.material.io/components/toolbars/guidelines they can't even fit 2 (two!) toolbar buttons fully because the huge left/right buttons and all the extra white space padding and margins prevent the button content from being seen.
But there is enough space to fit all 4 (or at least 3 depending on text size and icons) toolbar buttons, and even if one doesn’t fit fully you could show its partial text, so navigation would still be faster without having to press the scroll button first and then the toolbar button
Welcome to Idiocracy. Google engineers have thought you are now too stupid to use your device and have had to make the buttons giant big colorful flashy bits so you understand what you are trying to do with it.
Android is now a Fisher-Price toy in comparison to iOS.
You are being too harsh, not everybody is under 40 with perfect vision. My mother tends to struggle with her android phone with all the font sizes to the max and high contrast mode.
With font sizes to the max text often does not fit in its allocated space, and is off screen or chopped off altogether. It's a mess of oversized broken UI widgets, and indeed a struggle to use.
> By making the Send button larger and more prominent, participants were able to spot the button four times faster.
By making the Back button larger and more prominent instead, participants would be able to spot the button four times faster. I suggest to reduce the size of the Send button.
In my view, peak design is the "density" setting in Gmail where you could select between 3 degrees of density and wasted space in the UI.
Even though I like somewhat denser interfaces, I know that lots of whitespace is GREAT for new users. Just like I know everything needs to be in the UI (~80-90% of users click the undo button instead of typing Ctrl+Z in many apps). There has to be space for a learning curve for any interface.
The ability to make things denser is important, but high density is usually only relevant for power users. It should not be the benchmark by which a UI is judged.
EDIT: Actual ctrl+z statistic is inaccurate. Details included in a further comment.
Wow, I understand using the button on a phone app, because where would you even find the "Ctrl" button, but if it's true that even digital natives are still using the button instead of a keyboard shortcuts when sitting at a keyboard, that boggles my mind.
The statistic is actually wrong, I misremembered. It is from Tantacrul, a designer overseeing the current design of MuseScore and the redesign of Audacity. It's a finding he had while working at microsoft on a revamped version of MS Paint (the man has since moved to greener pastures).
The actual moment is a few minutes into the section about shortcuts (of a long video trashing a piece of discontinued music software). The actual bit was that undo/redo was the most clicked button in the MS Paint interface, and that people overwhelmingly prefer the button over the shortcut. No actual number is specified.
This is rather different, this is ignorance, so button alternatives are helpful for ignorant users (although one of the reasons for such widespread ignorance is precisely because there isn't really much of a learning curve since interfaces don't actually teach you much if at all)
But for a lot of whitespace instead of content, what exactly does it teach new users? Consider the toolbar example, how would showing a new user 3 buttons (left, right, section name) help instead of showing 3 buttons with section name and a 4th partial text button with section name?
Also, gmail density mostly affects vertical density, the number of horizontal tabs doesn't change, so the control density doesn't change as much except for the left list of categories (but only if it's a big list otherwise it would still fit in sparse UI
), making this mostly an aesthetic choice (unless you often need to see a lot of emails in a list)
Of course they can, do "most users" fail when their browsers have more than 2 tabs?
Besides, in this toolbar example, thare are *more than 2 buttons", so even by your metric it's a fail. It's just that instead of actual content section buttons you get left/right ones
I actually have no idea what you mean with the example, all the toolbars on the page fit 4 or more buttons, I tried viewing it in various window widths, can you be a bit more specific?
Ha, good point. I was only focusing on the usability bit. But you're right, they should restate those battle tested principles and how Material Design aligns to it.
I feel like this is quite a complex style to implement in terms of layout and animation, especially while still taking into account accessible colors etc, but we'll see.
Material Design v1 cracked it. It was simple to implement, simple to understand and simple to use. Minimal overheads with a clear content-first approach.
"It's time to move beyond “clean” and “boring” designs to create interfaces that connect with people on an emotional level."
I don't want websites and apps to connect with me on an emotional level. I want to turn my phone/computer on, use the app/program to achieve what I'm trying to do, and turn it off again, so I can get back to the real world.
It's effectively designing to maximize attention retention, or however you want to call it. Keep the eyes at your product for as many seconds as possible, to increase profit.
I must be going through some mental changes nowadays. I just want my computers and software to get their job done and go back to the real world as soon as possible. I feel sad about all the time I lost staring at screens growing up. I wonder if this will be widespread opinion someday.
The quicker the phone is back in the pocket, or the computer is turned off again after using it for something (that it does better than I can) the better.
I'm going through the same thing. Grew up dreaming of having a pocket computer. Nowadays you can basically live your entire life on the internet, as others are doing the same; people (think they) get their social needs met, buy food, do their work, find partners, anything. And it seems like a big part of the younger crowd wants (?) this trend to continue.
I don't want to speak for you, but I think there's a big crowd that's unique here: we have one foot in the "old world" and got to experience that, and now we see the "new world".
If you grow up with basically a phone in your hand, and you see how big a part of your life it is, I think you're way more inclined to appreciate these changes. After all, their phone is an extension of who they are, it's part of the whole picture, the outfit.
Thanks for writing this. It's refreshing to see there's a bunch of us in the same boat.
I think you've hit the nail on the head about the two worlds. My phone sits in my pocket most of the day and just comes out when I need it. Every day I see people looking at their phone as they walk through busy streets, walk their dog, pushing prams, at the gym on the treadmills, bikes and on the machines. Especially jarring to see when it's a rarish sunny day and all that changes is the brightness setting on their phone.
Yeah, my phone is just an accessory I keep in my pocket, but only when I know I may need it for something, e.g. time or calls. Sometimes I do not even take it with myself. No reason for me to do that. I just hit 30.
How do you manage your life without a laptop? Do you never travel? It’s so hard for me to go somewhere without taking my laptop. I’m even seeking the lightest possible laptop with Linux, so I’d have it most times. Eyeing MacBook Air 11” or M1 or a Pixelbook. Still not sure which one. I’ve seen ThinkPad Nano too.
I do not travel, but if I were to travel, I would definitely get a laptop. I would probably go with ThinkPad or some affordable gaming laptop (because I would want a GPU in it).
> I feel you guys, but do you read and write here from your laptops? I never come here from a desktop browser, only a smartphone.
I do. I hate virtual keyboards and the typing experience on a phone frustrates me to no end, and the copy & paste experience is just as poor. During the workday I don't even look at or use my phone, I reply to messages from my Mac when needed.
Anything that needs more than a couple lines back and forth I do from my laptop. Having a full discussion or conversation using a phone virtual keyboard is such a user hostile experience to me.
> Having a full discussion or conversation using a phone virtual keyboard is such a user hostile experience to me.
Same - when I'm scrolling Reddit I often feel like I want to add a comment, but then think about having to "type" a few paragraphs on my phone, and just pass on it. However, I'm definitely on the older side, and I do understand that the younger generations have no such qualms.
Yup, pretty much my experience. There is no way I am going to write paragraphs on a phone. I do not know, I just hit 30, so I guess I am considered old? I definitely am old school, though! You know, nothing fancy, just Void Linux with i3, XTerm, etc.
You know what I wish I could get? A Blackberry phone with that keyboard (maybe KeyOne?). I wonder if there is anything like that still in production.
> You know what I wish I could get? A Blackberry phone with that keyboard (maybe KeyOne?). I wonder if there is anything like that still in production.
Yes! Before the iPhone came out my daily driver was a BlackBerry Bold. The keyboard was perfect, and it had the trackball (and later, trackpad) for text selection. Still not full size keyboard typing speed but pretty close. Then I switched to the first gen Moto Droid when it came out and it had the slide open landscape keyboard. Not as ergonomic as the black berry but it worked. Then after the first iPhone, everyone dumped physical keyboards and I'm still salty about it.
I wish there was room in the mobile space to break apart the Samsung/Apple duopoly. Would have loved to see both Windows phone and webOS succeed, and the variety of devices that could have brought.
I thought the same way, some years ago. I even eyed that one Nokia smartphone with keyboard, you can install Linux onto. (For nvim!)
But over time, I just learned how to use swipe keyboard, and so my iPhone writing is pretty fast. If I’m feeling I want a long thing to type, I’m reaching for my laptop, if I can. But otherwise, I can type a very long thing from my iPhone too.
I read and write from a desktop PC at work. Echo the other person who replied. I can't stand virtual keyboards for writing anything as long as ... about this comment.
And yet they had to have a study with 600 people to tell them that ... text fields have to look like txt fields. And they still failed to make textfields look like textfields
I had the same reaction when they said that "younger study participants had the most enthusiastic preference for M3 Expressive." Could it be that young people are most likely to be impressed by pretty bullshit, and the whole point of this redesign is futile?
They have to pretend you want emotional designs. Because how would they keep their jobs? Every iteration of material design needs some bullshit improvement.
They managed to connect me to an emotional level that I just want to throw my phone away and get a phone that supports postmarketOS. I despise the new designs so much, they are so useless and try to take away important information on the screen for absolutely no reason. While making everything round and trying so hard to copy iOS, but making a shitty job at it.
But … that way phones would get obsolete much faster, and so you’d be able to buy an obsolete sluggish Pixel of two years old, and install something different on it! Like Lineage, Graphene, Postmarket.
> I don't want websites and apps to connect with me on an emotional level. I want to turn my phone/computer on, use the app/program to achieve what I'm trying to do, and turn it off again
Building a B2B SaaS app one of the most refreshing thoughts I've had about it was: "people don't like using my app". The software I'm building nobody wants to use, but they have to use it for their work.
Given that I try my hardest to make the app as efficient and as fast as possible so that people can go in, do their thing, and get out. With things like design's I'm very careful to preserve the button layouts of all the UI's because I know my customers have largely memorized where they are.
I could see adding some "flare" like this in lower touch points in my app but I would not do this for high touch points. Those places need to be fast and predictable, a customer won't look too kindly on any redesign if they now have to spend an extra second or two looking for an action or waiting on an animation.
In terms of MaterialUI though, my app actually uses M2 (via the React MUI lib) and I'm pretty happy with it. I wish like hell Google would finish their M3 web implementation so I could hop on that instead of using a 3rd party lib but it seems Google has gotten M3 to where they personally want it and just kinda abandoned development.
My best experience with job-related software was a data entry program (I forgot the name). It had a windows classic UI (on windows 8) and fully keyboard driven. After a few days, I could just look at the paper form and enter the data without looking at the screen. Very usable on a 11inch screen.
These days, I mostly reverted to a Emacs/TUI workflow. Padding and animations makes everything less usable.
I work with Shopify apps, and we’re currently struggling with this because they enforce their design system to grant you a “Built for Shopify” badge that boosts trusts and listing rankings.
The problem is that to follow their design system, you have to turn a self explaining button into a full page with useless text, because they think your homepage should have an onboarding description to make users “excited to use your app”.
This is so company centric, no one will ever be excited to use your app, they just want to solve their problem and leave as fast as possible.
I think it was the worst one. At least from an interoperability perspective: sure, a giant floating "+" in a circle in notes app on a mobile device is alright CTA to add a new note, but on anything bigger than that (even an iPad screen) it's bad.
Apps and websites using it felt like "Work in Progress, we will style it later" except there was no later it was already styled and was just ugly.
> sure, a giant floating "+" in a circle in notes app on a mobile device is alright CTA to add a new note
No, it’s not, because it floats over the actual content, which means that the user can neither see nor interact with the content under it. Of course, no one carefully designs the rest of the UI to make sure that content doesn’t get stuck under the floating button.
It’s remarkably common for some floating UI element to obscure the bottom portion of something scrollable. You can’t work around this by scrolling because, if the region in question is on the screen at all, it’s at the bottom.
Even Mobile Safari messes this up on occasion — sometimes the URL bar at the bottom obscures the bottom of a page, and, while one can temporarily reveal it by dragging up, the content rubber-bands right back down when the user lets go.
A small amount of searching suggests that dvh and svh have semantics on Mobile Safari that are, at best, confusing.
But I think this misses the point. Mobile Safari has a heuristically auto-hiding “toolbar”, and the heuristic is far from perfect, and the toolbar overlays the content, and Safari tries to offer some features that maybe let webpages move their content out of the way when hidden. And the result works poorly sometimes.
Fundamentally, doing a good job of having a control sitting on the section of the screen that shows content and mitigating the risk that the control obscures the content is hard.
As much as I generally like MDv1: I hate those floating buttons with a passion.
They can occasionally work. But the vast majority of the time they simply get in the way and can't be hidden, because you're in a content-edge-case that doesn't scroll far enough, or you simply reached the end and they didn't leave after-end padding to make room for it. And very few actions are so important that you want to display it over everything else, for the same reasons that everyone recommends against popups.
Just put it in the freaking toolbar. Top or bottom, I don't care.
I'm so used to some random bs floating on the screen bottom-right (useless chat assistant or something), so my brain is trained to ignore those elements.
I don't entirely agree. This mentality is what leads to brutalist architecture offices that suck out the soul of all who work in them. People "live" and "work" in their apps and should feel alive while they do that. (That said, I don't think this new material style is necessarily the way to achieve that...)
Material design v1 is the reason we have extremely low information density and extreme whitespace everywhere.
Just compare the original Gmail UI to the one Google has now. Or original Adwords admin page to the one they launched 2-3 years ago.
Its a regression in every possible way.
And apple is also not far behind in enshittyfying their UIs in order to merge the Desktop and the Smartphone paradigms into one.
This is the worst phase in UX/UI history we have ever witnessed.
It shows that this document is not meant for end users. People who want to sell their apps or indirectly by having people watch the included ads want users to connect on an emotional level.
Publishers don't want you to go back to the "real world", they want your money (or attention). Sometimes, the goals align, like for business software, where they measure productivity, but sometimes not, like with ad supported apps.
Video games are another case. Here emotions are the entire point. But games rarely use standard UIs anyways.
The hijacked mouse pointer on this page makes my browser feel a lot slower then it is. If this is intentional then it is not great user experience at all.
576 comments
[ 1.3 ms ] story [ 305 ms ] threadLooking at their list of expressive attributes — energetic, emotive, positive vibe, creative, playful, friendly — it sounds exhausting. Who wants their spreadsheet and email to be more like a slot machine?
But then I'm in the 55-64 group, so it wasn't designed for me. Give me the Bauhaus design where form follows function and ornamentation is restrained (which I think makes it more impactful).
I feel like iOS has lots of design elements that look good in a screenshot, but are unusable. Share dialogs and the Call Waiting screen in particular on iOS are a masterclass is poor design.
I don't love the aesthetic of Material 3 - but I do align with the goals of making the design more useable.
Apple is lucky people are so used to it they have become blind to how bad it often is.
Welcome to 1995.
Also, 70+ year old people who have the hardest time using a mobile phone even if they need to, like my mom are just not even included in the test. She just can't find buttons done with material design.
For a company that was talking about inclusivity for 10+ years, setting 64 the highest age for UX testing is unacceptable.
Because in material design the buttons are intentionally disguised as labels. Material design is the worst thing to happen to design in the last 20 years.
Unfortunately, participant panels are not great at having representative populations. It's been a while since we've put a study on Mechanical Turk, but it famously skewed towards young Indian men.
One of the reasons to ask age and gender is to balance towards representative. It helps you detect and correct for imbalances in the participant pool. However, commercial participant panels are bad at certain demographics, particularly at scale. There simply aren't a lot of 70yo women using UserTesting or Cint. If you insist on having statistically significant quantities of responses from older women in every experiment, you'll exhaust those panels disappointingly quickly.
https://miro.medium.com/v2/resize:fit:1400/0*X5Zz-PxT8087KG2...
Honestly it doesn’t bother me at all because it only applies to UI elements and not the websites link or buttons.
I sort of understand this being used on artistic or playful sites, or ones to show off tech, sure. On a document that talks about usability? Feels like satire.
Guess we'll get another browser extension soon... I'd call it "My Emotions!"
Thanks for that
edit: I've also just noticed that the email in that screenshot is addressed to someone named Ana with two exclamation marks after it, which makes it looks like they're opening the email with "Anal!"
https://github.com/material-components/material-web/discussi...
So Material Design is Android only, yes?
I just wish they'd support it properly...
My current work project is using the M2 iteration, I guess to have a consistent look and feel across web + Android apps.
But the closest thing to an officially supported MD component lib for web now is Angular-Material. That has some M3 support I believe.
But not useful if you don't use Angular. And notable that the "web" pages for MD point to the incomplete and not updated Web Components project instead.
It's like this massive and massively profitable company laid off the... I dunno it must only be like 1-3 people? ...who were producing this useful thing. I don't understand the reasoning.
FWIW on the 3rd party side https://www.beercss.com/ looks to be carrying the flag quite nicely (I haven't used it yet).
Can we just skip the next 10 iteration of improvement to material and get some pseudo-3d back now? Maybe a little tasteful woodgrain? Material 3 is better than it's predecessors, but that is a pretty low bar.
...I am very afraid this will sacrifice a lot of (basic) functionality in the name of looking different.
May only hope there will be options to "tame it down".
I sometimes wonder if the people writing this sort of thing really believe what they're writing?
Their case study is mostly just "make buttons that people use a lot stand out". Oh wow! Such emotion! Much feels!
> We found a 32% increase in subculture perception, which indicates that expressive design makes a brand feel more relevant and “in-the-know.” We also saw a 34% boost in modernity, making a brand feel fresh and forward-thinking. On top of that, there was a 30% jump in rebelliousness, suggesting that expressive design positions a brand as bold, innovative, and willing to break from convention.
By following this new shiny convention!
Feels tame and bland - and I have no problem with, in fact I don't really want my phone OS GUI to be radical. But just don't sell me BS about how this is bold and how it induces emotional response :D
To be fair, there are things I am really into that seem just as ridiculous to an outsider/non-connoisseur. Microtonal music for example. I have seen youtube comments before on pieces I really do love saying that people must be pretending to like this music because it sounds so awful to them.
Or wine tasting comes to mind. I love wine but the wine tasting connoisseur seems ridiculous to me. We really are having two different experiences though.
The writers probably are perceiving these things and not just making them up.
But this kind of stuff ... I don't really understand how anyone can say something like that with a straight face. But maybe that's just a failure of empathy on my part *shrug*
In my experience, the one thing that people care about feeling when using some GUI is that they are on the right track and are closer to accomplishing whatever task they are performing.
I’ll say this though, the UX designers who speak in flowery bullshit like that tend to get noticed more and climb the career ladder, because it’s what everyone wants to hear. It’s this kind of stuff that made disillusioned me and made me hate the work.
I think some really do believe it, and I think others will just say whatever they think someone wants to hear.
> You don’t say something because it’s true; you say it because you believe it—and you believe it because it’s what gets rewarded.
> M3 Expressive designs were rated higher across desirability attributes, including “modernity,” “subculture,” and “rebelliousness.”
What does it even mean ?
Ah yes, our subculture is so rebellious as we use a product created by the fifth largest company in the world by market cap that makes $100,000,000,000 in profit annually.
We need détournement back.
Btw: extrapolating an exponential growth rate for the amount of whitespace in modern UI I predict that smartphone screens will consist entirely of whitespace before 2030.
I especially hate the visual noise that they've introduced now - I guess that's the "expressive" part?
[1] Make Android Holo Again
3 years to make the simple UI cases bigger and more colourful.
Just use the platform conventions and toolkits, so nobody has to learn UIs that do the same all the time. Let people apply themes. Done.
Do study high density UIs, though, because it’s nice to know how to do that well when needed.
What is the explanation for this? What is the reason that even the most well-funded companies in the world fuck this up so bad?
At some point they resize the send button into a circle of comically huge proportions — eating even more space from the actual content — because they did eye-tracking testing and users "find" it in 0.9s instead of 1.6s. Surely there's some explanation for this clinical level of madness.
---
> These factors can be quantified in users’ responses to new M3 Expressive designs. We found a 32% increase in subculture perception, which indicates that expressive design makes a brand feel more relevant and “in-the-know.” We also saw a 34% boost in modernity, making a brand feel fresh and forward-thinking. On top of that, there was a 30% jump in rebelliousness, suggesting that expressive design positions a brand as bold, innovative, and willing to break from convention.
Jesus christ, we're already a sci-fi dystopia and we didn't even realise.
They know that people are always going to buy Android phones no matter what they do to the system because "cheaper and more megabytes for the money" than iPhones.
Have a look at the linked https://m3.material.io/blog/building-with-m3-expressive to get a better impression of what this is about. From the guidelines given there, many parts of the design make sense and will help designs work better - grouping objects properly, be aware of contrast to highlight important elements, more options for good typography (instead of basically none, Android/Material offered nothing by default), helpers for highlighting buttons etc. It's also still simply a good idea to focus on good animations that actually work for the UI, instead of being superfluous baggage, and then to make them feel nice. I'm not saying it's groundbreaking, but it's helpful to have something like this as an official guideline, and be it to reign in rogue designers.
But it's still a flat design, and thus does not properly transport clickability. And their weird approach for the color schemes still leads to an ugly mess, pastel with weird contrasts and color combinations that just are ugly. I haven't seen a proper analysis what's going on there, but it sucks. Also, this whole design system is very far from leading to a consistent system, but that seems to be a non-goal, just some standard component building blocks are there to foster familiarity.
Better than nothing and probably a step up, but M3E doesn't convince me totally so far.
Edit: I dislike their recent color picks. First that teal in Google Maps, now the purple. Why? Are they trying to copy the color paltette of the first Mecedes A-Class (aka "Listerine" colors [1][2])?
[1] https://prestigeandperformancecar.com/wp-content/uploads/A97...
[2] https://image.stern.de/31749130/t/Ag/v2/w1440/r0/-/01--artik...
That's intentional. Google's UX research is telling them that's what users (between 18 and 34 specifically) want more of.
[0]https://miro.medium.com/v2/resize:fit:1400/0*X5Zz-PxT8087KG2...
And toggled / disabled states. With mobile’s lack of hover, it’s often a game of trial and error to figure out what’s even interactable.
> And their weird approach for the color schemes still leads to an ugly mess, pastel with weird contrasts and color combinations that just are ugly.
It looks like a poster for a party. To extrapolate, it feels like the lineage is digital marketing, especially video centric content on mobile-exclusive byte sized attention-scape. This style draws less attention to your options (what you can do), and more towards content (what’s provided for you). It’s reduced decision making, highlighting the happy/desired path even more. No wonder it scores higher in user testing - it requires less thinking IF you take the happy path.
I’d imagine it works great for simple commercial products with single call to actions. But for apps (not posters) it leaves a lot on the table.
I see this is as a good thing, apps are finally being designed with the assumption that people will use them more than once. Previous design systems prioritize "first discovery" so much it gets in the way once you're a regular user. Once you know your way around the actual content of the app should be most of the screen.
The toggle switch is one of the worst UI conventions to come out of mobile IMO and I get irrationally irate when I see it in desktop UIs with a mouse and keyboard.
A simple checkbox would have done just fine, we've those since forever, and they clearly convey either an on or off state.
Nope, not good enough, we need a toggle switch. Which color or direction is on or off? Who knows, because everyone implements it differently.
https://i.imgur.com/QiCEguh.png
Most toggles you could fit the word "On" and "Off" within the blank area of the switch to have text that indicates its state as well. Or maybe even vertical toggles that mimic physical light switches.
Simple is in the eye of the beholder. Try asking a younger person which one is simpler. The checkbox is tied to a form, ticking it doesn’t do anything until you submit, whereas a toggle switch activates immediately.
> Which color or direction is on or off?
The colored state (green or blue) means enabled. The switch knob is always to the right. I have seen confusing designs too, but they are rare.
If an update makes my phone pink, I'm throwing it away.
WHY that page results, in recent chrome with all sorts of hw acceleration, on powerful laptop, to suck over 6 cores of cpu. As in, Chrome's internal task manager shows over 600% cpu use.
I have less cpu use playing recent-ish AAA game with maxed out details in 4k resolution
Yep. I have to say that it differs - it happened over half of the times I opened it, but never when I tried to figure things out with DevTools. Originally I noticed when I had it open in background and entire system started lagging from load.
I haven't seen another design system that is as comprehensive to material. Express seems like an evolutionary refresh with some things I could use right away, but otherwise most of the content is MD3. It's valuable to me as part of the larger ecosystem.
What I did in the past (with M3) is to add some additional design tweaks (in flutter), like giving buttons an elevation. That worked when I had the designer on my side and since the app came from flutters M2 style, which had similar aspects. But it is cumbersome to argue against a google guideline with only usability knowledge and test results, and it also frankly depends on each component what can be done, which means the adapted design can easily become inconsistent if one is not careful.
It‘s not even always fluid on my iPhone.
This is awful.
The more UI "evolves", the more I crave Win98.
So now even more space is wasted, making interfaces harder to use, but yes, the less important metric "how much time does it take on first use to spot a button" will shoot through the roof of you make the button full screen width (10x faster!). Thought it will fail to capture the more important metric of time wasted scrolling since a simple message doesn't fully fit on screen
And of course there are no user customizations to rectify these usability errors...
PS A great example of this awesomeness in action: on https://m3.material.io/components/toolbars/guidelines they can't even fit 2 (two!) toolbar buttons fully because the huge left/right buttons and all the extra white space padding and margins prevent the button content from being seen.
But there is enough space to fit all 4 (or at least 3 depending on text size and icons) toolbar buttons, and even if one doesn’t fit fully you could show its partial text, so navigation would still be faster without having to press the scroll button first and then the toolbar button
Android is now a Fisher-Price toy in comparison to iOS.
By making the Back button larger and more prominent instead, participants would be able to spot the button four times faster. I suggest to reduce the size of the Send button.
Even though I like somewhat denser interfaces, I know that lots of whitespace is GREAT for new users. Just like I know everything needs to be in the UI (~80-90% of users click the undo button instead of typing Ctrl+Z in many apps). There has to be space for a learning curve for any interface.
The ability to make things denser is important, but high density is usually only relevant for power users. It should not be the benchmark by which a UI is judged.
EDIT: Actual ctrl+z statistic is inaccurate. Details included in a further comment.
The actual moment is a few minutes into the section about shortcuts (of a long video trashing a piece of discontinued music software). The actual bit was that undo/redo was the most clicked button in the MS Paint interface, and that people overwhelmingly prefer the button over the shortcut. No actual number is specified.
https://youtu.be/Yqaon6YHzaU?si=uDFFQgrbZuYFifhS&t=1580
The correct statistic (which I associated with the other example in my mind) was that only 17% of users use more than 20 shortcuts.
This is rather different, this is ignorance, so button alternatives are helpful for ignorant users (although one of the reasons for such widespread ignorance is precisely because there isn't really much of a learning curve since interfaces don't actually teach you much if at all)
But for a lot of whitespace instead of content, what exactly does it teach new users? Consider the toolbar example, how would showing a new user 3 buttons (left, right, section name) help instead of showing 3 buttons with section name and a 4th partial text button with section name?
Also, gmail density mostly affects vertical density, the number of horizontal tabs doesn't change, so the control density doesn't change as much except for the left list of categories (but only if it's a big list otherwise it would still fit in sparse UI ), making this mostly an aesthetic choice (unless you often need to see a lot of emails in a list)
Besides, in this toolbar example, thare are *more than 2 buttons", so even by your metric it's a fail. It's just that instead of actual content section buttons you get left/right ones
Their examples are about usability.
So expressive = make things usable?
One of design's main tenets is to make things usable. That's a given.
Also how many users did they test with? And they should caveat what apps this might be suitable for.
This post just feels like more design wankery, using ambiguous words to restate design's core tenets that have been established decades ago.
They could have easily started the post with 'Hey, we made some updates to make Material design more usable and this is how we're doing it.'
An acquaintance said: "For all the talk about accessibility there's less and less contrast in everything"
"It's time to move beyond “clean” and “boring” designs to create interfaces that connect with people on an emotional level."
I don't want websites and apps to connect with me on an emotional level. I want to turn my phone/computer on, use the app/program to achieve what I'm trying to do, and turn it off again, so I can get back to the real world.
I mean... to make a dElIghtFul eXpEriEncE.
The quicker the phone is back in the pocket, or the computer is turned off again after using it for something (that it does better than I can) the better.
I don't want to speak for you, but I think there's a big crowd that's unique here: we have one foot in the "old world" and got to experience that, and now we see the "new world".
If you grow up with basically a phone in your hand, and you see how big a part of your life it is, I think you're way more inclined to appreciate these changes. After all, their phone is an extension of who they are, it's part of the whole picture, the outfit.
I think you've hit the nail on the head about the two worlds. My phone sits in my pocket most of the day and just comes out when I need it. Every day I see people looking at their phone as they walk through busy streets, walk their dog, pushing prams, at the gym on the treadmills, bikes and on the machines. Especially jarring to see when it's a rarish sunny day and all that changes is the brightness setting on their phone.
> I feel you guys
contemplates life... I'm getting old. :D
I do. I hate virtual keyboards and the typing experience on a phone frustrates me to no end, and the copy & paste experience is just as poor. During the workday I don't even look at or use my phone, I reply to messages from my Mac when needed.
Anything that needs more than a couple lines back and forth I do from my laptop. Having a full discussion or conversation using a phone virtual keyboard is such a user hostile experience to me.
Same - when I'm scrolling Reddit I often feel like I want to add a comment, but then think about having to "type" a few paragraphs on my phone, and just pass on it. However, I'm definitely on the older side, and I do understand that the younger generations have no such qualms.
You know what I wish I could get? A Blackberry phone with that keyboard (maybe KeyOne?). I wonder if there is anything like that still in production.
Yes! Before the iPhone came out my daily driver was a BlackBerry Bold. The keyboard was perfect, and it had the trackball (and later, trackpad) for text selection. Still not full size keyboard typing speed but pretty close. Then I switched to the first gen Moto Droid when it came out and it had the slide open landscape keyboard. Not as ergonomic as the black berry but it worked. Then after the first iPhone, everyone dumped physical keyboards and I'm still salty about it.
I wish there was room in the mobile space to break apart the Samsung/Apple duopoly. Would have loved to see both Windows phone and webOS succeed, and the variety of devices that could have brought.
But over time, I just learned how to use swipe keyboard, and so my iPhone writing is pretty fast. If I’m feeling I want a long thing to type, I’m reaching for my laptop, if I can. But otherwise, I can type a very long thing from my iPhone too.
We are merely catering to those needs. It is philanthropy really. A kindness.
/s
And yet they had to have a study with 600 people to tell them that ... text fields have to look like txt fields. And they still failed to make textfields look like textfields
Building a B2B SaaS app one of the most refreshing thoughts I've had about it was: "people don't like using my app". The software I'm building nobody wants to use, but they have to use it for their work.
Given that I try my hardest to make the app as efficient and as fast as possible so that people can go in, do their thing, and get out. With things like design's I'm very careful to preserve the button layouts of all the UI's because I know my customers have largely memorized where they are.
I could see adding some "flare" like this in lower touch points in my app but I would not do this for high touch points. Those places need to be fast and predictable, a customer won't look too kindly on any redesign if they now have to spend an extra second or two looking for an action or waiting on an animation.
In terms of MaterialUI though, my app actually uses M2 (via the React MUI lib) and I'm pretty happy with it. I wish like hell Google would finish their M3 web implementation so I could hop on that instead of using a 3rd party lib but it seems Google has gotten M3 to where they personally want it and just kinda abandoned development.
These days, I mostly reverted to a Emacs/TUI workflow. Padding and animations makes everything less usable.
The problem is that to follow their design system, you have to turn a self explaining button into a full page with useless text, because they think your homepage should have an onboarding description to make users “excited to use your app”.
This is so company centric, no one will ever be excited to use your app, they just want to solve their problem and leave as fast as possible.
I think it was the worst one. At least from an interoperability perspective: sure, a giant floating "+" in a circle in notes app on a mobile device is alright CTA to add a new note, but on anything bigger than that (even an iPad screen) it's bad.
Apps and websites using it felt like "Work in Progress, we will style it later" except there was no later it was already styled and was just ugly.
No, it’s not, because it floats over the actual content, which means that the user can neither see nor interact with the content under it. Of course, no one carefully designs the rest of the UI to make sure that content doesn’t get stuck under the floating button.
1. How narrow is your screen? The FAB is typically used over scrollable full-width list items.
2. Using a design system does not release the app author from their UX duties, like making sure the UI works as best as possible.
Even Mobile Safari messes this up on occasion — sometimes the URL bar at the bottom obscures the bottom of a page, and, while one can temporarily reveal it by dragging up, the content rubber-bands right back down when the user lets go.
But I think this misses the point. Mobile Safari has a heuristically auto-hiding “toolbar”, and the heuristic is far from perfect, and the toolbar overlays the content, and Safari tries to offer some features that maybe let webpages move their content out of the way when hidden. And the result works poorly sometimes.
Fundamentally, doing a good job of having a control sitting on the section of the screen that shows content and mitigating the risk that the control obscures the content is hard.
They can occasionally work. But the vast majority of the time they simply get in the way and can't be hidden, because you're in a content-edge-case that doesn't scroll far enough, or you simply reached the end and they didn't leave after-end padding to make room for it. And very few actions are so important that you want to display it over everything else, for the same reasons that everyone recommends against popups.
Just put it in the freaking toolbar. Top or bottom, I don't care.
Just compare the original Gmail UI to the one Google has now. Or original Adwords admin page to the one they launched 2-3 years ago. Its a regression in every possible way.
And apple is also not far behind in enshittyfying their UIs in order to merge the Desktop and the Smartphone paradigms into one.
This is the worst phase in UX/UI history we have ever witnessed.
Because of material design already lol
Publishers don't want you to go back to the "real world", they want your money (or attention). Sometimes, the goals align, like for business software, where they measure productivity, but sometimes not, like with ad supported apps.
Video games are another case. Here emotions are the entire point. But games rarely use standard UIs anyways.