Closed Bug 1507715 Opened 1 year ago Closed 1 year ago
Update error icon to Photon's disc design
Discussed with Victoria and she would like to use this error icon from Photon design system: https://design.firefox.com/photon/patterns/errors.html#icon It's a 14px icon with 2px-wide exclamation mark (the dot is a circle of 2px diameter). For the Console, we use a 10px icon. I've worked on adapting the exclamation mark to fit the 10px circle, and it looks doable.
Assignee: nobody → florens
Status: NEW → ASSIGNED
Here are the results @2x with 10px icons (left) and 12px icons (right). The current icons (triangle error/warning and round info) are 10px, but this 12px option is growing on me. For context, Console rows are 20px tall.
The larger size and small gain in clarity does seem to help differentiate from the info icon, otherwise they look incredibly similar, together you would be forgiven for assuming it was the red equivalent of info. Beyond the scope of your question I know, but thinking aloud perhaps there is an argument here for changing the info icon? There are some common patterns like an italic "i" with no enclosing shape which could be explored. Likely though, the info circle is more frequently seen and recognised than the icon for error.
The updated or tweaked icons I've been working on in Figma. - 12px error and info icons - some variants for the info icon (filled vs outlined) - "input" and "return value" icons are a tiny bit sharper on 1x displays
Attachment #9025585 - Attachment is obsolete: true
> [Victoria] I think we should keep the triangle shape for all yellow warning icons for vision impairment reasons (it’s in the design system as well). I do love the info icon being outline to set it apart from the error. So something like: error = filled circle warning = triangle info = outlined circle
So this is what I have: - Bottom line is the current 10px icons (plus a new round error icon in the middle) - Middle line are 12px icons, with the inner elements following the pixel grid (or half-pixels for some vertical alignments). Technically correct, but it can look a bit off. - Top line, finally, are tweaked versions of the 12px icons, with the triangle's bottom not exactly touching the bottom, the inner dots and lines a bit shifted (and even squashed for the "i"), trying to achieve a good look in high resolution but also a very readable 1x rendering. I used a "tweak it till it works at 1x" and checked on 2 different screens, so it seems we have our winners.
Hi Victoria. This is what I'm getting in the Console after the icon update. I've included @1x and @2x screenshots. Is this what you had in mind?
(SVG source update.)
Attachment #9025747 - Attachment is obsolete: true
These icon shapes look great! Re: the red color, do you mind trying the Photon Red 60 #d70022? It might be a bit too dark for dark mode. (I'm having color perception issues right now due to nightime color temp, but will look at this again when it's daytime.
With the new colors (landing today), we're using: - Red 60 (a bit dark) in the light theme - Red 40 (a bit light) in the dark theme The screenshot already uses Red 60, but it seems the `#d70022` translated to `#df0030` when I did the screenshots or the composite image. For the dark theme, Red 40 can look a bit pink or washed out. It's somewhat necessary for contrast, but the more vibrant Red 50 would be an option too. Red 60 is indeed too dark for the dark theme.
- Add a new 12px round icon for Console errors. - Update the warning (triangle) icon to use the same 12px size. - Update the info icon to use the same 12px size, and differentiate its design from the error icon. - Tweak the Console's input and return icons to be a tiny bit bigger (for better overall visual balance) and crisper @1x.
Pushed by firstname.lastname@example.org: https://hg.mozilla.org/integration/autoland/rev/b544791562a0 Update console error, warning and info icons; r=nchevobbe
You need to log in before you can comment on or make changes to this bug.