←back to thread

Material 3 Expressive

(design.google)
335 points meetpateltech | 3 comments | | HN request time: 0.613s | source
Show context
myfonj ◴[] No.44005229[source]
Let me share with you my brief but very intensive user story of the "M3 web":

1. User visits https://m3.material.io/develop/web. 2. User suffers unsolicited and redundant gooey animation of an "orange-violet blob-like thingamajig" unrelated to the topic. This happens despite user's clearly communicated "prefers-reduced-motion" setting that other sites usually respect. 3. User struggles to find how to stop said thingamajig. After scrolling, they eventually discover some kind of "pause button" tucked away in the bottom left corner of a sidebar. (User has a laptop, so that icon—with no textual hint of its function—sits below their initial viewport.) 4. User clicks the pause emblem and the visual distraction freezes in place. 5. User attempts to identify the first interactive element in the main area (also known as a "link"). 6. Moving the cursor over a tile under "Announcements" makes the tile change colour. User deduces it might be clickable. There is no other visual indication that this content is functionally different from the "static" texts surrounding it. 7. The tile reads:

    Meet Material Web 1.0Start using lightweight and accessible Material Components in any web framework
This appears to be a heading and subtitle, but in reality consists of two styled <spans> with no space between them (hence the peculiar "1.0Start" fusion). The spans are marked with `class="title"` and `class="description..."` respectively. 8. User boldly clicks that tile. 9. User gets a new browser tab opened. 10. User wonders why there was no visual indication this would happen. 11. User evaluates the content of this unsolicited tab, decorated with "cheering megaphone" emoji. They conclude there is actually no clear path toward "Starting to use lightweight and accessible Material Components" there. 12. User decides to close the tab and return to the original "M3" page. 13. The original "M3" page no longer looks as it did before. It has scrolled back to the frozen orange-violet thingamajig, causing the content with the tile to vanish from the viewport. 14. User decides that they've encountered enough WCAG violations for this month. 15. User closes the tab.
replies(3): >>44006243 #>>44007866 #>>44009255 #
1. lebowska ◴[] No.44006243[source]
Best thing about this, is that these components, the web version of the material 3, that in my opinion should also be the best showcase of this visual language, are not even updated to this latest "expressive" update. Why? Because they're in in maintenance mode.

https://github.com/material-components/material-web/discussi...

replies(1): >>44006563 #
2. krikou ◴[] No.44006563[source]
The value proposition of material-web was really convincing (accessible, high quality web-based component built on top of lit) and the dev team did an incredible job. It was killed even before they got a chance to release a full component set.

Google, fool me once ...

replies(1): >>44012531 #
3. agos ◴[] No.44012531[source]
I love that the footer of this new Material 3 has a “web” link that leads to a project in maintenance mode. It was baffling to say the least to follow it