Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-65124

New weather icons added in #5065 are "samey" and hard to distinguish from each other

    • 2.375

      w/r/t https://github.com/jenkinsci/jenkins/pull/5065

      I appreciate all of the new icons, but the new weather icons are significantly more difficult to differentiate at a glance than the old weather icons, since they're all the same color.  Apart from fixing all of our builds (who's got time for that), would it be possible to add some color variation (preferred), or at least have an option to re-enable the old icons?  Maybe make the sun yellow again and the clouds light gray?

      Example:

        1. image-2022-03-11-18-04-12-804.png
          image-2022-03-11-18-04-12-804.png
          28 kB
        2. weather-jenkins-thin.png
          weather-jenkins-thin.png
          7 kB
        3. jenkins-all-icons.png
          jenkins-all-icons.png
          36 kB
        4. weather-jenkins.png
          weather-jenkins.png
          10 kB
        5. weather-complete.png
          weather-complete.png
          16 kB
        6. weather-complete.svg
          4 kB
        7. weather-jenkins.svg
          3 kB
        8. Screen Shot 2021-06-14 at 11.15.57.png
          Screen Shot 2021-06-14 at 11.15.57.png
          60 kB
        9. weather-symbols.zip
          33 kB
        10. weather-sprite.svg
          76 kB
        11. screenshot-2.png
          screenshot-2.png
          28 kB
        12. screenshot-1.png
          screenshot-1.png
          12 kB
        13. weather-icons.png
          weather-icons.png
          113 kB
        14. tango-mix.png
          tango-mix.png
          53 kB
        15. Screenshot 2021-04-20 at 14.56.02.png
          Screenshot 2021-04-20 at 14.56.02.png
          29 kB
        16. Screenshot 2021-04-20 at 14.56.27.png
          Screenshot 2021-04-20 at 14.56.27.png
          17 kB
        17. image-2021-03-15-15-54-45-240.png
          image-2021-03-15-15-54-45-240.png
          9 kB
        18. image-2021-03-15-15-33-49-345.png
          image-2021-03-15-15-33-49-345.png
          16 kB

          [JENKINS-65124] New weather icons added in #5065 are "samey" and hard to distinguish from each other

          Ian Williams added a comment -

          And the rain remains blue. A shade darker on the yellow (golden?) ? Keep in mind, grey cloud might want light grey for dark theme and dark grey for light theme.

          Ian Williams added a comment - And the rain remains blue. A shade darker on the yellow (golden?) ? Keep in mind, grey cloud might want light grey for dark theme and dark grey for light theme.

          Ulli Hafner added a comment -

          Maybe it would be helpful to discuss this topic in the next Jenkins UX meeting? Before changing colors of icons we should discuss in general how we want to design icons in other places as well (monochrome icons, multi color icons, etc.).

          Ulli Hafner added a comment - Maybe it would be helpful to discuss this topic in the next Jenkins UX meeting? Before changing colors of icons we should discuss in general how we want to design icons in other places as well (monochrome icons, multi color icons, etc.).

          +1, if you have a page full of the icons it's very hard to tell at one glance whether its' all "mostly ok" or "mostly terrible". Having some color hints would be immensely helpful.

          Steven Schlansker added a comment - +1, if you have a page full of the icons it's very hard to tell at one glance whether its' all "mostly ok" or "mostly terrible". Having some color hints would be immensely helpful.

          Oleg Nenashev added a comment -

          I agree this is a UX regression to be discussed. No strong opinion how to fix the issue, personally I do not use weather icons due to performance overheads.

          From what I see https://www.decolore.net/weather-forecast-icon-sets/ provides monochrome icons similar to the previous weather icons we had. Maybe they will be more distinguishable. At the same time, I think that using more colors makes sense 

          Oleg Nenashev added a comment - I agree this is a UX regression to be discussed. No strong opinion how to fix the issue, personally I do not use weather icons due to performance overheads. From what I see https://www.decolore.net/weather-forecast-icon-sets/  provides monochrome icons similar to the previous weather icons we had. Maybe they will be more distinguishable. At the same time, I think that using more colors makes sense 

          Ulli Hafner added a comment -

          I wonder why we should use weather icons for a percentage value at all. This is IMHO the wrong abstraction. We should better indicate this value with some kind of percentage meter (gauge, progress, etc.). Then we can use the typical color values (red, yellow, green) to indicate the tendency.

          Example (not suitable for a column out of the box): https://stackoverflow.com/questions/40146741/gauge-chart-with-steps-of-colors

          Ulli Hafner added a comment - I wonder why we should use weather icons for a percentage value at all. This is IMHO the wrong abstraction. We should better indicate this value with some kind of percentage meter (gauge, progress, etc.). Then we can use the typical color values (red, yellow, green) to indicate the tendency. Example (not suitable for a column out of the box): https://stackoverflow.com/questions/40146741/gauge-chart-with-steps-of-colors

          Daniel Beck added a comment -

          One use case it helps with is nontrivial aggregate stats for folders; weather makes no claim about how it maps to a percentage.

          Not saying we can't replace it, but a simple 1:1 swap of icons will result in more problems.

          Daniel Beck added a comment - One use case it helps with is nontrivial aggregate stats for folders; weather makes no claim about how it maps to a percentage. Not saying we can't replace it, but a simple 1:1 swap of icons will result in more problems.

          Thomas Hirsch added a comment -

          I created a test dashboard once, and I got inspired by Jenkins visualisation, to the point that I added a "neutral" and a "friendly" set of switchable icons.

          Thomas Hirsch added a comment - I created a test dashboard once, and I got inspired by Jenkins visualisation, to the point that I added a "neutral" and a "friendly" set of switchable icons.

          This is now an inconsistent mix of Tango style icons and flat theme.

          Maybe add an option to switch between old and new icons?

          Matthias Mailänder added a comment - This is now an inconsistent mix of Tango style icons and flat theme. Maybe add an option to switch between old and new icons?

          Ulli Hafner added a comment -

          The old Tango style icons are deprecated and will be replaced one by one. Currently we have no designer on board that helps with that process. So the unfinished look and feel will stay for a while . Feel free to join the Jenkins UX SIG if you have some spare time and design skills to help with that issue.

          The switch to toggle different styles is already there, just the implementation is missing. All Jenkins UI elements can be configured with a theme. So in order to restore the old Tango icons one needs to write and publish a Tango theme (in the style of the other themes like material theme, dark theme, etc.).

          Ulli Hafner added a comment - The old Tango style icons are deprecated and will be replaced one by one. Currently we have no designer on board that helps with that process. So the unfinished look and feel will stay for a while . Feel free to join the Jenkins UX SIG if you have some spare time and design skills to help with that issue. The switch to toggle different styles is already there, just the implementation is missing. All Jenkins UI elements can be configured with a theme. So in order to restore the old Tango icons one needs to write and publish a Tango theme (in the style of the other themes like material theme, dark theme, etc.).

          Please consider including such a Tango theme out of the box in Jenkins to help ease transition.
          I appreciate the challenge of shipping something when under-resourced. But as Jenkins administrator who ends up fielding confused questions from end-users, given the choice between an unfinished theme with significant visual regressions and no clear path to finishing the project, we would strongly prefer to stay with the older style that is clearly visually distinguished and make a decision about whether to opt in to the new flat theme after it is finished and the regressions and kinks are worked out.

          Steven Schlansker added a comment - Please consider including such a Tango theme out of the box in Jenkins to help ease transition. I appreciate the challenge of shipping something when under-resourced. But as Jenkins administrator who ends up fielding confused questions from end-users, given the choice between an unfinished theme with significant visual regressions and no clear path to finishing the project, we would strongly prefer to stay with the older style that is clearly visually distinguished and make a decision about whether to opt in to the new flat theme after it is finished and the regressions and kinks are worked out.

          Vincent added a comment - - edited

          I have some spare time to make some new icons, but I cannot even get the svg from source to load in Inkscape or Gimp. What format are they in? How can they be loaded into Inkscape?

          Are there just 5 types of weather icons now?

           

          I made some new icons trying to keep a common style that is easier to read, but Inkscape is a bit out of my comfort zone.

          http://two66.com/mirrors/index.php?file=Random-Stuff%2FStuff%2Fweather-icons.zip

           

          Using svg is more web-safe, whatever that means, but that doesn't mean completely flat colors are a good idea. Much less using an svg format that is not easily readable. I had a look around and various free svg sites offer weather icons that look ten times better than the ones now in use. To just change something so integral to the user interface and something hundreds of people are used to is not good practice. As some have said at least give the option to use the old icons. Heck you can vectorize them with Inkscape most likely(anyone got the original icons somewhere?).

          Vincent added a comment - - edited I have some spare time to make some new icons, but I cannot even get the svg from source to load in Inkscape or Gimp. What format are they in? How can they be loaded into Inkscape? Are there just 5 types of weather icons now?   I made some new icons trying to keep a common style that is easier to read, but Inkscape is a bit out of my comfort zone. http://two66.com/mirrors/index.php?file=Random-Stuff%2FStuff%2Fweather-icons.zip   Using svg is more web-safe, whatever that means, but that doesn't mean completely flat colors are a good idea. Much less using an svg format that is not easily readable. I had a look around and various free svg sites offer weather icons that look ten times better than the ones now in use. To just change something so integral to the user interface and something hundreds of people are used to is not good practice. As some have said at least give the option to use the old icons. Heck you can vectorize them with Inkscape most likely(anyone got the original icons somewhere?).

          We are now seeing those new icons as well in our LTS Jenkins.

           

          I do believe that slight color changes would be easy to do (i can do that) but i'm wondering what the status is or the future plan? I haven't seen any mention of this topic in the sig https://www.jenkins.io/sigs/ux/

          drulli would you say it would be easy to get a slightly more visible version into main line? Like just a few changes on the sun, a few gray shades for the clouds? If yes i would join an upcoming uix meeting and just propose it.

          tampa basically you need either a web ide which supports embedded svg's; what i did when i worked with small svg files, i did that manually by copy and pasting the svg tag content to a svg file with appropriate header, editing it and transfering it back.

          Sigi Kiermayer added a comment - We are now seeing those new icons as well in our LTS Jenkins.   I do believe that slight color changes would be easy to do (i can do that) but i'm wondering what the status is or the future plan? I haven't seen any mention of this topic in the sig https://www.jenkins.io/sigs/ux/ drulli  would you say it would be easy to get a slightly more visible version into main line? Like just a few changes on the sun, a few gray shades for the clouds? If yes i would join an upcoming uix meeting and just propose it. tampa  basically you need either a web ide which supports embedded svg's; what i did when i worked with small svg files, i did that manually by copy and pasting the svg tag content to a svg file with appropriate header, editing it and transfering it back.

          Ulli Hafner added a comment -

          > but i'm wondering what the status is or the future plan

          The designers left the project so we currently have no specific plans on how to improve the design. So any help is appreciated!

          > would you say it would be easy to get a slightly more visible version into main line? Like just a few changes on the sun, a few gray shades for the clouds? If yes i would join an upcoming uix meeting and just propose it.

          Yes please go ahead and propose your ideas! There are a lot of things left in an unfinished state and we are happy for anybody who wants to help.

          Ulli Hafner added a comment - > but i'm wondering what the status is or the future plan The designers left the project so we currently have no specific plans on how to improve the design. So any help is appreciated! > would you say it would be easy to get a slightly more visible version into main line? Like just a few changes on the sun, a few gray shades for the clouds? If yes i would join an upcoming uix meeting and just propose it. Yes please go ahead and propose your ideas! There are a lot of things left in an unfinished state and we are happy for anybody who wants to help.

          Ian Williams added a comment - - edited

          The motivation for using the weather symbols is because of their familiarity and the at a glance recognition. So, why are users confused by what should be familiar symbols? Because they are confused. I am not a graphic designer, but reference the work of one below along with symbols from the more popular weather sites.

          In the attached image has 4 sets of weather symbols for comparative reference which I hope will guide any modifications. All symbol sets are shown only for illustrative purposes only. These symbol sets provide a sense of balance, proportion and consistency, which is lacking from the Jenkins icons.

          First row: Jenkins icons
          [ Second row|https://www.mikeafford.com/store/weather-icons/weather-icon-set-bb-03/]: The "iconic" BBC weather symbols. BBC was the first to introduce these universally recognizable symbols. The examples shown from former BBC graphics designer Mike Afford, who offers a royalty free set for a small fee.
          Third row: A "modern" set from Mike Afford, with linear raindrops. Additional cool options: Tornado, Volcano and Typhoon for 0%!
          Fourth row: Symbols from cnn.comn/weather (varying cloud sizes is my bad copying).
          Fifth row: Symbols from accuweather.com. They don't appear to have a drizzle, but offer additional partly cloudy/overcast variants.


          My suggested modifications are:

          • Change the Sun symbol to use radial lines, not triangles ( I like the 30 degree rotation)
          • Use same Sun symbol in both instances, alternatively, a proportionately smaller Sun (not just smaller triangles)
          • Use same cloud across all icons (the partly cloudy is different to cloudy, different to the rainy cloud ; offset vs symmetric)
          • Use either raindrop or rain lines, not a mix. If raindrop, slanted and filled in.
          • Add color back: yellow/orange for Sun, blue (lighter than current) for rain, grey for cloud.
          • Color choice should work on Dark or Light background, so appropriate yellow/orange tone (or two) and grey should be chosen, and a lighter blue to better distinguish from black

          It would also be my recommendation to use a thinner line, but more importantly, use consistent thickness line between this and the build-status icons. Personally, I like the accuweather line weight, but Jenkins (sadly) appears to be going with a heavier look to the UI and fonts.

          I offer a range of 7 symbols. This allows added distinguishing symbols for 100% and 0%. This would require added logic in the calculation.

          If I had the design tool skills, I'd offer to do a real set, but my skill is limited to copy/paste, and a reasonable sense of visual aesthetic.

          Ian Williams added a comment - - edited The motivation for using the weather symbols is because of their familiarity and the at a glance recognition. So, why are users confused by what should be familiar symbols? Because they are confused. I am not a graphic designer, but reference the work of one below along with symbols from the more popular weather sites. In the attached image has 4 sets of weather symbols for comparative reference which I hope will guide any modifications. All symbol sets are shown only for illustrative purposes only. These symbol sets provide a sense of balance, proportion and consistency, which is lacking from the Jenkins icons. First row: Jenkins icons [ Second row|https://www.mikeafford.com/store/weather-icons/weather-icon-set-bb-03/]: The "iconic" BBC weather symbols . BBC was the first to introduce these universally recognizable symbols. The examples shown from former BBC graphics designer Mike Afford , who offers a royalty free set for a small fee. Third row: A "modern" set from Mike Afford, with linear raindrops . Additional cool options: Tornado, Volcano and Typhoon for 0%! Fourth row: Symbols from cnn.comn/weather (varying cloud sizes is my bad copying). Fifth row: Symbols from accuweather.com . They don't appear to have a drizzle, but offer additional partly cloudy/overcast variants. My suggested modifications are: Change the Sun symbol to use radial lines, not triangles ( I like the 30 degree rotation) Use same Sun symbol in both instances, alternatively, a proportionately smaller Sun (not just smaller triangles) Use same cloud across all icons (the partly cloudy is different to cloudy, different to the rainy cloud ; offset vs symmetric) Use either raindrop or rain lines, not a mix. If raindrop, slanted and filled in. Add color back: yellow/orange for Sun, blue (lighter than current) for rain, grey for cloud. Color choice should work on Dark or Light background, so appropriate yellow/orange tone (or two) and grey should be chosen, and a lighter blue to better distinguish from black It would also be my recommendation to use a thinner line, but more importantly, use consistent thickness line between this and the build-status icons. Personally, I like the accuweather line weight, but Jenkins (sadly) appears to be going with a heavier look to the UI and fonts. I offer a range of 7 symbols. This allows added distinguishing symbols for 100% and 0%. This would require added logic in the calculation. If I had the design tool skills, I'd offer to do a real set, but my skill is limited to copy/paste, and a reasonable sense of visual aesthetic.

          Vincent added a comment -

          The third row is pretty close to what I would expect, the color gradient is almost there too. I'd redo the raindrops and change the gray scale to get darker accordingly as well.

          You could probably cut down to just the 5 symbols in use now pretty easily as well. Then it would be a drop-in replacement.

          Vincent added a comment - The third row is pretty close to what I would expect, the color gradient is almost there too. I'd redo the raindrops and change the gray scale to get darker accordingly as well. You could probably cut down to just the 5 symbols in use now pretty easily as well. Then it would be a drop-in replacement.

          I am red/green colour blind and it is very hard to distinguish the new build status icons. The darkness and identical saturation of the new success and fail status icons makes them look completely identical to me when I look at lists of jobs.

          Please consider using more saturated colours and more visually distinct icons.

          Peter Lieverdink added a comment - I am red/green colour blind and it is very hard to distinguish the new build status icons. The darkness and identical saturation of the new success and fail status icons makes them look completely identical to me when I look at lists of jobs. Please consider using more saturated colours and more visually distinct icons.

          Ian Williams added a comment -

          cafuego, I sympathize with you accessibility issue; accessibility (even usability) tends to get overlooked too readily. This Jira was created specifically as a result of the changes to the weather-icons. The build-status icons actually come from a separate SVG file. Your issue will be much broader than the weather symbols which don't have red/green.

          I thought I had read prior activity on this for Jenkins, but could not find it now, though there is mention in the Jenkins Themes page. There is a UX SIG and an EPIC on UI Accessibility (nothing on color). It would be my suggestion to create a separate issue against core for color-blindness accessibility, tie it into the EPIC and notify the Gitter Channel or UX meeting agenda.

          You may wish to reference similar work done in SonarQube; Concerning the usage of colors, Accessibility issues, SONAR-11959: Colorblind-friendly coverage treemaps. Unrelated Jenkins plugin feedback on color.

          Also, reference this article on Defective Color Vision and Traffic Signals . To the UX team, it's often a matter of picking the right shade or can be a simple as embedding a secondary color pattern. use of Alt-Text is also helpful.

          Ian Williams added a comment - cafuego , I sympathize with you accessibility issue; accessibility (even usability) tends to get overlooked too readily. This Jira was created specifically as a result of the changes to the weather-icons. The build-status icons actually come from a separate SVG file . Your issue will be much broader than the weather symbols which don't have red/green. I thought I had read prior activity on this for Jenkins, but could not find it now, though there is mention in the Jenkins Themes page. There is a UX SIG and an EPIC on UI Accessibility (nothing on color). It would be my suggestion to create a separate issue against core for color-blindness accessibility, tie it into the EPIC and notify the Gitter Channel or UX meeting agenda. You may wish to reference similar work done in SonarQube; Concerning the usage of colors , Accessibility issues , SONAR-11959: Colorblind-friendly coverage treemaps . Unrelated Jenkins plugin feedback on color . Also, reference this article on Defective Color Vision and Traffic Signals . To the UX team, it's often a matter of picking the right shade or can be a simple as embedding a secondary color pattern. use of Alt-Text is also helpful.

          Ian Williams added a comment -

          tampa the symbols timja introduced were intended to replace the original icons - see health-*.png, which I guess were considered too busy and not in the flat/modernist/minimalist/material style that everyone is using now.

          Ian Williams added a comment - tampa the symbols timja introduced were intended to replace the original icons - see health-*.png , which I guess were considered too busy and not in the flat/modernist/minimalist/material style that everyone is using now.

          Vincent added a comment -

          ianw a style should never remove functionality or diminish UX. The new icons might look nice, but they provide less functionality and are a plain regression compared to the old ones. There is a limit to simplification and "less busy" styling and the new icons went way past that. These new design elements seem to all be made to make it look "cool" and "modern" when in reality a lot of folks using Jenkins could care less over specific looks and are more interested in functionality and ease-of-use. For that it matters less what specific things look like, but more what information they convey and how "easy" and readable they are. The new icons are none of that.

          I normally care very little about looks of things and modern redesigns do tend to look good, but when I saw these new icons my first impression was not "oh look nice new icons" it was "how do I get this awful abomination of weather icons out of here" and that speaks volumes to me. I'm not a UX designer by trade, but building webapps for a living I kinda have to do that part as well.

          Multiple people, myself included, already offered to handle UX and UI design in regards to these new icons and more, it's now up to getting those folks onboard.

          Vincent added a comment - ianw a style should never remove functionality or diminish UX. The new icons might look nice, but they provide less functionality and are a plain regression compared to the old ones. There is a limit to simplification and "less busy" styling and the new icons went way past that. These new design elements seem to all be made to make it look "cool" and "modern" when in reality a lot of folks using Jenkins could care less over specific looks and are more interested in functionality and ease-of-use. For that it matters less what specific things look like, but more what information they convey and how "easy" and readable they are. The new icons are none of that. I normally care very little about looks of things and modern redesigns do tend to look good, but when I saw these new icons my first impression was not "oh look nice new icons" it was "how do I get this awful abomination of weather icons out of here" and that speaks volumes to me. I'm not a UX designer by trade, but building webapps for a living I kinda have to do that part as well. Multiple people, myself included, already offered to handle UX and UI design in regards to these new icons and more, it's now up to getting those folks onboard.

          Tim Jacomb added a comment -

          We have a UX sig meeting tomorrow at 3pm UTC if anyone wants to join in and help, see events calendar for your local timezone:
          https://www.jenkins.io/events/#event-calendar

          Tim Jacomb added a comment - We have a UX sig meeting tomorrow at 3pm UTC if anyone wants to join in and help, see events calendar for your local timezone: https://www.jenkins.io/events/#event-calendar

          Tim Jacomb added a comment -

          tampa

          I missed this in the flood of messages

          > I have some spare time to make some new icons, but I cannot even get the svg from source to load in Inkscape or Gimp. What format are they in? How can they be loaded into Inkscape?

          I suspect it'll be because these are sprite sheets, you may need to reformat the file to 'prettify' it and then copy individual SVGs out to separate files
          Possibly setting a width and height on them

          and then they should render in your tool

          Tim Jacomb added a comment - tampa I missed this in the flood of messages > I have some spare time to make some new icons, but I cannot even get the svg from source to load in Inkscape or Gimp. What format are they in? How can they be loaded into Inkscape? I suspect it'll be because these are sprite sheets, you may need to reformat the file to 'prettify' it and then copy individual SVGs out to separate files Possibly setting a width and height on them and then they should render in your tool

          I would suggest using this kind of icons (of course the ones that are suitable for the different health status: sunny, partly-cloudy, cloudy, rainy, pouring)

          https://codepen.io/ashlewis/pen/jcuip

           

          If I have some time and I'm able to generate the sprite file in SVG format I will post it here, just in case someone finds it helpful. In my opinion the new icons are worse than the older basically for the reasons exposed above.

          Carlos García added a comment - I would suggest using this kind of icons (of course the ones that are suitable for the different health status: sunny, partly-cloudy, cloudy, rainy, pouring) https://codepen.io/ashlewis/pen/jcuip   If I have some time and I'm able to generate the sprite file in SVG format I will post it here, just in case someone finds it helpful. In my opinion the new icons are worse than the older basically for the reasons exposed above.

          carlosg_hms where is the license of those icons referenced?

          Sigi Kiermayer added a comment - carlosg_hms  where is the license of those icons referenced?

          siegfried I think that someone wrote that CSS code to ressemble the graphics used by BBC. I can see here his profile page: https://codepen.io/ashlewis/pens/ but of course there's no information about licensing or who is he.

          Carlos García added a comment - siegfried  I think that someone wrote that CSS code to ressemble the graphics used by BBC. I can see here his profile page: https://codepen.io/ashlewis/pens/  but of course there's no information about licensing or who is he.

          carlosg_hms i would argue that we can't just use some css code or some logos without knowing the license.

          Sigi Kiermayer added a comment - carlosg_hms  i would argue that we can't just use some css code or some logos without knowing the license.

          Ian Williams added a comment -

          carlosg_hms, Ash Lewis' icons appear to be SVG representations of the 2nd row in my weather-icons.png, which I pasted from former BBC designer Mike Afford website.

          I'd be 100% OK using BBC-like icons, as long as there's no copyright issues (we could consider a royalty free license SVG set from Mike Afford for €20), otherwise something very similar.

          Please review my thoughts above and the Jun 9, 2021 UX-SIG minutes.

          My considerations:

          • use [sunny, partly-cloudy, cloudy, pouring, lightning] as that most closely resembles the original symbols (let's pretend the new ones never happened). Original symbols:
          • confirm the colors work against both light and dark theme:
          • perhaps grey #999999, yellow #ffbb00, blue #5999ce is a happy balance if not dynamic

          Encourage you to proceed and submit mock-up or even a PR for the updated weather-sprites.

          Ian Williams added a comment - carlosg_hms , Ash Lewis' icons appear to be SVG representations of the 2nd row in my weather-icons.png , which I pasted from former BBC designer Mike Afford website. I'd be 100% OK using BBC-like icons, as long as there's no copyright issues (we could consider a royalty free license SVG set from Mike Afford for €20 ), otherwise something very similar. Please review my thoughts above and the Jun 9, 2021 UX-SIG minutes . My considerations: use [sunny, partly-cloudy, cloudy, pouring, lightning] as that most closely resembles the original symbols (let's pretend the new ones never happened). Original symbols: confirm the colors work against both light and dark theme: perhaps grey #999999, yellow #ffbb00, blue #5999ce is a happy balance if not dynamic Encourage you to proceed and submit mock-up or even a PR for the updated weather-sprites .

          Carlos García added a comment - - edited

          Attached weather-sprite.svg. I tested it with my Jenkins instance and it looks better.

          Graphic designing and arranging icons and that stuff is not my field of expertice at all, so please, feel free to do any changes you want

          At least it works.

           

          EDIT: Also attached all separate weather symbols in SVG format, for ease of editing them.

          Carlos García added a comment - - edited Attached weather-sprite.svg. I tested it with my Jenkins instance and it looks better. Graphic designing and arranging icons and that stuff is not my field of expertice at all, so please, feel free to do any changes you want At least it works.   EDIT: Also attached all separate weather symbols in SVG format, for ease of editing them.

          Ulli Hafner added a comment -

          > I'd be 100% OK using BBC-like icons, as long as there's no copyright issues (we could consider a royalty free license SVG set from Mike Afford for €20)

          If everybody is fine with these icons I would recommend that we buy such a license from our Jenkins budget. There are a couple of different sets on https://www.mikeafford.com/1/store/weather-icons/, so I am not sure which you would like to have.

          Ulli Hafner added a comment - > I'd be 100% OK using BBC-like icons, as long as there's no copyright issues (we could consider a royalty free license SVG set from Mike Afford for €20) If everybody is fine with these icons I would recommend that we buy such a license from our Jenkins budget. There are a couple of different sets on https://www.mikeafford.com/1/store/weather-icons/ , so I am not sure which you would like to have.

          Daniel Beck added a comment -

          Seems like this issue is more contentious than originally thought, and while "the few folks who review core PRs" evidently were not a great group to agree on new icons, "the folks who don't like the new icons" (without judgment, you bring up good reasons) is probably a similarly unsuitable group.

          FWIW I've mostly liked the Blue Ocean icons in the past; would they be a reasonable alternative? See https://github.com/jenkinsci/blueocean-plugin/tree/master/jenkins-design-language/icons/weather – They have color, are mostly flat, fairly unambiguous, and available in SVG. As a bonus, that would unify the icons used across the classic UI and a pretty popular plugin.

          Daniel Beck added a comment - Seems like this issue is more contentious than originally thought, and while "the few folks who review core PRs" evidently were not a great group to agree on new icons, "the folks who don't like the new icons" (without judgment, you bring up good reasons) is probably a similarly unsuitable group. FWIW I've mostly liked the Blue Ocean icons in the past; would they be a reasonable alternative? See https://github.com/jenkinsci/blueocean-plugin/tree/master/jenkins-design-language/icons/weather – They have color, are mostly flat, fairly unambiguous, and available in SVG. As a bonus, that would unify the icons used across the classic UI and a pretty popular plugin.

          Sigi Kiermayer added a comment - - edited

          I replaced them through chrome developer console and while they don't fit necessarily the style of the icon next to them, they do improve the situation a lot. I also like the thought of aligning.

           

          Sigi Kiermayer added a comment - - edited I replaced them through chrome developer console and while they don't fit necessarily the style of the icon next to them, they do improve the situation a lot. I also like the thought of aligning.  

          Vincent added a comment - - edited

          The partly cloudy icon in the BBC-like I would consider not very clear in meaning due to the main body of the sun not being visible. The other ones are fine, but that particular one is just awful.

          Has anyone actually read the license attached to those, it fairly clearly states that the use-case Jenkins has for them is not permitted so we would have to seek a special license with the creator to be in the clear. https://www.mikeafford.com/icons-eula/

          Given the pricing of just the standard set, which contains a lot more icons than otherwise needed I'm sure there are plenty of artists on various sites like Fiverr that would be willing to provide some icons for the same price, not to mention the exposure they get from providing for such a large project.

          It took me, a novice with Inkscape, about half an hour to design the icons that I linked, it's not a big task. The bigger task is maintaining readability and to some extend the theme already set by the previous icons, which is what I based mine on trying to also incorporate the new style icons. If we do agree on a style it should be trivial to have an artist create a rendition of the icons with the parameters most suited to the use within Jenkins.

          I am working on another project concerning weather data itself, I elected to use https://erikflowers.github.io/weather-icons/ for that, since the license is permissive enough to embed into the project. It seems somewhat similar to the MIT license just for fonts.

          Vincent added a comment - - edited The partly cloudy icon in the BBC-like I would consider not very clear in meaning due to the main body of the sun not being visible. The other ones are fine, but that particular one is just awful. Has anyone actually read the license attached to those, it fairly clearly states that the use-case Jenkins has for them is not permitted so we would have to seek a special license with the creator to be in the clear. https://www.mikeafford.com/icons-eula/ Given the pricing of just the standard set, which contains a lot more icons than otherwise needed I'm sure there are plenty of artists on various sites like Fiverr that would be willing to provide some icons for the same price, not to mention the exposure they get from providing for such a large project. It took me, a novice with Inkscape, about half an hour to design the icons that I linked, it's not a big task. The bigger task is maintaining readability and to some extend the theme already set by the previous icons, which is what I based mine on trying to also incorporate the new style icons. If we do agree on a style it should be trivial to have an artist create a rendition of the icons with the parameters most suited to the use within Jenkins. I am working on another project concerning weather data itself, I elected to use https://erikflowers.github.io/weather-icons/ for that, since the license is permissive enough to embed into the project. It seems somewhat similar to the MIT license just for fonts.

          tsurankov added a comment -

          Anything will look better than the blue symbols with the star of David instead of the Sun

          This looks good enough to me

          tsurankov added a comment - Anything will look better than the blue symbols with the star of David instead of the Sun This looks good enough to me

          Ian Williams added a comment -

          I thought I'd take a stab and propose the following weather icon set which I crafted.

          I reviewed the legacy 48x48 and 16x16 icons, the Blue-Ocean icons as well as current set (and many other sets on popular internet weather sites).
          I considered the following comments:

          • danielbeck "I've mostly liked the Blue Ocean icons", " They have color, are mostly flat, fairly unambiguous, and available in SVG ",
          • siegfried : "they don't fit necessarily the style of the icon next to them, they do improve the situation a lot ,
          • tsurankov : "Anything will look better than the blue symbols with the star of David instead of the Sun",
          • drulli : "I'd be 100% OK using BBC-like icons, as long as there's no copyright issues "

          The proposed set has the following characteristics:

          • "Flat" look, solid colour choice (no gradients)
          • "Jenkins Blue" (#0B6AA2) and "Unstable/Warning Yellow" (#FF9800)
          • 6 pixel primary outline stroke-width
          • "Linear" Sunburst, Raindrops and Lightning for a cleaner look
          • Cloud symbol is a simplified 3-circle arrangement, based on the Blue-Ocean cloud, consistent across all cloud symbols (there's one base cloud)
          • Progressively darker cloud as percentage gets worse; an easy visual queue
          • Consistent positioning
          • Obvious distinctiveness between symbols
          • Hopefully simple SVG for faster performance (I recall there was a performance issue, but suspect it was [related to the calculation related to the calculation, not the rendering)
          • No licensing issue - it's yours if you take it!

          Further to Daniel's comment, "Seems like this issue is more contentious than originally thought, and while "the few folks who review core PRs" evidently were not a great group to agree on new icons, "the folks who don't like the new icons" (without judgment, you bring up good reasons) is probably a similarly unsuitable group. ", I'm not sure how best to proceed. For now, I will simply attach the SVG here and await feedback (29 weather watchers) or direction to submit a PR. If there's somewhere else to discuss (Discourse / Gitter UX-SIG, etc.), please advise.

          Users wishing to evaluate can simply drop-in/rename the{{ ${JENKINS_HOME}/war/images/build-status/weather-sprite.svg}} with weather-jenkins.svg and refresh page.

           

          I never generated an SVG image before, so if something's amiss in the approach, please feel free to educate me what needs addressing. This is actually a subset of broader spectrum of icons I generated [weather-complete.svg] (I'd love to see the full sun only for 100% and the storm only for 0% or none). That explains the double symbol naming (<symbol " id="weather-pouring"> / <g id="storm-lightning">) and the "sprinkle" symbol.

          Ian Williams added a comment - I thought I'd take a stab and propose the following weather icon set which I crafted. I reviewed the legacy 48x48 and 16x16 icons, the Blue-Ocean icons as well as current set (and many other sets on popular internet weather sites). I considered the following comments: danielbeck "I've mostly liked the Blue Ocean icons", " They have color, are mostly flat, fairly unambiguous, and available in SVG ", siegfried : "they don't fit necessarily the style of the icon next to them, they do improve the situation a lot , tsurankov : "Anything will look better than the blue symbols with the star of David instead of the Sun", drulli : "I'd be 100% OK using BBC-like icons, as long as there's no copyright issues " The proposed set has the following characteristics: "Flat" look, solid colour choice (no gradients) "Jenkins Blue" (#0B6AA2) and "Unstable/Warning Yellow" (#FF9800) 6 pixel primary outline stroke-width "Linear" Sunburst, Raindrops and Lightning for a cleaner look Cloud symbol is a simplified 3-circle arrangement, based on the Blue-Ocean cloud, consistent across all cloud symbols (there's one base cloud) Progressively darker cloud as percentage gets worse; an easy visual queue Consistent positioning Obvious distinctiveness between symbols Hopefully simple SVG for faster performance (I recall there was a performance issue, but suspect it was [related to the calculation related to the calculation , not the rendering) No licensing issue - it's yours if you take it! Further to Daniel's comment, "Seems like this issue is more contentious than originally thought, and while "the few folks who review core PRs" evidently were not a great group to agree on new icons, "the folks who don't like the new icons" (without judgment, you bring up good reasons) is probably a similarly unsuitable group. ", I'm not sure how best to proceed. For now, I will simply attach the SVG here and await feedback (29 weather watchers) or direction to submit a PR. If there's somewhere else to discuss (Discourse / Gitter UX-SIG, etc.), please advise. Users wishing to evaluate can simply drop-in/rename the{{ ${JENKINS_HOME}/war/images/build-status/weather-sprite.svg}} with weather-jenkins.svg and refresh page.   I never generated an SVG image before, so if something's amiss in the approach, please feel free to educate me what needs addressing. This is actually a subset of broader spectrum of icons I generated [weather-complete.svg] (I'd love to see the full sun only for 100% and the storm only for 0% or none). That explains the double symbol naming ( <symbol " id="weather-pouring"> / <g id="storm-lightning"> ) and the "sprinkle" symbol.

          Ian Williams added a comment -

          This is the contrast against the existing icon sets:

          Ian Williams added a comment - This is the contrast against the existing icon sets:

          Ulli Hafner added a comment -

          Thanks for creating the new icons! Can you please also post the screenshot on https://community.jenkins.io? Maybe we can get some "thumbs up" clicks there to see what others think? Or even better: start a small poll in https://community.jenkins.io.

          Ulli Hafner added a comment - Thanks for creating the new icons! Can you please also post the screenshot on https://community.jenkins.io? Maybe we can get some "thumbs up" clicks there to see what others think? Or even better: start a small poll in https://community.jenkins.io .

          ianw tx for your proposal! i still have it on my todo to try it myself haven't had the time yet.

           

          I think its an approvement on what we have now. 

           

          What are your thoughts on making the sunrays yellow and blue though?

          Sigi Kiermayer added a comment - ianw  tx for your proposal! i still have it on my todo to try it myself haven't had the time yet.   I think its an approvement on what we have now.    What are your thoughts on making the sunrays yellow and blue though?

          Vincent added a comment -

          Suppose he wanted to keep some of the current theme with the blue outline, though I'd say keep the sun yellow and less thick outlines for the clouds and it would look quite good.

          Vincent added a comment - Suppose he wanted to keep some of the current theme with the blue outline, though I'd say keep the sun yellow and less thick outlines for the clouds and it would look quite good.

          Ian Williams added a comment -

          tampa, siegfried , the design decisions were my interpretation of aligning with the new "Jenkins look". I'll admit I did not thoroughly review the "UI/UX" or 'Jenkins themes" pages; it was more a visceral reaction to the new icons, as others also seem to have experienced.

          I choose the Jenkins Unstable Orangerather than the Blue Ocean yellow, for consistency and  it's more visible on white (esp. at small). I'd be quite happy with all yellow rays and 4 px outline and Blue Ocean yellow (#FBDF6B - below) or an in-between (eg: #FFC300), as they do look much cleaner. Not sure how well it aligns with the other style elements (ie:build-status).
           

           

          Ian Williams added a comment - tampa , siegfried , the design decisions were my interpretation of aligning with the new "Jenkins look". I'll admit I did not thoroughly review the " UI/UX " or 'Jenkins themes " pages; it was more a visceral reaction to the new icons, as others also seem to have experienced. I choose the Jenkins Unstable Orangerather than the Blue Ocean yellow, for consistency and  it's more visible on white (esp. at small). I'd be quite happy with all yellow rays and 4 px outline and Blue Ocean yellow (#FBDF6B - below) or an in-between (eg: #FFC300), as they do look much cleaner. Not sure how well it aligns with the other style elements (ie:build-status).    

          Sam K added a comment -

          Would highly appreciate some colour change. Thanks!!!

          Sam K added a comment - Would highly appreciate some colour change. Thanks!!!

          APE added a comment -

          As there hasn't been much movement on this I have created a theme for the Simple Theme Plugin which will replace the blue icons with some which have more colour.

          https://github.com/APEdevelopment/jenkins-colour-weather-icons

           

          APE added a comment - As there hasn't been much movement on this I have created a theme for the Simple Theme Plugin which will replace the blue icons with some which have more colour. https://github.com/APEdevelopment/jenkins-colour-weather-icons  

          Ulli Hafner added a comment -

          Wouldn't it be better for all if you can file such a change as PR for Jenkins core?

          Ulli Hafner added a comment - Wouldn't it be better for all if you can file such a change as PR for Jenkins core?

          Amit Dar added a comment -

          apedevelopment, how can your theme be used in an air gapped environments?

          Amit Dar added a comment - apedevelopment , how can your theme be used in an air gapped environments?

          APE added a comment -

          amidar fairly simple to do:
          Copy the contents of this file:

          https://raw.githubusercontent.com/APEdevelopment/jenkins-colour-weather-icons/main/src/jenkins-colour-weather-icons.css

          Then on the Jenkins machine go to the "Manage Jenkins -> Configure System" page and under the "Theme elements" section add an "Extra CSS" section and paste the contents of the file into the box (requires that the Simple Theme Plugin is installed).

          APE added a comment - amidar fairly simple to do: Copy the contents of this file: https://raw.githubusercontent.com/APEdevelopment/jenkins-colour-weather-icons/main/src/jenkins-colour-weather-icons.css Then on the Jenkins machine go to the "Manage Jenkins -> Configure System" page and under the "Theme elements" section add an "Extra CSS" section and paste the contents of the file into the box (requires that the  Simple Theme Plugin is installed).

          Amit Dar added a comment -

          thanks apedevelopment, but I think you are missing the png file in your explanation... isn't it required for this to work?

          Amit Dar added a comment - thanks apedevelopment , but I think you are missing the png file in your explanation... isn't it required for this to work?

          Gerold Broser added a comment - - edited

          @tsurankov Re "with the star of David instead of the Sun"

          For me this looks like a shuriken that killed the build.

          Gerold Broser added a comment - - edited @ tsurankov Re " with the star of David instead of the Sun " For me this looks like a shuriken that killed the build.

          Rafis Ganeyev added a comment -

          Rafis Ganeyev added a comment - How to return old theme like this: https://jenkins-demo.herokuapp.com/ https://jenkins-atlassian-theme.herokuapp.com/  

          Looks like after 2.332.1 LTS update something stopped working and icons return to colorless basic version (I was using APE version before).

          Konstantin Grammatikati added a comment - Looks like after 2.332.1 LTS update something stopped working and icons return to colorless basic version (I was using APE version before).

          APE added a comment -

          Open to suggestions on how to override the svg icons with 2.332.1 LTS, my CSS isn't that great so I might be missing an easy way to do it.

          APE added a comment - Open to suggestions on how to override the svg icons with 2.332.1 LTS, my CSS isn't that great so I might be missing an easy way to do it.

          Tim Jacomb added a comment -

          janfaracik has been doing some work in this area and presented at the last ux-sig meeting:
          https://www.youtube.com/watch?v=SOAw3NkVRbM&t=2054s

          notes: https://community.jenkins.io/t/user-experience-sig-feb16-2022/1579

          Tim Jacomb added a comment - janfaracik has been doing some work in this area and presented at the last ux-sig meeting: https://www.youtube.com/watch?v=SOAw3NkVRbM&t=2054s notes: https://community.jenkins.io/t/user-experience-sig-feb16-2022/1579

          APE added a comment - - edited

          Good to know some official colored weather icons are coming at some point.

          In the mean time I have updated my theme for 2.332.1 LTS, it requires both a css and javascript url in the Simple Theme Plugin now.  Instructions in the repository:

          https://github.com/APEdevelopment/jenkins-colour-weather-icons

          (Make sure the @version you are using for both files is @1.1.2)

          APE added a comment - - edited Good to know some official colored weather icons are coming at some point. In the mean time I have updated my theme for 2.332.1 LTS, it requires both a css and javascript url in the Simple Theme Plugin now.  Instructions in the repository: https://github.com/APEdevelopment/jenkins-colour-weather-icons (Make sure the @version you are using for both files is @1.1.2)

          Jan Faracik added a comment -

          Just opened a PR to address this issue - https://github.com/jenkinsci/jenkins/pull/7208 - do let me know your thoughts.

          Thanks, Jan.

          Jan Faracik added a comment - Just opened a PR to address this issue - https://github.com/jenkinsci/jenkins/pull/7208  - do let me know your thoughts. Thanks, Jan.

            janfaracik Jan Faracik
            apottere Andrew Potter
            Votes:
            54 Vote for this issue
            Watchers:
            50 Start watching this issue

              Created:
              Updated:
              Resolved: