Page MenuHomePhabricator

Update 'info' icon in OOUI and Codex
Closed, ResolvedPublic

Description

Preamble

The current 'info' icon is drawn in a 15px circle and uses 1.5px stroke width. This needs to be updated to a 16px circle and 2px stroke width

Proposal

Figma

Screen Shot 2022-06-27 at 10.19.25 AM.png (748×684 px, 50 KB)

Usage
IconPreferences(Notifications)IP Info (Popup)IP Info (Help)
Current
Screen Shot 2022-06-27 at 10.23.12 AM.png (340×796 px, 35 KB)
Screen Shot 2022-06-27 at 10.23.27 AM.png (610×1 px, 230 KB)
Screen Shot 2022-06-27 at 10.23.38 AM.png (554×1 px, 68 KB)
New
Screen Shot 2022-07-04 at 9.50.52 AM.png (374×884 px, 38 KB)
Screen Shot 2022-07-04 at 9.51.04 AM.png (616×1 px, 230 KB)
Screen Shot 2022-07-04 at 9.51.18 AM.png (568×1 px, 69 KB)
More usage examples

Acceptance criteria

Design

Code

Event Timeline

Prtksxna updated the task description. (Show Details)
Prtksxna added a subscriber: RHo.

Since the we have a thicker stroke width now we might want to consider using some gray instead of the black when the icon is being used for the help popup.

Prtksxna renamed this task from Update 'info' icon in OOUI, Codex and DSG to Update 'info' icon in OOUI and DSG.Jun 27 2022, 9:58 AM

Since the we have a thicker stroke width now we might want to consider using some gray instead of the black when the icon is being used for the help popup.

@Prtksxna you could use one of the following color tokens for the info icon:

  • color-base #202122: this is the color used for default text and icons.
  • color-subtle #54595D: you can use this color token if you want the icon to be more subtle.

Thanks @bmartinezcalvo. I've updated the new usage examples to use these colors.

This usage example is probably basically-the-same as what you have currently as "IP Info (Help)", but VisualEditor's dialogs make fairly extensive use of the help-popup mode:

image.png (936×1 px, 210 KB)

I figure it's worth mentioning because it has different alignments to the existing example.

Thanks @DLynch! More usage examples are always helpful and welcome

Sharing here for common visibility:

  • One concern – several years back when discussing this icon last time – resulted in using a serif "i" over sans-serif was the simpler recognition at the info icon's size specifically on non-retina displays.
  • Another one, that @bmartinezcalvo might be better able to talk to, is that Spanish also features the inverted exclamation mark "¡".

That said, the environment might have changed with the rise of HiDPI displays and maybe bigger commonality/universality of the icon, similar to the hamburger menu. Current Firefox info icon in comparison:
{F35313782}

Sharing here for common visibility:

  • One concern – several years back when discussing this icon last time – resulted in using a serif "i" over sans-serif was the simpler recognition at the info icon's size specifically on non-retina displays.
  • Another one, that @bmartinezcalvo might be better able to talk to, is that Spanish also features the inverted exclamation mark "¡".

@Volker_E it's true the serif one was the most recognizable icon for the info concept in the past, but I from some years to now the sans-serif info icon is as recognizable as the old one, since it's the simplified version of the old info icon with serif font.

Some reasons to use the sans-serif icon instead the serif one:

  • The simplified shapes of the sans-serif icon helps with the readability of the icon (I think that the robust shapes and the excess of detail in the serif icon doesn't help the icon to be better understood).
  • Its simple shapes make it integrate much better next to Regular texts or other form elements since the sans-serif icon doesn't weigh as much as the serif one.

Captura de Pantalla 2022-07-11 a las 11.46.47.png (338×1 px, 116 KB)

  • Although the "i" could remind the "¡" (exclamation symbol in Spanish language) we don't usually associate this symbol with an exclamation since we usually use the "!" one (with the point down) for exclamation/warning/dangerous symbols, being the "i" one (with the point up) usually used for info icons.

Captura de Pantalla 2022-07-11 a las 11.58.34.png (394×1 px, 119 KB)

Alright, let's give the (lo-DPI optimized) sans-serif icon a shot then. Waiting for an SVG file or source to start the library updates @Prtksxna.

  • One concern – several years back when discussing this icon last time – resulted in using a serif "i" over sans-serif was the simpler recognition at the info icon's size specifically on non-retina displays.

That is fair! We discussed this during design review too. To add to what Bárbara said, I had made serif variations too that you can see on Figma, and in the new size and stroke requirement it looks a bit too blocky and bold. Other variations have sub-pixel issues.

Definitely an important point for the long-run (if we decide to continue using Latin alphabets in our icon system).

{F35313782}

I'm unable to see this file, could you check the visibility permissions on it?

Alright, let's give the (lo-DPI optimized) sans-serif icon a shot then. Waiting for an SVG file or source to start the library updates @Prtksxna.

Hey @Volker_E! Since this icon is used as the help popup, we'd need to make sure that it fits well with that use case. I've added some screenshots based on @bmartinezcalvo's color recommendations here T280677: Revise and extend the info / help tooltip pop-up in our design component library. Could you please take a look at that too?

I've added the the SVG file in the description of the task. And here is the link to the correct Figma artboard.

@Volker_E can you check if its correctly formatted? Is there a particular way I should save this file?
@bmartinezcalvo Do we update this in Figma after its been added to OOUI? Is there anything else you'd need for that?

I've added the the SVG file in the description of the task. And here is the link to the correct Figma artboard.

@Volker_E can you check if its correctly formatted? Is there a particular way I should save this file?
@bmartinezcalvo Do we update this in Figma after its been added to OOUI? Is there anything else you'd need for that?

@Prtksxna I've reviewed the icon and it's all right about the pixels, the only thing I've updated in Figma is the Union selection (you need to group all icon shapes in one single shape), we need to apply this Union selection and name it "Union" so all icons have the same name in Figma since Figma is so sensible with the names of the frames and items).

Captura de Pantalla 2022-08-08 a las 11.31.58.png (1×1 px, 614 KB)

What we need to do now is replacing the current info icon in our icon system Figma fila with this new icon you created. As this current info icon is being used as instances in many designs (it's being used 841 different instances) if you simply replace the shape inside the icon box with the new icon, the overrides applied in any of these instance could be removed (review what will happen with the overrides applied in instances in the video bellow).

Captura de Pantalla 2022-08-08 a las 11.44.43.png (250×1 px, 98 KB)

So, to avoid breaking the main component that is being used as instances in many designs with different color styles applied, we need to be careful updating the main component containing the info icon and the best solution for this (the solution I currently know) is to use the Master plugin that helps you to replace and update main components without breaking them. I've create it this time using the Master plugin, you can review it in this branch. When the icon has been added in OOUI and Codex, we can merge it with the main library and the new icon will be visible in all instances where it was being used.

@Prtksxna by the way, I've updated the SVG with the info icon in the task because it needed to be exported with all shapes united (with the Union selection added).

bmartinezcalvo renamed this task from Update 'info' icon in OOUI and DSG to Update 'info' icon in OOUI, Codex and DSG.Aug 8 2022, 10:09 AM
bmartinezcalvo renamed this task from Update 'info' icon in OOUI, Codex and DSG to Update 'info' icon in OOUI and Codex.

Thanks Bárbara! I've reviewed the branch now. I'm not sure I completely understand what the Master plugin is going to do at this point. If there is anything else that I need to do to move this forward we might need to setup a pairing session for me to learn.

@Prtksxna by the way, I've updated the SVG with the info icon in the task because it needed to be exported with all shapes united (with the Union selection added).

Great! I noticed that you've removed the title and the xml tags, is that ok to put in OOUI? @Volker_E, let me know if I should add those back in (like in F35393432).

@Prtksxna the Figma branch with the new Info icon have been merged with the main Icon System file so you can now find the new Info icon there.

Change 823682 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] icons: Update 'info' icon to newest design

https://gerrit.wikimedia.org/r/823682

Change 823685 had a related patch set uploaded (by VolkerE; author: VolkerE):

[oojs/ui@master] icons: Update 'info' icon to newest design

https://gerrit.wikimedia.org/r/823685

Change 823682 merged by jenkins-bot:

[design/codex@main] icons: Update 'info' icon to newest design

https://gerrit.wikimedia.org/r/823682

Change 823725 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.1.0-alpha.9 to v0.1.0-alpha.10

https://gerrit.wikimedia.org/r/823725

Change 823725 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.1.0-alpha.9 to v0.1.0-alpha.10

https://gerrit.wikimedia.org/r/823725

Change 823685 merged by jenkins-bot:

[oojs/ui@master] icons: Update 'info' icon to newest design

https://gerrit.wikimedia.org/r/823685

@Volker_E as the icon was already updated in both OOUI and Codex, can you confirm me that we could solve this task?

Change 824279 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/core@master] Update OOUI to v0.44.3

https://gerrit.wikimedia.org/r/824279

Change 824279 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.44.3

https://gerrit.wikimedia.org/r/824279

matmarex edited projects, added OOUI (OOUI-0.44.3); removed OOUI.