←back to thread

Material 3 Expressive

(design.google)
332 points meetpateltech | 1 comments | | HN request time: 0s | 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 #
kps ◴[] No.44007866[source]
> This happens despite user's clearly communicated "prefers-reduced-motion" setting

Let's not forget the user's clearly communicated "prefers-color-scheme" setting.

replies(1): >>44008189 #
1. myfonj ◴[] No.44008189[source]
Good point! Yet interestingly, that page seem to adopt to colour scheme preference just fine at this point. (Even dynamically.) It is fact that the gooey thingamajig keeps same weird colours in both schemes, but besides that, at least the main background and text try to reflect User's preference with regard to luminosity.