Directory

⚓ T190549 Differentiate between internal, sister-wiki, interwiki, and external links visually
Page MenuHomePhabricator

Differentiate between internal, sister-wiki, interwiki, and external links visually
Open, Needs TriagePublic

Assigned To
None
Authored By
Nirzar
Mar 23 2018, 5:41 PM
Referenced Files
F23243091: Screen Shot 2018-07-02 at 3.40.40 PM.png
Jul 2 2018, 10:46 PM
F23243124: Screen Shot 2018-07-02 at 3.41.43 PM.png
Jul 2 2018, 10:46 PM
F22727014: image.png
Jun 27 2018, 5:05 PM
F22726995: image.png
Jun 27 2018, 5:05 PM
F22726955: image.png
Jun 27 2018, 5:05 PM
F22469249: link_Internal-rtl.svg
Jun 21 2018, 7:45 PM
F22469250: link_Internal-ltr.svg
Jun 21 2018, 7:45 PM
F22469248: link_External-rtl.svg
Jun 21 2018, 7:45 PM
Tokens
"Orange Medal" token, awarded by Krinkle."Love" token, awarded by Niedzielski.

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

interwiki-links.jpg (2×1 px, 1 MB)

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

Screen Shot 2018-06-21 at 3.42.58 PM.png (36×35 px, 1 KB)

and the second link (Coins from ancient Syracuse and Sicily) uses the external-link icon:
Screen Shot 2018-06-21 at 3.43.22 PM.png (31×32 px, 1 KB)
  • 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 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:")

image.png (667×376 px, 164 KB)

image.png (1×720 px, 410 KB)

image.png (1×720 px, 371 KB)

Verified as well, resolving. Thanks all!

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.

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)

Screen Shot 2018-07-02 at 3.40.40 PM.png (196×526 px, 42 KB)

External links: They are different from external links which are subtly different (arrow goes outside box)
Screen Shot 2018-07-02 at 3.41.43 PM.png (175×596 px, 29 KB)

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

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).

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.

[..]

Screen Shot 2018-07-02 at 3.40.40 PM.png (196×526 px, 42 KB)

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

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

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

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!

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_WMF renamed this task from Differentiate between internal, interwiki and external links visually to Differentiate between internal, sister-wiki, interwiki, and external links visually.May 22 2019, 1:44 AM

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

This task has been "stalled" for 28 months. Is this still wanted? Should it be open instead with low priority? Should it be declined?
Asking as tasks shouldn't be stalled for too long, plus "stalled" is supposed to mean "If a report is waiting for further input (e.g. from its reporter or a third party) and can currently not be acted on", so this welcomes who or what exactly this task is stalled on. Thanks!

ovasileva changed the task status from Stalled to Open.Nov 30 2020, 8:46 AM
ovasileva lowered the priority of this task from Medium to Low.

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

This task has been "stalled" for 28 months. Is this still wanted? Should it be open instead with low priority? Should it be declined?
Asking as tasks shouldn't be stalled for too long, plus "stalled" is supposed to mean "If a report is waiting for further input (e.g. from its reporter or a third party) and can currently not be acted on", so this welcomes who or what exactly this task is stalled on. Thanks!

Status might change based on outcome of T213778: Update link colors in Vector 2022 for improved UX (and consistency), but either way, let's drop the priority for the time being.

CCiufo-WMF raised the priority of this task from Low to Needs Triage.Feb 6 2024, 8:50 PM
CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.