Page MenuHomePhabricator

Design input needed: Use external link icon for chat/video links
Closed, DeclinedPublic2 Estimated Story Points

Description

As a campaign participant, I want chat/video links to external platforms to have the external link icon, so I can now that I am going to an external platform before I click on the link.

Acceptance Criteria:

  • Use the external link icon for chat/video platforms

Visual example:

screen_shot_2022-09-22_at_12.32.07_pm.png (114×342 px, 33 KB)

Somewhat related: T281540: External links icons are missing on special pages and various secondary content when using ResourceLoaderSkinModule

Event Timeline

I should note that the visual example above is how the Vector skins styles external links in the article body. We may be able to add icons of some kind, but it may look differently.

Okay, thanks for clarifying, @Daimona!

It probably makes sense for this to be a design task to determine how the links will look, so I will add this to the needs input column. Pinging @gonyeahialam so he sees. Thanks!

ifried renamed this task from Use external link icon for chat/video links to Design input needed: Use external link icon for chat/video links.Sep 22 2022, 9:26 PM

Note: This is no longer blocked by internal team reviews. The permitted platforms can be shared in a tooltip or through another experience, as determined by the designer. We will need design input on this in order to move forward, so pinging @gonyeahialam. Thanks in advance!

vyuen set the point value for this task to 2.Sep 27 2022, 7:27 PM
ifried renamed this task from Design input needed: Use external link icon for chat/video links to Team input needed: Design input needed: Use external link icon for chat/video links.Sep 28 2022, 5:10 PM
ifried renamed this task from Team input needed: Design input needed: Use external link icon for chat/video links to Team input needed: Design input needed: Use external link icon for chat/video links [TEAM FEEDBACK PENDING].
ifried removed gonyeahialam as the assignee of this task.
ifried renamed this task from Team input needed: Design input needed: Use external link icon for chat/video links [TEAM FEEDBACK PENDING] to Team input needed: Design input needed: Use external link icon for chat/video links.Sep 29 2022, 1:13 PM
ifried renamed this task from Team input needed: Design input needed: Use external link icon for chat/video links to Design input needed: Use external link icon for chat/video links.
ifried assigned this task to gonyeahialam.

Proposed design
Link to Figma

Screenshot 2022-10-02 at 07.59.36.png (988×1 px, 175 KB)
Design of external links on Event details page and event details modal

@gonyeahialam Thanks! Do you think we still need the link icon on the left if we have the external link icon on the right? It seems like it may be unnecessary clutter to have both, especially since we can expect that pretty much all chat/video links will be to external platforms (as the wikis currently have no live video/live chat features).

As I noted above, that specific icon, as well as the location, is how the Vector skin styles external links in the article body. See for instance here. That styling can be different in other skins, see for instance monobook, modern, and minerva, each with its icon. I'm not convinced that enforcing the Vector style for every skin is a good idea, especially if the icon in question is not standard. Here's the task about the inconsistency: T261391; apparently, it was for Vector only.

Also, from the task description it's not clear to me whether adding the icon is just a nice to have or some sort of legal requirement. I doubt it's the latter because there are many external links without icons all over the place; also, if that were the case, the relevant change should be made in skins, and not for each page which happens to contain external links.

If it's something we think is a nice to have and is only needed for this page, then I'm wondering whether the previous design (grey icon before the link) would be OK. If we really want to style it like Vector does, then we could change the skins so that they support on-demand styling of external links, and not just for the article body. That way, it would be up to the skin to decide which icon to use, and produce a result that's consistent with the rest of the interface.

@Daimona This is a requirement for V1. We want users to be informed that links to external platforms are indeed external links. Can you clarify what you mean by "... the relevant change should be made in skins, and not for each page which happens to contain external links"?

@gonyeahialam Have you seen what was written in the above comments about the various skins vs. Vector skin? It seems like the design you provided may need to be updated to be more flexible for different skins, or at the very least, I think it makes sense for you to consult with @Daimona on potential options/next steps.

@Daimona This is a requirement for V1. We want users to be informed that links to external platforms are indeed external links. Can you clarify what you mean by "... the relevant change should be made in skins, and not for each page which happens to contain external links"?

What I meant is: if the ideal goal is to have every external link, everywhere on the wiki, have an icon, then it's up to the skins to ensure that it's the case, and not to the code (e.g., in an extension) which adds the link to the page. In general, skins should be responsible for determining how a certain element should look, and not extensions or core. There are obviously exceptions to this, but I don't think external links are one.

I discussed this ticket with @Daimona. We talked about the fact that a) skins do not apply external link icons in all cases, b) the external link icon is often just used in the article body, and c) we want to find a way, despite this, to show an external link icon for video conference/chat group links. Consequently, we have identified the following options:

  1. Use the grey chainlink icon that we already have in the wireframes for an external link
  2. Use an arrow icon, but it would to have a standardized styling that makes sense for all skins
  3. Ensure that all skins have an icon for all external links as a larger change
  4. Change the skins so that each extension can have a way to tell the skin, ‘This is an external link. It is not in the article body, but i want it to have an external link icon.’

Option 1 and 2 are lower effort and more doable for the team in the scope of V1. Option 3 and 4 would require more work and have more risks in terms of consultation and scope. For this reason, options 1 and 2 are preferable. Furthermore, between 1 and 2, I believe option 2 is preferable because it clearly indicates an external link, whereas the chain link icon in option 1 indicates a link in general with no differentiation between the link being internal or external. Right now, that chain link icon is in the editor interface, and when the user clicks on it, they have the choice of creating an internal or external link.

So, we will discuss this in the engineering + design meeting tomorrow, but my vote is for option 2, unless other things come up that may change my mind.

@ifried So, I think T281540 is the task for displaying the external link icon on special pages (and not just articles) -- not 100% sure about it though. If we want icons after the links, then I don't think we can do much except for waiting until that task is resolved. I believe extensions should not try to emulate skin styling, because it's wrong conceptually, and the result is not guaranteed to be consistent across skins.

Thanks for this update, @Daimona! I have shared this update with internal stakeholders who requested this feature and will post their response/suggested next steps when I hear back from them.

We have looked into this, and some skins currently have external link icons for non-article content (so it already shows up in the feature) and some do not (such as new the Vector skin). You can see this issue detailed in T281540.

We have received approval from internal stakeholders to close this ticket since any work on this would need to be done in the scope of T281540.