1705906 - Proton small icons with thin lines makes them hard to "read"

Status: NEW

(Firefox :: Toolbars and Customization, defect, P3)

Description

[gwarser]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

Start new Nigthly profile 20210417095008 and look at some icons.

Actual results:

Some icons like sidebars or bookmarks menu have weird horizontal shadows, like broken antialiasing, which make them not pleasant to look at.

Other are so thin that is hard to distinguish they are active or not - back/forward arrows for example.

Some are so tiny that it's difficult to see what they mean, for example I had to look from 20cm to see arrow in update available marker (I was curious what this tiny "scratch" is) and to figure out that "fullscreen" button in hamburger menu are actually two arrows.

Additionally all these thin horizontal lines are difficult to me because of my astigmatism.

In general - there are lot of whitespace which should make them easier to read but it is pointless, because in the same time icons are small and thin which make them far worse to read than before.

This is on 24'' HD monitor.

Comment 1

[gwarser]

Tracking protection "shield" - it's completely indistinguishable when something is blocked or not.

Comment 2

[Sam Foster [:sfoster] (he/him)]

:gwarser, would you be able to attach a screenshot of the areas you mention, you so I know we are looking at the same thing? It looks like you are on linux, what are your display resolution and scaling settings?

Comment 3

[gwarser]

Attachment: Screenshot_20210419_192500-1.png

Blur on horizontal lines

Comment 4

[gwarser]

Attachment: Screenshot_20210419_181330.png

This is from different profile with proton disabled and from different build, but do you actually see this white arrow on green background??? There was similar arrow in green dot painted over hamburger menu when update is available.

Comment 5

[katieC]

Attachment: screenshot_addressBar_shield [Apr 19, 2021]

No visual issues with the shield (please see attached screenshot). New icons are designed intentionally with a thinner line weight (than the previously heavier line weight set) for the MR1 update.

The other screenshots do not look accurate (ex: arrow on pale green background). Please be sure you're using the latest update as icons, colours, etc are still being implemented and updated.

Comment 6

[gwarser]

Attachment: Screenshot_20210419_193503-1.png

I thought this small blur in hamburger menu is caused by my astigmatism (looks like it - slight vertical blur on horizontal lines). But turns out this button also has small distortion like other icons, there is real shadow bellow each line. This is very unpleasant when looking from normal distance, especially for such small icon with such thin lines.

Comment 7

[gwarser]

Attachment: Screenshot_20210419_195823.png

These two are indistinguishable when not looked side-by-side.

Comment 8

[Sören Hentzschel]

No visual issues with the shield (please see attached screenshot)

There is no issue in the technical sense. But as explained by gwarser it's really, really difficult to recognize the state in real usage of Firefox and if you don't see both states side by side. Maybe it's a bit easier in dark mode but in light mode I have to strain my eyes to get the information I want to get with this icon.

Comment 9

[Sam Foster [:sfoster] (he/him)]

Thanks for the screenshots. This is a similar issue to bug 1704274, but I'll keep them separate for now as I think that one is focused on whether there is a technical problem with how the icons are produced and rendered; this is more about the icon style and design decisions and a possible usability and accessibility regression.

Comment 10

[gwarser]

Attachment: Screenshot_20210419_222810.png

"Fullscreen" button is also tiny both for viewing and for clicking.

Comment 11

[Sam Foster [:sfoster] (he/him)]

(In reply to gwarser from comment #10)

Created attachment 9216910 [details]
Screenshot_20210419_222810.png

"Fullscreen" button is also tiny both for viewing and for clicking.

This one is not the new icon (for better or worse). Bug 1693856 will update these icons.

Comment 12

[gwarser]

I just looked at this article: https://www.laptopmag.com/news/mozilla-firefox-update-is-making-me-abandon-chrome-heres-why

On screenshots, permissions icons looks more thick and have better contrast - why I don't see this on my Nightly?

They still have some problems with blur.

Comment 13

[BelFox]

(In reply to gwarser from comment #7)

Created attachment 9216868 [details]
Screenshot_20210419_195823.png

These two are indistinguishable when not looked side-by-side.

Same here. I like the modern look of the new icons, but it's really hard to distinguish their different states, and I'm not that old ;)
This goes for the Tracking Protection icon, but as well for the Download button.

Maybe a slightly thicker outline could be used to set active/colored icons apart from their non-active/black counterparts?

Comment 14

[BelFox]

Just wanted to add:

• Above testing was in Windows 10.
• I think it's important that Firefox makes it visible that Tracking Protection is doing it's thing in the background, as the extended Tracking Protection is one of the USP's of Firefox. So that makes the state of the icon being clearly visible all the more important.

Comment 15

[Gerhard Großmann]

Attachment: speaker-icon.png

I’d like to add the speaker symbol (indicating tabs playing media) to the list of hard to recognizable icons. It’s a very complex shape and in this size (smaller than a favicon) for me it blurs into a gray ball of wool.

Is it planned to make the icons customizable? I’m really not happy with this hard to read line icons, blurring when not pixel perfect and being that thin that its color is difficult to recognize. For me functionality and accessibility always comes first before a trendy design.

(Screenshot taken on Ubuntu 20.04 with light theme).

Comment 16

[Shane Hughes [:aminomancer]]

The sound-related icons all appear proportioned for a bit larger scale than they're given. Especially the audio blocked icon, which has an unnecessary circle around the meat of the icon, the play icon ▶

I think the speaker part of the audio icons should be a much smaller little pip, there should be 3 sound waves, and they should not extend so far up and down. The mute icon should have no sound waves but an x instead. Check Windows 10's volume button for a perfect example. I will draw up some versions of it this weekend and submit a patch so we can see it in practice.

I think tracking-protection-active.svg would be improved by making it solid. That's a bit more extreme than my other proposal but would be vastly more accessible. Well, generally I prefer solid icons to line art, and I wasn't a huge fan of the proton icons refresh, but assuming it's here to stay, "active" states are one condition where I think solid art would be appropriate. This would make it much more distinct from the inactive state while still preserving cohesion between the icons.

Comment 17

[Adrian Florinescu [:aflorinescu]]

Not sure why this issue remained under Unconfirmed, let's address that ->> setting it to New.