elk
elk copied to clipboard
elk-zone
feat: add grayscale mode to user preferences
Description
Implements #1122
https://user-images.githubusercontent.com/90143161/212548857-34f4baa1-b4e5-4107-87f0-81ba9c0aa99f.mov
What is the purpose of this pull request?
- [ ] Bug fix
- [x] New Feature
- [ ] Documentation update
- [ ] Translations update
- [ ] Other
Before submitting the PR, please make sure you do the following
- [x] Read the Contributing Guidelines.
- [x] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
- [x] Provide related snapshots or videos.
- [x] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g.
fixes #123).
![stackblitz[bot] avatar](https://avatars.githubusercontent.com/in/182710?v=4 "Published by a pub.dev verified publisher"){kind=small}
Deploy Preview for elk-docs canceled.
| Name | Link |
|---|---|
| Latest commit | 0563e9cc3a548b39eb06764a71a3866095fc852f |
| Latest deploy log | https://app.netlify.com/sites/elk-docs/deploys/63c5e39560db65000936f492 |
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
Deploy Preview for elk-zone ready!
| Name | Link |
|---|---|
| Latest commit | 9b16724ccf56ff049e22453f8c5e5150ab968503 |
| Latest deploy log | https://app.netlify.com/sites/elk-zone/deploys/63c5ba2b8f8279000972c8b5 |
| Deploy Preview | https://deploy-preview-1177--elk-zone.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site settings.
I thought that this mode would apply the grayscale filter only to images and avatars. But leave the rest of the UI with the primary color. I think that would be better, as more people will be able to use this wellness mode from an a11y perspective.
And it would also be interesting if when you hover or focus an avatar or image, they get to be full color so you experience grayscale while browsing but you can see the content as intended if you would like to do so without disabling this wellness option.
@patak-dev something like this?
https://user-images.githubusercontent.com/90143161/212552880-e6b0707f-a05b-442c-a332-361954bf6452.mov
Wow, first off, thanks to @rshigg for this quick PR!
I thought that this mode would apply the grayscale filter only to images and avatars. But leave the rest of the UI with the primary color. I think that would be better, as more people will be able to use this wellness mode from an a11y perspective.
Can you elaborate a bit more why you think this would improve a11y? Current implementations, both iOS grayscale mode as well as Pinafore's apply this to the whole interface. This was also what I expected and also part of what I enjoyed, as it drove down the whole interaction with the sometimes dangerous pull of social media. Only grayscaling content would turn down interaction on image content but I'd personally prefer to go all in here.
And it would also be interesting if when you hover or focus an avatar or image, they get to be full color so you experience grayscale while browsing but you can see the content as intended if you would like to do so without disabling this wellness option.
I love this idea. I'm not sure whether hover may lead to too many distractions but it looks great in @rshigg 's demo.
I thought that this mode would apply the grayscale filter only to images and avatars. But leave the rest of the UI with the primary color. I think that would be better, as more people will be able to use this wellness mode from an a11y perspective.
Can you elaborate a bit more on why you think this would improve a11y? Current implementations, both iOS grayscale mode as well as Pinafore's apply this to the whole interface. This was also what I expected and also part of what I enjoyed, as it drove down the whole interaction with the sometimes dangerous pull of social media. Only grayscaling content would turn down interaction on image content but I'd personally prefer to go all in here.
I don't know to be honest. This is just what I thought when I first saw your issue. My thinking was that we use primary color to help people find important actions, what is enabled, etc. Our use of primary color is not driven to engage (we even removed the bright Compose button and people are fighting back to get it again). We use it to make the interface more accessible and easier to understand. If we go full grayscale, I think we need to do a lot of work to rework our use of color and change active states to always include a shape difference (like line icons to fill icons). I think we aren't that bad in that regard.
In summary, my thought was that we wanted to tone down only the content that could drive engagement.
There is also an interesting discussion about code blocks, my ideal would be to have syntax highlighting on as this is also not to drive engagement but to help the reader see the structure.
I love this idea. I'm not sure whether hover may lead to too many distractions but it looks great in @rshigg 's demo.
I also was afraid of this, but I think it should be fine as we users can scroll out of the timeline and only interact with the post when we find something interesting. If this ends up being an issue, we could add a new toggle button on images so you need to click it to turn full color for it, or we could add a delay when hovering so you can still cross an image with the mouse without triggering the change (and only if you stay for a bit it changes, maybe this could be done with a CSS transition that is slow to go into full color but reverts quickly to avoid the need of JS state).
Another way to see it is that the contrast may suffer quite a bit in our default themes if we apply a gray filter everywhere. So if people would really like to have that experience I think it could be decoupled from this wellness feature:
- The wellness preference: Grayscale content (apply to images, avatars, expansions?, polls?)
- A grayscale theme once we have theme support that uses only gray colors but is intentional in that, so it may need to use a darker background to improve contrast, and maybe use full white for primary color so that the things we want to highlight from a functional POV are still visually different
Another way to see it is that the contrast may suffer quite a bit in our default themes if we apply a gray filter everywhere. So if people would really like to have that experience I think it could be decoupled from this wellness feature:
Absolutely, this (I think) I touched upon in the original issue as well when it came to the "detect iOS grayscale mode" part. A system wide grayscale mode can effectively remove UI hints. Pinafore addressed this by adding shape differences just like you proposed.
- The wellness preference: Grayscale content (apply to images, avatars, expansions?, polls?)
- A grayscale theme once we have theme support that uses only gray colors but is intentional in that, so it may need to use a darker background to improve contrast, and maybe use full white for primary color so that the things we want to highlight from a functional POV are still visually different
That'd be a neat solution, I think. Of course, one could always have like "make an additional option" but this easily leads to clutter. Splitting the logic into "theme" and "grayscale content" makes semantically more sense.
I do like a toned down theme for the reasons stated above (drive back engagement in general, not only to attention grabbing content). This helps me to concentrate much better.
Interesting you brought up syntax highlighting, as this I'd probably disable as well if I could. My rule of thumb when I prepare reports is to have it disabled when in-line (usually small code examples) but on for the appendix (full code listings).
I have read all of your feedback and I agree that the best long term solution is to have a grayscale "theme". For now I have restricted grayscale mode to images, video, code blocks, and the status actions (reply, etc.). I'm going to update the demo video in the description.
Thank you everyone for your perspectives 🧡
I think the transition works very well for avatars. I see it isn't applied to attachments. I think it would also be good for them.
One thing that calls my attention a lot with this feature enabled is the green color of the retweet. I think that it should be in normal color for this wellness option (not grayscale).
@patak-dev any way to get a preview of this deployed on netlify so anyone looking at the PR can give it a test drive?
@rshigg it is in the top comment from netlify: https://deploy-preview-1177--elk-zone.netlify.app/home
Oh, looks like it is canceled since yesterday. @danielroe do you know what happened with the netlify deploys?
We have to manually initiate each one @patak-dev from the Netlify deploys panel, for security reasons. (Which I've just done.)
Thank you Daniel! Preview link: https://deploy-preview-1177--elk-zone.netlify.app/settings/preferences
@ljrk0 let's merge this one so we can get some feedback outside this group. Please create a new issues with suggestions and let's iterate to improve this feature
@ljrk0 let's merge this one so we can get some feedback outside this group. Please create a new issues with suggestions and let's iterate to improve this feature
Sorry for being a bit late! This looks awesome already and works really well for me. Thanks @rshigg for the PR and @patak-dev for the helpful thoughts. I think splitting theme & desaturating content was very much the right call.