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

Arguably a regression.

timja commented 3 years ago

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.

timja commented 3 years ago

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.

timja commented 3 years ago

drulli:

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.).

timja commented 3 years ago

stevenschlansker:

+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.

timja commented 3 years ago

oleg_nenashev:

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

timja commented 3 years ago

drulli:

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

timja commented 3 years ago

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.

timja commented 3 years ago

thokari:

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.

timja commented 3 years ago

JIRAUSER132049:

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

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

timja commented 3 years ago

drulli:

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.).

timja commented 3 years ago

stevenschlansker:

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.

timja commented 3 years ago

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

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.

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?).

timja commented 3 years ago

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.

timja commented 3 years ago

drulli:

> 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.

timja commented 3 years ago

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:

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.

timja commented 3 years ago

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.

timja commented 3 years ago

cafuego:

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.

timja commented 3 years ago

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.

timja commented 3 years ago

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.

timja commented 3 years ago

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

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.

timja commented 3 years ago

timja:

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

timja commented 3 years ago

timja:

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

timja commented 3 years ago

JIRAUSER130554:

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)

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.

timja commented 3 years ago

carlosg_hms where is the license of those icons referenced?

timja commented 3 years ago

JIRAUSER130554:

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.

timja commented 3 years ago

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

timja commented 3 years ago

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:

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.

timja commented 3 years ago

JIRAUSER130554:

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.

timja commented 3 years ago

drulli:

> 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.

timja commented 3 years ago

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.

timja commented 3 years ago

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.

timja commented 3 years ago

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.

timja commented 3 years ago

JIRAUSER131265:

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

This looks good enough to me

timja commented 3 years ago

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:

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 ( / ) and the "sprinkle" symbol.

timja commented 3 years ago

ianw:

This is the contrast against the existing icon sets:

timja commented 3 years ago

drulli:

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.

timja commented 3 years ago

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?

timja commented 3 years ago