←back to thread

Material 3 Expressive

(design.google)
334 points meetpateltech | 3 comments | 13 May 25 17:20 UTC | HN request time: 0.001s | source
Show context
dgimla20 ◴[16 May 25 09:25 UTC] No.44003351[source]▶
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.

replies(11): >>44003397 #>>44003609 #>>44004248 #>>44004483 #>>44004979 #>>44005115 #>>44005146 #>>44005182 #>>44007047 #>>44009189 #>>44010491 #
0x457 ◴[16 May 25 16:03 UTC] No.44007047[source]▶
> 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.

replies(2): >>44007867 #>>44010844 #
amluto ◴[16 May 25 17:22 UTC] No.44007867[source]▶
> 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.

replies(1): >>44010256 #
1. overfeed ◴[16 May 25 22:17 UTC] No.44010256[source]▶
> 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.

replies(1): >>44010433 #
2. amluto ◴[16 May 25 22:43 UTC] No.44010433[source]▶
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.

replies(1): >>44011976 #
3. miunau ◴[17 May 25 04:07 UTC] No.44011976[source]▶
This is solved by using dvh (or svh) instead of 100% for height in the CSS.