Open timja opened 3 years ago
Arguably a regression.
The "changelog weather" on https://www.jenkins.io/changelog/ and https://www.jenkins.io/changelog-stable/ should similarly be updated with different colors once it's done in core.
ianw:
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.
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.
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
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
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.
This is now an inconsistent mix of Tango style icons and flat theme.
Maybe add an option to switch between old and new icons?
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.
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.
> 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.
ianw:
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:
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.
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.
ianw:
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.
ianw:
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.
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.
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
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.
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.
carlosg_hms i would argue that we can't just use some css code or some logos without knowing the license.
ianw:
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:
Encourage you to proceed and submit mock-up or even a PR for the updated weather-sprites.
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.
> 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.
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.
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.
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.
Anything will look better than the blue symbols with the star of David instead of the Sun
This looks good enough to me
ianw:
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:
The proposed set has the following characteristics:
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 (
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.
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.
ianw:
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).
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
Wouldn't it be better for all if you can file such a change as PR for Jenkins core?
apedevelopment, how can your theme be used in an air gapped environments?
amidar fairly simple to do:
Copy the contents of this file:
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).
thanks apedevelopment, but I think you are missing the png file in your explanation... isn't it required for this to work?
geri:
@tsurankov Re "with the star of David instead of the Sun"
For me this looks like a shuriken that killed the build.
How to return old theme like this:
https://jenkins-demo.herokuapp.com/
https://jenkins-atlassian-theme.herokuapp.com/
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:
![](https://issues.jenkins.io/secure/attachment/54240/54240_image-2021-03-15-15-33-49-345.png)
Originally reported by apottere, imported from: New weather icons added in #5065 are "samey" and hard to distinguish from each other