Page MenuHomePhabricator

Use standard external link icon for external links
Open, Needs TriagePublic

Description

Issue

One of the icons currently not following Wikimedia DSG's icon guidelines is external link icon:

New, icon guidelines adhering external link icon:

Proposal

BeforeAfter

Developer notes

  • Ensure that we use Accent/link color for icon as it is part of the clickable area
  • Use smaller version of the icon (an OOUI indicator following 12px canvas) to provide crispiness on lo-dpi screens
  • Use 15px padding-[right in LTR/left in RTL] em equivalent for placing icon in link correctly. Preferred over 16 in Vector base font-size environment.

Note that icon color always follows link normal color. Visited styling is not possible due to browser security & privacy functionality.

Event Timeline

Change 622763 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] [modern][styles] Use default Design Style Guide link color choice

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

BeforeAfter

As the new icon isn't pixel sharp and uses and more similar stroke width and colour to the text, it blends in with the text more than the previous icon. It also fills a larger area.

To maintain some visual distinction we could increase the padding very slightly (16px):

@Esanders great point about the icon blending in with the text. I wonder if it needs to be blue?

Yeah - I did think about the colour too. The downside with black is that it's less obvious that it's a clickable part of the link, but that may not be that important. What do others think?

Note also that, as seen on the screenshot in the task description

…the color of the original icon doesn't change when the link is visited and is purple. So, ideally, either the icon should change its color with the link it is attached to, or it should be black. I would perhaps prefer the former, as a black icon creates unwarranted visual noise. And, yes, makes it seem like the icon is not clickable.

Yeah - I did think about the colour too. The downside with black is that it's less obvious that it's a clickable part of the link, but that may not be that important. What do others think?

And, yes, makes it seem like the icon is not clickable.

I note that the icon is indeed not clickable. At least you cannot click it in isolation and I personally never took it as a means to signify that the link is clickable. It's a mere visual affordance at what type of resource the link (the real clickable area) will lead a user to. The icon cannot be affected by any font styling too; underlining/italics/bolding and whatnot and that further reinforces that fact, because these styling do often changes the shape/color of the link and force it to differ from that of the icon. Also, as said below, icons for other resources are colored differently than the link, and that, to my knowledge has never caused any confusion.

So, ideally, either the icon should change its color with the link it is attached to, or it should be black.

Indeed a distinguishing color different from the link style would make it better, and the black in Alex style looks quite good.

I would perhaps prefer the former, as a black icon creates unwarranted visual noise.

Not sure what that means, but icons for other resources are also distinctly colored and conspicuously took space larger than this icon. See PDF icon example below. In comparison, definitely this PDF icon creates more visual distraction than the black icon above. In addition, it being colored differently from the clickable link has not caused any problem or confusion.

@Esanders great point about the icon blending in with the text. I wonder if it needs to be blue?

Looks good to me and fixes the blending/spacing issue.

@Ammarpad Thanks for a good counterexample. Now I don't have an opinion on this.

I note that the icon is indeed not clickable. At least you cannot click it in isolation and I personally never took it as a means to signify that the link is clickable.

(The icon is clickable, not the link.) What do you mean? I personally find it a helpful bonus that the icon is clickable too in very short links that are easy to miss otherwise:

Hi Jack, I did clarify that. I mean it's not clickable in isolation (separate from the link text). You can only click the link+icon as a whole.

I personally find it a helpful bonus that the icon is clickable too in very short links that are easy to miss otherwise:

Changing the color to black will not change that behavior. As far as I can see, no one is proposing to remove the icon from the active click/touch area. The issue here is about the color, spacing and blending with the textual label.

Hi Jack, I did clarify that. I mean it's not clickable in isolation (separate from the link text). You can only click the link+icon as a whole.

I just don't think I know where the icon can be met in isolation if using the standard wiki markup. Isn't it always accompanying the link? I guess I should have said "makes it seem like the icon is not a part of the link".

I note that Minerva is already using this new icon.

Perhaps a better example to look at since there is more variety in where the icon appears (middle of a line, end of a line, etc.)

currentnew icon (blue)new icon (black)

Hi Jack, I did clarify that. I mean it's not clickable in isolation (separate from the link text). You can only click the link+icon as a whole.

I just don't think I know where the icon can be met in isolation if using the standard wiki markup. Isn't it always accompanying the link? I guess I should have said "makes it seem like the icon is not a part of the link".

The icon is only accompanying link elements with the class external, it's never a standalone. It should be clickable in major browser rendering engines. You probably could fabricate something with  , but I'd leave this outside of use cases we care about code-wise.

BeforeAfter

As the new icon isn't pixel sharp and uses and more similar stroke width and colour to the text, it blends in with the text more than the previous icon. It also fills a larger area.

To maintain some visual distinction we could increase the padding very slightly (16px):

I've updated to 15px. 16 seems a tad too big in comparison to the spaces size:

Also note, that the visited link icon issue (not changing color) is the status quo.
This is a limitation in modern browsers due to security reasons, not delivering different images to access (some of) your browsing history data without your notice.

@Esanders Have updated the patch to make an exception here for the icon and use an optimized smaller canvas one to circumvent described blurriness by you.

Volker_E updated the task description. (Show Details)

Change 674166 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] [poc][styles] Unifying on standard external link icon

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