1386454 - Firefox onboarding notification icon for add-ons (with puzzle-piece & gray shapes) looks corrupted & hard to identify

Status: RESOLVED DUPLICATE of bug 1382520

(Firefox :: General, enhancement)

Description

[Daniel Holbert [:dholbert]]

Attachment: screenshot (look at the green-and-gray icon on the onboarding notification at the bottom)

I just got an onboarding notification at the bottom of my new-tab page (in a fresh profile, in a local build).

No offense intended to the icon designer -- but to my eye at least, at my normal viewing-distance from the screen, the icon looked like it had some sort of graphical corruption.  The green part is clearly a puzzle piece, but the gray parts were really hard to identify, at the size that this icon is displayed -- I initially thought they were something broken being superimposed ontop of the puzzle piece, or jutting through from below the notification due to a stacking-order bug or something. (Note that the gray of the bolt is approximately the same color as the gray background of the new-tab page -- this makes these gray parts look kind of like they're holes that have been punched through the notification to show the background underneath, which is disconcerting.)

See the attached screenshot, to see what I mean.


After poking at it with DOM inspector, I discovered that there was no corruption and that the full-resolution icon is available here:
resource://onboarding/img/icons_addons-notification.svg
https://hg.mozilla.org/mozilla-central/raw-file/36f95aeb4c77f7cf3b3366583008cd6e4b6b1dba/browser/extensions/onboarding/content/img/icons_addons-notification.svg

When viewing the icon at its full resolution, I can see that the gray parts are a bolt and a wrench. But at the size they're displayed in Firefox (viewed from a normal viewing distance), it's pretty hard to tell that that's what they're supposed to be -- to me, at least.

Can we fix up this icon to make the bolt/wrench easier to see, before we ship these onboarding notifications in a release? (maybe increasing the contrast & changing the grays to be a more-different color than our page background)

Comment 1

[Daniel Holbert [:dholbert]]

Here are some specific things that make the icon look broken & hard to identify, for me, in its context in our UI:

 (1) There is very little contrast between the wrench's color and the surrounding background.  So, the center & right parts of its characteristic u-shaped top is really hard to visualize -- especially because the right half is covered up by the bolt.  (The left half is a bit easier to see because it has a shadow/outline, but that's not enough to suggest "wrench" on its own.)

 (2) There is even less contrast between the right face of the bolt (very light) and the background adjacent to it, so that face just disappears, basically.  This means its characteristic hex-shaped top is very hard to visualize.

 (3) It's also hard to see the central edges between the wrench & the puzzle-piece & the bolt, in the darker area, because that area is all just tiny patches of clustered dark colors, kind of.

 (4) The dominant color of the bolt and the wrench are virtually the same as the background color for the rest of the page (the non-notification-area background).  So, if the user is having trouble identifying them, they can't help getting the impression that these gray shapes might be a chunk of that background which has been mis-drawn, in the wrong place -- or similarly, that it might be a "punch-through" to the background behind the notification.

Comment 2

[Daniel Holbert [:dholbert]]

rexboy, I think you've worked on this onboarding stuff - do you know what we can do here? (or: maybe these icons are already getting additional work in a bug somewhere?)

Comment 3

[Verdi [:verdi] Best to slack me]

Sean designed this - not sure if he has time to do something here but let's NI him.

Comment 4

[[e-mail]]

Hi Daniel, 

though we do not have plan to change the icon yet, Verdi have needinfo sean and let the designer decide

Comment 5

[[e-mail]]

visual assets are updated, they should be the final images

Comment 6

[Daniel Holbert [:dholbert]]

Thanks! Looks like the final version of this icon is:
https://hg.mozilla.org/integration/autoland/raw-file/bdddd267a26e/browser/extensions/onboarding/content/img/icons_addons-notification.svg

And indeed, the colors are a bit darker & have more contrast, which I think mostly addresses my concerns here.

Comment 7

[Francis Lee [:frlee]]

remove whiteboard tag due to its DUPLICATE