Bug 484969 - Weather and brightness/night light's icons are easily confused
Summary: Weather and brightness/night light's icons are easily confused
Status: CONFIRMED
Alias: None
Product: Breeze
Classification: Plasma
Component: Icons (show other bugs)
Version: 6.0.3
Platform: Other Linux
: NOR normal
Target Milestone: ---
Assignee: visual-design
URL:
Keywords: usability
Depends on:
Blocks:
 
Reported: 2024-04-03 10:28 UTC by medin
Modified: 2024-04-18 14:11 UTC (History)
6 users (show)

See Also:
Latest Commit:
Version Fixed In:


Attachments
Weather and brightness/night light's icons are easily confused (14.82 KB, image/png)
2024-04-03 10:28 UTC, medin
Details
new icons (24.19 KB, image/png)
2024-04-04 01:03 UTC, medin
Details
With video-display-brightness (7.54 KB, image/png)
2024-04-04 02:39 UTC, Natalie Clarius
Details
Some random ideas made by smashing together breeze icons (26.21 KB, image/png)
2024-04-04 15:38 UTC, nathan
Details
New brightness/light_night's icons proposal (27.52 KB, application/x-xz)
2024-04-04 18:04 UTC, medin
Details
brightness icons _ bulb + moon (24.10 KB, image/png)
2024-04-06 00:20 UTC, medin
Details
SVGs_Brightness_Moon+Bulb (50.93 KB, application/x-xz)
2024-04-06 00:27 UTC, medin
Details
Brightness and Night Color status and icons (296.86 KB, image/png)
2024-04-06 12:32 UTC, medin
Details
Brightness icons - SVGs (50.37 KB, application/zip)
2024-04-10 01:02 UTC, medin
Details

Note You need to log in before you can comment on or make changes to this bug.
Description medin 2024-04-03 10:28:24 UTC
Created attachment 168092 [details]
Weather and brightness/night light's icons are easily confused

The new weather widget’s icons are easily confused with brightness and night light icons. The colorful icons were much easier to distinguish. See attached image for more info.
Comment 1 Nate Graham 2024-04-03 16:14:17 UTC
Using a sun is objectively correct for the weather widget, since sometimes it's just sunny out! But yeah, this causes an issue with the new Brightness and Color widget which uses the `brightness-high-symbolic` icon that has a rather sun-like appearance.

There are two options here:
1. Make brightness-high-symbolic look less like a "sunny weather" icon
2. Have the widget use a different icon, maybe `video-display-brightness-symbolic` which has a sun-style brightness icon inside a screen. This *technically couldn't be 100% accurate since the widget can be used to control keyboard brightness as well--not just screen brightness--but maybe that's thinking too literally and doesn't actually matter.

Thoughts, Natalie?
Comment 2 Natalie Clarius 2024-04-03 17:13:07 UTC
How about we use "brightness-low-symbolic"? This is distinct enough from the weather sun and more general than display brightness, though it looks less clearly like brightness.
Comment 3 Andres Betts 2024-04-03 17:18:29 UTC
Would it also be a good thing to create a dedicated icon set for weather? I think right now, our collection doesn't contain a lot of that and is reusing icons intended for other purposes.

Material has these:

https://icon-sets.iconify.design/?query=weather (Filter for Material)
Comment 4 Nate Graham 2024-04-03 19:51:26 UTC
We do already have a dedicated icon set for weather and it's not re-using icons from anywhere else.
Comment 5 Nate Graham 2024-04-03 19:52:54 UTC
I'm not sure about using brightness-low-symbolic; to me it has meaning only when visually paired with brightness-high-symbolic so the differences between them become obvious. Alone, I think it looks like some kind of space or chemistry symbol lol
Comment 6 medin 2024-04-04 01:02:55 UTC
I'm not an expert in design, but on smartphones, weather widgets tends to use colorful icons, and those chosen colors appears to be readable both in dark and light themes, and even with different colorful wallpapers in the background.

Tray icons zone is not a place for only symbolic icons, many installed third party apps have colorful icons suitable for both dark and light themes. So I'm for tweaking the old colorful weather icons and make them more legible for various themes.

But redesigning all those weather icons will surely be fastidious and need more testing for various scenarios, so the easy solution is to change brightness and light night icons.

For brightness when light night is disabled, the best icon would be a simple symbolic bulb.

And for brightness with light night enabled, the suitable one is to combine the symbol of human eye and the bulb, because light night purpose is to minimize blue light for eyes, and it has no relation with moon symbol which represent night, because it can also be used by some people during sunny days inside dark rooms.

And as a side note, the current icon (slashed bulb) used for light night when it's disabled is totally misleading, because that symbol naturally means no light. So when light night is disabled during its activation period, it's best to use slashed eye icons with bulb.

See attached image for proposed changes.
Comment 7 medin 2024-04-04 01:03:53 UTC
Created attachment 168120 [details]
new icons
Comment 8 Andres Betts 2024-04-04 01:33:26 UTC
Maybe I can review them. What do these weather icons go by? Are they 22px?
Comment 9 medin 2024-04-04 01:48:14 UTC
(In reply to Andres Betts from comment #8)
> Maybe I can review them. What do these weather icons go by? Are they 22px?

I simply downloaded the bulb and eye icons (MIT License) from https://iconduck.com/ as SVGs then added them to Inkscape on top of that screenshot then changed some colors and sizes to create that image.

https://iconduck.com/icons/85453/bulb-on
https://iconduck.com/icons/124606/eye-empty
https://iconduck.com/icons/124607/eye-off
Comment 10 Nate Graham 2024-04-04 01:52:22 UTC
Going back to colorful weather icons isn't an option here; we worked hard to make everything 1st-party be symbolic and I don't want to go back on this. I think somehow changing the visual appearance of the Brightness and Color icon would be best.
Comment 11 Natalie Clarius 2024-04-04 02:39:57 UTC
Created attachment 168121 [details]
With video-display-brightness

I tried `video-display-brightness` and I don't like very much how it looks; it stands out as almost non-monochrome with the large gray area:
Comment 12 Natalie Clarius 2024-04-04 02:40:43 UTC
... And the brightness symbol inside becomes so small it's hardly recognizable.
Comment 13 Nate Graham 2024-04-04 03:33:45 UTC
Not my favorite icon either. I think it could use an overhaul regardless of what happens here.
Comment 14 nathan 2024-04-04 15:38:28 UTC
Created attachment 168146 [details]
Some random ideas made by smashing together breeze icons

Maybe something in this vein?
Comment 15 Natalie Clarius 2024-04-04 17:18:32 UTC
(In reply to nathan from comment #14)
> Created attachment 168146 [details]
> Some random ideas made by smashing together breeze icons
> 
> Maybe something in this vein?

They look nice but I don't understand what they are supposed to depict. It looks like icons for day/night light to me but we don't need icons for those?
Comment 16 nathan 2024-04-04 17:54:55 UTC
> They look nice but I don't understand what they are supposed to depict. It
> looks like icons for day/night light to me but we don't need icons for those?

Ah, I somehow I was got the impression that we needed something new for the night light.
Comment 17 medin 2024-04-04 18:04:19 UTC
Created attachment 168153 [details]
New brightness/light_night's icons proposal

I don't know if these proposed icons cover most cases.
Comment 18 medin 2024-04-04 18:39:31 UTC
The eye is not enough to represent night light which protects eyes from screen light, the best would be a combination of shield and eye, but we will end up with three items in one icon.
Comment 19 Natalie Clarius 2024-04-04 20:24:36 UTC
(In reply to medin from comment #17)
> Created attachment 168153 [details]
> New brightness/light_night's icons proposal
> 
> I don't know if these proposed icons cover most cases.

I like the light bulb as a brightness icon. Would you like to submit it in https://invent.kde.org/frameworks/breeze-icons/-/merge_requests for review? See https://community.kde.org/Infrastructure/GitLab#Submitting_a_merge_request. Or would you like me to submit it on your behalf?
Comment 20 Natalie Clarius 2024-04-04 20:26:40 UTC
(In reply to medin from comment #18)
> The eye is not enough to represent night light which protects eyes from
> screen light, the best would be a combination of shield and eye, but we will
> end up with three items in one icon.

We would like to remain unopinionated about whether night light actually has an effect on eye health, and I think the current night light icons are fine because they are not too similar to other tray icons, and we do want to keep the day/night light distinction too. So I don't think we'll need  a new version of those. But thanks anyway.
Comment 21 medin 2024-04-04 20:42:07 UTC
(In reply to Natalie Clarius from comment #20)
> (In reply to medin from comment #18)
> > The eye is not enough to represent night light which protects eyes from
> > screen light, the best would be a combination of shield and eye, but we will
> > end up with three items in one icon.
> 
> We would like to remain unopinionated about whether night light actually has
> an effect on eye health, and I think the current night light icons are fine
> because they are not too similar to other tray icons, and we do want to keep
> the day/night light distinction too. So I don't think we'll need  a new
> version of those. But thanks anyway.

If the brightness icon is changed to bulb, it will create another new ambiguity, because there's that icon representing night light disabled during its activation period, which is also represented as bulb slashed with red line.

So if a bulb with rays represents brightness, then a slashed bulb without rays will mean no brightness.

Also, from browsing Breeze icons, I see that there are two dedicated icons for max and low brightness, so may be two bulbs with different rays length need to be made.

Feel free to correct those icons and adjust them as you like, because you know much better the requirements for submitting them. :)
Comment 22 Natalie Clarius 2024-04-04 21:35:40 UTC
(In reply to medin from comment #21)
> (In reply to Natalie Clarius from comment #20)
> > (In reply to medin from comment #18)
> > > The eye is not enough to represent night light which protects eyes from
> > > screen light, the best would be a combination of shield and eye, but we will
> > > end up with three items in one icon.
> > 
> > We would like to remain unopinionated about whether night light actually has
> > an effect on eye health, and I think the current night light icons are fine
> > because they are not too similar to other tray icons, and we do want to keep
> > the day/night light distinction too. So I don't think we'll need  a new
> > version of those. But thanks anyway.
> 
> If the brightness icon is changed to bulb, it will create another new
> ambiguity, because there's that icon representing night light disabled
> during its activation period, which is also represented as bulb slashed with
> red line.
> 
> So if a bulb with rays represents brightness, then a slashed bulb without
> rays will mean no brightness.

Right. So maybe what we need is a "night light deactivated" icon with a moon symbol.

> Also, from browsing Breeze icons, I see that there are two dedicated icons
> for max and low brightness, so may be two bulbs with different rays length
> need to be made.

I don't think that's needed here since we just need a generic icon to indicate that this is an applet about brightness; the existing `brightness-high` icon was not conditionalized on the actual screen brightness either.
Comment 23 medin 2024-04-06 00:20:28 UTC
Created attachment 168203 [details]
brightness icons _ bulb + moon
Comment 24 Nate Graham 2024-04-06 00:21:38 UTC
I like those a lot!
Comment 25 medin 2024-04-06 00:27:37 UTC
Created attachment 168204 [details]
SVGs_Brightness_Moon+Bulb
Comment 26 Natalie Clarius 2024-04-06 00:53:46 UTC
I like the style too, and I think the enabled and disabled moon ones are quite good as they are. However I think it would still be good to have an icon for day light mode with a sun as we have currently, but with a disabled version in addition, so it is clear which of the two phases it refers to.
Comment 27 Natalie Clarius 2024-04-06 00:54:15 UTC
(I.e. replace the eye with a sun)
Comment 28 medin 2024-04-06 01:23:10 UTC
I think the usage of both moon and sun is not right, night light can be activated during day or night or between, so it has no relation to day or night as a period of time.

The misleading comes from its literal name "Night Light".

We have the following cases:

1) Brightness, with night light outside its activation period, this can be represented by a single bulb,
2) Brightness, with night light enabled during its activation period, it can be during day or night, this can be represented by a small bulb plus an icon that represent the protection is enabled,
3) Brightness, with night light disabled during its activation period, it can be during day or night, this can be represented by a small bulb plus a slashed icon that represent the protection is disabled

So the real question is to find an icon that represent that protection.

Samsung uses a sun with letter B inside that means protection against blue light.
Comment 29 Natalie Clarius 2024-04-06 01:38:24 UTC
It does have a relation to day or night as a period of time because you configure two different target screen temperatures for two phases. Of course noone stops you from setting the "night" period to start at 12 P.M., but the idea is that you have two different phases throughout a 24 hour period, with the more intense color typically used when it's dark out. (In case you weren't aware because you don't use it yourself, you can configure are day phase temperature that is different from the neutral screen color and the night phase, and in this case it will show as the sun icon in the applet.)

I agree that the name "Night Light" is lacking in that respect ("Day and Night Light" just sounded too clunky), but this should have no effect on the icons we use.

There's also the issue that the default temperature for the "day" phase is no filter at all, and in that mode night light is not deactivated in the sense that no transitions are scheduled so it wouldn't be appropriate to use a stroke through icon, but it's also not "active" in the sense that there would be any filter in effect. This is why we currently show the moon icon in this case as a generic "night light feature" icon, though personally I find this confusing and would have preferred to show the sun icon even if the configured temperature is just the normal no filter. 

So perhaps your additional eye icons might actually solve this problem: We could use the icon as a generic "Day and Night Light" icon and show this if the feature is generally enabled but no temperature change is currently in effect, and use a sun and moon icons for an active filter in the respective phase.

What do you think?
Comment 30 Natalie Clarius 2024-04-06 01:46:26 UTC
Or we give up making a distinction between day and night phase in the applet icon and just have one generic "Blue Light Filter" icon and leave the information which phase is active to the text label. But given the feature is named "Night Light" we do kind of need an icon that conveys the idea of night. And since we are in the special situation that, unlike on other platforms, in Plasma it's possible to configure a separate day temperature, using a moon symbol for that situation would seem a little inaccurate, and that's how we ended up with the three different icons.

Of course we could start a new round of thinking about the naming, but "Night Light" is what we came up with after some discussion. It's what people are familiar with from other platforms (at least Gnome and Android), and "Blue Light Filter" was found to sound too technical.
Comment 31 Natalie Clarius 2024-04-06 01:53:06 UTC
My wording in the two statements about how the name should or shouldn't affect the choice of icons was somewhat contradictory - what I'm trying to say is, we do have two distinct phases where one is about day and one is about night, and ideally the icon would reflect both the reality of there being an explicit day phase and the name "Night Light", the challenge being that "Night Light" is used to refer to both.
Comment 32 medin 2024-04-06 12:32:03 UTC
Created attachment 168216 [details]
Brightness and Night Color status and icons

So we can summarize the icons depending on different status like the following
Comment 33 Andres Betts 2024-04-07 00:36:17 UTC
Would it be ok if we propose or discuss these icons via gitlab?
Comment 34 Natalie Clarius 2024-04-09 01:46:12 UTC
(In reply to medin from comment #32)
> Created attachment 168216 [details]
> Brightness and Night Color status and icons
> 
> So we can summarize the icons depending on different status like the
> following

Yes, that's right. If you you'd like you can drop the sources here and I can submit them for review.
Comment 35 medin 2024-04-10 01:02:43 UTC
Created attachment 168324 [details]
Brightness icons - SVGs

Thanks for your hard work :)
Comment 36 Nate Graham 2024-04-11 15:44:51 UTC
You're the one who did this work, so thank *you*!
Comment 37 Bug Janitor Service 2024-04-18 14:11:37 UTC
A possibly relevant merge request was started @ https://invent.kde.org/frameworks/breeze-icons/-/merge_requests/355