Page MenuHomePhabricator

Differentiate between internal, sister-wiki, interwiki, and external links visually
Open, Stalled, NormalPublic

Description

Problem

In the past we've visually differentiated internal links, interwiki links, and external links. We've use only color to differentiate between first two and we use an icon for the external links. When we switch to the new blue recently, we lost the differentiation between internal links and interwiki links [1].

[1] JR: This statement is not true. Interwiki and internal links have always been the same. See gerrit patch that changed the link color.

Design

  1. Use icons for
    1. interwiki links (*only for logged in users, otherwise these would be styled as internal links)
    2. external links (links to other websites)
  2. Keep color the same at #36c for all three
  3. Update the external link icon to be more flat and inline with Wikimedia's iconography

Rationale: after trying out various icons for interwiki links, I think it makes the most sense to keep the distinction between the two icons quite subtle (as it was in the past, the two shades of blue were very close together). This way more experienced/pro users will be able to pick up on it, and it won't be distracting for new users




Acceptance criteria

  • Links with the extiw class show the new icon
  • Update external link icon per attached asset.

Developer notes

  1. This is meant for MinervaNeue only and not Vector
  2. This should only be for logged in users
  3. Interwiki links are marked up with .extiw

QA


and the second link (Coins from ancient Syracuse and Sicily) uses the external-link icon:

  • Check RTL and LTR modes are working as expected

Update July 30

The original changes proposed in this task were rolled back due to the treatment of interwiki links. We decided to roll back the changes to the following status:

  • External links are differentiated by an icon adjacent to the link
  • Internal and interwiki links appear identical

We will keep this task open to track the second part of the task - differentiating between internal and interwiki links

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 440370 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Update: add internal and revise external link icons

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

Jdlrobson updated the task description. (Show Details)

Over to you for design review Alex.

@Niedzielski @Jdlrobson looks super crips & nice on my phone. On my lower resolution desktop monitor it's slightly faded. Is there any other (easy) approach to rendering the icon? Happy to send over an asset and test it out. If not I'm happy shipping this.

@alexhollender, here's what I see on standard and hidpi monitors (and zoomed in at 4x, no interpolation):

Here's the old icon for reference:

We use these icons all over the place so I'm also happy to iterate if you think the presentation can be improved.

@Niedzielski I guess I'm not sure what it would look like to iterate on this, and don't know that it would yield better results. Is there another approach you know of that would be low effort to try? If not let's move on.

We could use a CSS media query to limit the SVG asset to hidpi or high resolution displays and fallback to a hand tuned 10x10px PNG otherwise.

This comment was removed by alexhollender.

Ok — if it's not too much effort to give that a shot let's do it. I'm happy to test it out.

also, just noticing that the current implementation uses an SVG but somehow renders more crisply, even though the lines are similar weights. I wonder if there's anything we can learn from that.

@alexhollender, here's with a 20x20px SVG and a background-size of 10px on a standard density display:

Looks about the same to me.

@Niedzielski alright, I think I've fixed the icons. From what I can tell either the 10px or the 20px versions attached here should render more crisply than what we've been using thus far. Want to try out one of these and let me know if it also looks better on your end (not sure if testing locally skewed the result)?


Change 441421 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/MinervaNeue@master] Update: link icons for standard density displays

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

@alexhollender the new 10px lot look stellar. I've deployed these changes to https://readers-web-stephen.wmflabs.org/ for your review. You can verify the version is still deployed by checking that MinervaNeue is at revision 2ce4242 on https://readers-web-stephen.wmflabs.org/wiki/Special:Version.

@Niedzielski wooo!! Super glad we took the time to get to the bottom of this. Just checked on desktop retina, desktop non-retina, and mobile. Looks great all around. Adding a note about QA for Anthony and moving it along.

alexhollender updated the task description. (Show Details)
alexhollender reassigned this task from alexhollender to ABorbaWMF.
Niedzielski updated the task description. (Show Details)Jun 21 2018, 10:38 PM

Change 441421 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Update: link icons for standard density displays and CSS

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

This looks good to me on readers-web-master.wmflabs.org

Tried a few different browsers and device combos.
(The icon is after the words "Ancient Greek:")

ovasileva added a subscriber: ABorbaWMF.
ovasileva closed this task as Resolved.Jun 28 2018, 10:40 AM

Verified as well, resolving. Thanks all!

stjn added a subscriber: stjn.EditedJul 2 2018, 9:48 PM

Hi, sorry, two trivial points to not create tasks about simple stuff:

  1. Interwiki links shouldn’t be marked with an icon, it is quite ambiguous as it is represented in the interface and would just give false impression (like it gave me, see the edit) that the link is external.
  2. .plainlinks code for mobile is not good enough, it seems to cancel out every padding instead of the right one.

Cheers.

Jdlrobson reopened this task as Open.Jul 2 2018, 10:46 PM

Interwiki links shouldn’t be marked with an icon, it is quite ambiguous as it is represented in the interface and would just give false impression (like it gave me, see the edit) that the link is external.

@alexhollender I can't comment too much on why we did this, but I can understand why it might be confusing and feels like we should discuss this. Reopening so we can clear this up. Have we asked the community for feedback, given I believe that was where this original request came from?

"interwiki" links (arrow inside a box)


External links: They are different from external links which are subtly different (arrow goes outside box)

Reading through the comments here, as well the comments on T191405 and T178862 it seems like there is a lack of consensus around:

  1. what should be considered an interwiki link
  2. the value of visually distinguishing interwiki links and external links for editors/contributors
  3. the value of visually distinguishing interwiki links and external links for readers

From what I can gather interwiki links are in a gray area in between normal links and external links. I wonder if it's worth having a discussion around the definition of interwiki links before we try to make any further changes? Curious what people think of that sequencing, and if there is agreement I'm curious where the best place to have that discussion might be? Alternatively, if someone is able to read through the 3 tasks and thinks there is a clear way forward that doesn't warrant further discussion, please say so.

@Jdlrobson @Quiddity @TheDJ @stjn @Volker_E @Nirzar @ovasileva

stjn added a comment.Jul 5 2018, 11:39 AM

If such discussion is needed, I personally think that for now links styling should be consistent across the platforms as much as possible.

Thanks Alex, I agree with your read of it.
Generally, +1 for consistency with Desktop for this, for now, in order to remove the unexpected problems/changes the recent tweak causes. (e.g. inconsistent application of "plainlinks" in templates, causes oddities)
Additionally, the new "internal-link icon" is very confusable with the old "external-link icon", when used at actual sizes.
If a change is to occur, I believe Wikimedia sibling project interwiki links should be styled more closely to internal links, than external (i.e. no added icon). I say this because the projects should be working (and thought of) together more closely, and not have anything that drives them (further) apart, which an "external site"-esque icon subtly does. I lean in favor of retaining a color difference as the only distinguishing aspect (between internal and inter-sibling).

stjn added a comment.Jul 5 2018, 6:09 PM

There are also some issue in a more global way with interwiki links, since you can write [[google:test]] and it counts as a ‘local’ interwiki link, so different types of interwiki links are likely to need different treatment in future (but that doesn’t mean that the current approach shouldn’t be used everywhere, just that it could be tweaked consistently).

There are also some issue in a more global way with interwiki links, since you can write [[google:test]] and it counts as a ‘local’ interwiki link, so different types of interwiki links are likely to need different treatment in future (but that doesn’t mean that the current approach shouldn’t be used everywhere, just that it could be tweaked consistently).

Yes. That aspect is discussed in the previously mentioned T191405

Re: consistent link styling across Minerva & Vector

  • Minerva uses #36c for all links, which is indistinguishable from #36b, the color Vector uses for interwiki links, so we couldn't have consistency without changing some other things around

Re: the icons being confusingly similar

  • The current treatment in Vector (interwiki links are a different shade of blue than normal links) seems equally problematic as two similar icons, in that unless you see a normal link and an interwiki link side by side it's pretty much impossible to tell which is which. So perhaps the main difference is that with the Vector solution it's very easy to identify external links (they are the only ones with icons), whereas with the Minerva solution it's very easy to identify normal links (they are the only ones without icons), but external and interwiki links are more difficult to identify amongst each other.

I think rather than discussing solutions it might be better to focus on the questions I mentioned above, specifically:

  1. what is the value of visually distinguishing interwiki links and external links for editors/contributors?
  2. what is the value of visually distinguishing interwiki links and external links for readers?

I think we need to have more clarity/agreement there in order to arrive at a solution that's significantly better than what is currently on production in Minerva. But again I'm not sure it's worth spinning on this more until we've determined what interwiki links are in the first place 🙂

discussed with @Quiddity, @CKoerner_WMF and @alexhollender - we think the best way forward currently is to go ahead and roll back.

@ovasileva I appreciate the flexibility and the communication which led to above decision. We'll be able to use @alexhollender's icons in a different context. Here, the problem statement and the status quo of grouping links is not fully clear as the current interwiki grouping seems arbitrary at best and the proposed solution would confuse majority of our readers.

Change 446807 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/MinervaNeue@master] Revert: "Update: add internal and revise external link icons" & "Update: link icons for standard density displays and CSS"

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

Do we want to do a partial rollback or full rollback? Old icons for external links are pretty outdated in respect to the rest of our UI and it would be good to keep those at least. It seems the problem is only with the interwiki links? Is there a reason to roll back those as well?

Old icons for external links are pretty outdated in respect to the rest of our UI and it would be good to keep those at least

@Jdlrobson good point, I think we should keep the updated icons for external links :)

I think @Volker_E makes good points about possible UX confusion. In theory that leaves us with three choices: 1) use the same icon for both kinds of non-local links, 2) make the interwiki icon more unique, 3) status quo of no icons for interwiki links (perhaps to be continued by also removing the subtle difference in link color in other skins).

I'd like to add a note from a different perspective, namely that of content compatibility. Specifically, it has traditionally been the case that only external links receive an icon, and that that icon can be disabled by content authors using the plainlinks class. It is perhaps worth doing some research to analyse existing content to identify potential problems in this area. Possibly crowdsourced in some way through an opt-in setting ahead of a future roll-out.

Applying icons to interwiki links will cause some amount of breakage in existing content due to unexpected icons showing up. For usage within plain text paragraphs, that shouldn't cause any problems, but for anything else it could cause issues. For example, the screenshot cited below imho has icons in unexpected places. Both the one to the left of each image, as well as the one to the far right of each label.

[..]

These would normally be prevented by authors through the user of plainlinks. Although, this particular example might also be a bug with the code change (not th general idea), because icons aren't meant to be applied to images - we don't apply icons to external links around images, either.

Also, if not planned already, it may be worth considering to coordinate the change with the desktop skins (at least Vector). Otherwise users are disadvantaged by link-rendering differing significantly between desktop and mobile, which makes it hard to understand and fix issues caused by the change – as well as to prevent it in the future by being able to notice it while creating content.

ok, moving to needs more work to do the following:

  • remove interwiki link icons
  • keep external link icons
stjn added a comment.EditedJul 23 2018, 4:17 PM

These would normally be prevented by authors through the user of plainlinks. Although, this particular example might also be a bug with the code change (not th general idea), because icons aren't meant to be applied to images - we don't apply icons to external links around images, either.

Also, if not planned already, it may be worth considering to coordinate the change with the desktop skins (at least Vector). Otherwise users are disadvantaged by link-rendering differing significantly between desktop and mobile, which makes it hard to understand and fix issues caused by the change – as well as to prevent it in the future by being able to notice it while creating content.

All links there are internal, not external, so plainlinks wasn’t required before. They aren’t applied to images, they are applied to links, see here:
https://ru.m.wikipedia.org/wiki/Заглавная_страница

While staying on this topic, although that example won’t be buggy anymore if you would remove styling for internal links, please fix plainlinks styling on mobile so that it would remove only right padding added by icon and not every padding (adding plainlinks to this list, for example, was not feasible because if you do so, it will remove all paddings altogether, you can test it in the link above). I also don’t get why !important was needed there in the first place, since it is a very bad practice to use it.

Change 446807 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Update: remove the internal link icons

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

This is now on staging. External link icons are retained but interwiki links are no longer styled.

ovasileva added a subscriber: Ryasmeen.

Moving this through to QA. @Ryasmeen - here we would want to check the following:

  • interwiki links do not have icons
  • external links have icons
stjn added a comment.Jul 27 2018, 12:10 AM

Seems like the icon doesn’t show in the reference drawer, where it would’ve supposedly be seen the most. Is this intentional?

Ryasmeen updated the task description. (Show Details)Jul 27 2018, 12:27 AM

Thanks @Ryasmeen as always :)
Thanks for flagging that @stjn . Created T200491 to follow up on that.

Over to you @ovasileva for sign off.

ovasileva changed the task status from Open to Stalled.Jul 30 2018, 8:44 AM

rollback done. Removing this from the sprint and tagging with design so that we can continue the conversation on future implementation

Jdlrobson removed the point value for this task.Jul 30 2018, 9:16 AM

Please consider creating a fresh task pointing to this one, or at least updating the description to record/summarise what went wrong and why and what actions were taken. As written, given that it also talks about external links (which we didn't revert) it's a little confusing without trawling through the comments, and will be even more confusing if we take another stab at fixing it, in for example, 2 months time!

ovasileva updated the task description. (Show Details)Jul 30 2018, 9:50 AM

Please consider creating a fresh task pointing to this one, or at least updating the description to record/summarise what went wrong and why and what actions were taken. As written, given that it also talks about external links (which we didn't revert) it's a little confusing without trawling through the comments, and will be even more confusing if we take another stab at fixing it, in for example, 2 months time!

Updated description

alexhollender removed ovasileva as the assignee of this task.Aug 10 2018, 3:17 PM
alexhollender renamed this task from Differentiate between internal, interwiki and external links visually to Differentiate between internal, sister-wiki, interwiki, and external links visually.