remix logo

Hacker Remix

Material 3 Expressive

308 points by meetpateltech 3 days ago | 499 comments

diegof79 5 hours ago

As someone who works in UX, I admire all the work the Google UX team puts into Material: tons of documentation, UI kits, theme generation tools, a lot of thinking on systematizing the color combinations, etc.

However, this article has a lot of "Pepsi Logo" vibes (https://www.scribd.com/document/541500744/Pepsi-Arnell-02110...). I never confirmed if this was a hoax, but it was made into many news websites at the time.

Many design justifications they put on the page don't make much sense: yes, a big send button increases the metric of people finding the button, but it also takes space from the screen, and your daily phone UI is not a kiosk. "New users" become "experienced users", so the big button quickly becomes annoying. Even the M3 documentation site is terrible on mobile: the tab switch at the headers of some docs is so big that just two tabs don't fit into the screen.

By contrast, Apple, which is often praised for its product aesthetics, never makes marketing content like this about its design language. It may present creating emojis as a huge feature or inflate some of its claims a bit, but in general, they let the product do the talking.

thewebguyd 4 hours ago

> By contrast, Apple, which is often praised for its product aesthetics, never makes marketing content like this about its design language. It may present creating emojis as a huge feature or inflate some of its claims a bit, but in general, they let the product do the talking.

On top of that, when Apple makes a change or does a redesign, it's usually not overly disruptive (new macOS settings aside). The core functionality and layouts remain more or less the same, but it's just a new coat of paint. I still use my Mac the same way today, with the same keyboard shortcuts and workflow I did in 2006. Meanwhile, Windows has gone through no less than 5 total UI disruptions since then.

formerly_proven 3 hours ago

> it's usually not overly disruptive (new macOS settings aside). The core functionality and layouts remain more or less the same

ios 18 photos app?

dmix 1 hour ago

Similar to Settings app I think the Photos app was because they rewrote it in Swift.

thewebguyd 3 hours ago

True, even Apple has been slipping lately too, particularly with apps.

At least the core OS hasn't gone through a reinvention yet.

freeone3000 4 hours ago

But it has a 30% increase in the key attribute of “rebelliousness”!

kevincox 4 hours ago

Reeks of "we asked about 1000 attributes and took our favourite ones that happened to go up" despite those increases not being statistically significant.

overfeed 3 hours ago

> By contrast, Apple, which is often praised for its product aesthetics, never makes marketing content like this about its design language

I clearly remember the Jony-Ive-hagiography era, which I assume was organized by Apple PR/marketing. Perhaps it's more accurate to say Apple doesn't do this anymore.

Lammy 5 hours ago

> However, this article has a lot of "Pepsi Logo" vibes

So wildly successful that we're all still talking about it even though they don't even use that logo any more?

superb_dev 4 hours ago

I'm not sure we're talking about it because it was successful, I think we're talking about it because the design document for it was insane:

https://www.goldennumber.net/wp-content/uploads/pepsi-arnell...

neilv 4 hours ago

Which was a lot of work, to achieve the apt: https://www.utne.com/arts/new-pepsi-logo-is-a-joke/

Lammy 4 hours ago

What is the point of branding but to be remembered? It worked!

CharlesW 3 hours ago

Lammy 3 hours ago

I'm not talking about the company's effectiveness in selling sugar-water with the branding attached; I'm talking about the branding's effectiveness at being remembered. A person wants to criticize some unrelated UI design and the very first thing that comes to their mind is “lol this reminds me of The Gravitational Pull of Pepsi!!”. It will live forever.

jonahx 56 minutes ago

You're assuming the goal of the marketing is merely "to be remembered". But it's not. It's to be remembered in some positive way, or at least some way that still increases sales. This campaign will live forever as a laughing stock. That wasn't its intention.

fn-mote 23 minutes ago

Understood. But also “there’s no such thing as bad publicity.”

Scare quotes because obviously there is, but I don’t think this example crosses the line.

wpm 3 hours ago

Being infamous is not the same thing as being successful.

jamalaramala 11 hours ago

Oh my god, this is ugly as fuck.

It reminds me a study about the perception of beauty among students of arts.

Before they start their studies, their perception of beauty is similar to everyone's.

But as they go through their course, their perception starts to shift. What they see as "beautiful" doesn't match the perception of others.

They learn what "skeuomorphism" is, and suddenly everything must be flat and undifferentiated.

sorcerer-mar 4 hours ago

Christopher Alexander’s “Notes on the Synthesis of Form” blames this phenomenon for the crimes of architecture schools of late.

He calls it a craft becoming “self-conscious,” i.e. the architect’s role is not to create a place to live, but to be an architect, which necessarily entails “competing” against other architects. Nobody wins design competitions by creating the 1000th example of a tried and true form, they do it by pushing the boundaries of other architects’ sensibilities, which are already far afield of a normal person’s. Most results are therefore complete garbage.

vasusen 8 hours ago

I agree, this looks like designers showing off to other designers. It looks suspiciously similar to Dropbox's 2017 design system that thankfully never became mainstream -- https://www.awwwards.com/inspiration/dropbox-design-system

notpushkin 33 minutes ago

The only thing I see on the Awwwards page is the GIF of Sharp Grotesk font family, which is used on Dropbox homepage. dropbox.design doesn’t open for me, so I’m not sure about other elements of their redesign.

hellonoko 7 minutes ago

> It reminds me a study about the perception of beauty among students of arts.

Do you know which particular study this was? I would like to read it.

wisty 11 hours ago

I think it's actually less flat, with more affordances (though not quite skeuomorphic).

Basically "oops we made it too flat, let's make those buttons big and colourful so people can see them again". It's a step forward after two steps back.

Groxx 7 hours ago

It's worth comparing to where it came from: https://m1.material.io/

v3 is flatter than the flat design that v1 was a reaction against because it had such bad affordances.

dgimla20 15 hours ago

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.

_fat_santa 11 hours ago

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

skydhash 9 hours ago

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.

0x457 9 hours ago

> Material Design v1

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.

Groxx 47 minutes ago

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.

amluto 7 hours ago

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

overfeed 2 hours ago

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

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.

amluto 2 hours ago

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.

worldsavior 14 hours ago

You're talking like Google isn't a ad company trying to keep you staring on your screen.

28304283409234 13 hours ago

No see "today, people increasingly see their devices not as tools, but as extensions of themselves."

We are merely catering to those needs. It is philanthropy really. A kindness.

/s

sandeep1998 12 hours ago

XD

sksrbWgbfK 12 hours ago

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?

iamdelirium 7 hours ago

Insert Principle Skinner: "Am I out of touch? No, its the young people that are wrong".

idle_zealot 3 hours ago

Things that are utterly lost in modern software design: information density, and even more importantly, consistency. It feels like every interface wants to tuck features away offscreen to be accessible only by scrolling, swiping, or behind a "flow" of several screens, each of which may have a surprising popup, redirect, call-to-action, or totally different layout owned by another team. The swipe/scroll accessible features aren't indicated in any way, you either have to know about them a priori or be tutorialized. What elements are clickable/tappable and their interactive areas are often unclear. Input types are represented inconsistently (checkboxes vs radio selectors, drop downs, sliders). Button locations for standard actions are shuffled from screen to screen. Even basic OS features on Android phones are like this. How do you access quick settings? Well, you pull down the notification shade all the way from the top of the screen with a swipe, which mostly shows your notifications but also reveals some buttons and knobs. Then you swipe down again, which this time doesn't pull down a shade, but transforms those knobs into a different set of more expansive knobs and sliders and also hides your notifications. Oh, also that first slide down might not work and only serve to temporarily show the OS status bar, if the screen you're on right now is set as immersive or something. In that case you need to do one swipe down to reveal the status bar, then quickly follow up with another for the mixed-use kindof-notification pulldown, then a third time to transform that into the screen where you can change your brightness.

I want a new design language that places consistency above all else. I should be able to accurately predict what a tap or swipe is going to do based on the information on my screen. I do not want things to pop up unexpectedly or change positions or hide themselves without my input. Computers are tools, and their users need to be able to develop mastery of them. The current thrust seems to revolve around ensuring constant surprise and novelty.