External link icon

[sarahill]

The external link icon has been a recurring topic of conversation. There is confusion around when and when not use it and questions around the general usefulness of it.

Issues:

• The icon is used inconsistently
• The icon adds more visual load especially when used inside a sentence or accompanied by other content
• External links don't always need to be called out
• Current guidance for using the icon has been to use only when the link takes you outside of the Shopify ecosystem but this logic starts to break down pretty quick (example: help center). Adding rules and logic around when and when not use the icon is a slippery slope and makes it difficult to have consistency in how it's used.

Opportunities:

We can simplify and add clarity to external links by relying less on the external link icon and focusing more on what the text itself conveys and at what point in their workflow a merchant is encountering them.

• Remove the external link icon. We don't need the icon for an external link to be accessible. The hint text will still be available when using the external prop for a link so that it works with screen readers.
• If it is a case where it's important to let the merchant know they're navigating away from the Shopify admin, you can do this through the link text itself

Related issues:

• External link icon padding #4547
• Audit use of external link icon in the admin #4756
• [Link] Remove external link icon and clarify documentation #6413

I'd like to use this discussion to collect others thoughts and opinions on this topic.

[alex-page]

Gov UK said it better then I will in 2016.

You don’t always need to tell people about external links
There are some cases where you might want to warn users about external links in advance (for example if they’re in the middle of a task), but there’s no need to tell them every time.

The icon is obscure and ambiguous
The icon is not widely recognised and is often confused with the ‘opens in a new window’ icon.

Some websites actually use it to mean this, so it’s not an effective way of telling people that a link goes to another website.

Words are more effective
If your users do need to know in advance that a link goes to another website, it’s more effective to do this with words.

You can do this in the link text itself, or if you have a collection of links you might want to do this in the immediately preceding text to avoid duplication.

https://designnotes.blog.gov.uk/2016/11/28/removing-the-external-link-icon-from-gov-uk/

Links should be clear where they end up. An icon doesn't really help with that. It either goes where a user expects or not.

[m-meurer]

Would all links open in the same tab by default? This is personally frustrating for me here in Github. I don't necessarily need a visual indication that a link would open in a new tab, but I definitely don't want external links opening in the same tab where I might be doing work in the Admin.

The external prop adds an icon and a notification that the link opens a new tab (emphasis added). Use the external prop to make the link open in a new tab (or window, depending on the merchant’s browser settings). Open a page in a new tab only when opening a page in the same tab might disrupt the merchant’s workflow.

[sarahill]

Great question!

A link by default opens in the same tab but if I add the external property to it, it will open in a new tab/window. That's the behavior today and that won't change.

The only change would be the removal of the icon. So there would still be the external prop with a notification for screen readers that the link will open in a new tab.

[alex-page]

Do we need the screen reader notification if the user knows the link and the URL? I was confused why we added this.

[sarahill]

If you're visually impaired I think it's useful to have the hint so the screen reader can call it out. To your point though I think if it's a case where we think we need to be explicit about it the link text should do that job.

[heyjoethomas]

This makes a lot of sense to me. Seems like a win

[kaivab]

Hi! I'm a content designer on the Retail team - Emily shared this in the content design channel for feedback/discussion. In Polaris for Retail, we currently use the external link icon on any buttons or links that take you outside of the POS app (examples: opening the store's website, or navigating to Shopify admin). Do you think the app use case is different enough that it warrants the external link? Or should we also considering dropping ours?

[sarahill]

I feel like apps are slightly different - and that POS is slightly different, too. The POS app is often the only app (or one of few) running on a particular device. A physical retail store might have a laptop for accessing Shopify admin/the rest of the web, and a tablet with the Shopify POS app running constantly for staff to build carts, process payments, etc. In this context, knowing that a link takes you out of the app can be quite useful. Staff may decide that leaving the app will slow down their workflow and decide against it.

That's fair. The rationale of "it might slow me down" is interesting one and makes sense. Couple questions that come to mind:

• Do merchants and staff understand what the icon means?
• Are there other ways you can signal the link will open in a new tab instead of using the icon?

@jjgali curious if you have an opinion here or ran into anything on this when you were looking into external links?

[steve-howe]

"Do merchants and staff understand what the icon means?"

To be honest, I don't know! It's not something we've tested.

"Are there other ways you can signal the link will open in a new tab instead of using the icon?"

Yes, for sure. For example, we'd normally call out "Shopify Help Center" rather than just say "Get support". We can definitely think about how to do that for other external destinations.

To be clear, I can see the benefit of removing the icon. I've definitely come across the problem of not knowing whether to use the icon or not (for example, if you go to Shopify admin from POS -> is that "external"?) So this definitely removes that ambiguity.

[sarahill]

For sure! The questions were more out of curiosity than anything. I trust you all to make the best decision for your use case. I really appreciate you all sharing your perspectives and thoughts

[jjgali]

curious if you have an opinion here or ran into anything on this when you were looking into external links?

I don't have any additional information apart from what @sara shared, and I agree that POS on an app is divergent enough from the admin experience to warrant its own consideration.

As Sara said, I'd find out if users actually understand what the icon implies. Our inconsistent implementation in the admin shows that even we (Shopify UXers collectively) have a hard time defining the icon's purpose.

Also, +1 to being as explicit as possible about what/where the resource is you're linking to. If we could avoid the ambiguity that the icon introduces, that'd be ideal.

Would love to know what you end up deciding on!

[alex-page]

Point of Sale has it's own users and the experience is unique. I don't see all Polaris guidance needing to scale to Point of Sale. I think this is a case where you can make the best decision for your users. They might benefit from aligning to Shopify Admin or it might be different.

[sarahill]

Hey folks! Just wanted to give an update on progress for this.

We now have a PR up to remove the external link icon along with updating the usage guidance.

One thing we would like feedback on is the decision to remove visually hidden hint text along with the icon. After digging into this and having discussion with folks, we are leaning toward removing the visually hidden text that was for screen readers only. Some context behind this decision:

• We believe it may actually degrade the experience instead of enhancing it. The rationale for removing the icon is to remove ambiguity and improve the experience through clear link text. The screen reader only text feels like the equivalent of the icon here. If we make the text clear, that should translate for sited and non sited users.

That being said, we want to get a gut check on this decision. Please share any thoughts, concerns, insights you have. Thank you!

[heyjoethomas]

Do we have any native screen reader users at Shopify we can consult with? Would love to hear if there is a standard for things like this.

[alex-page]

Not that I know of. We do have accessibility specialists and services to connect with these folks. The GovUK made this change and it was thoroughly tested with users of assistive technologies.

[sarahill]

Our next step is to reach out in the accessibility channel for feedback

[svinkle]

Please reach out to #blind-at-shopify.

[emily-broughton]

@svinkle , done! Thanks for the reco!

[joellesasseville]

Hello @sarahill
I do agree with the rational about links. But what about actions that need to be performed in other systems or tool?

Working in SFN, we often times need to link out to 3rd party or to open a new tab to get merchants perform a task (book a call in ChiliPiper, Fix error in the bulk editor, which cannot be loaded in the same page). From my (probably totally) biased perspective, the icon sets the expectation that this action will not take place in the same context.

More context : #6799

[alex-page]

Buttons going to external pages is an antipattern. I don't think we should scale this. Clicking a button should be a high trust moment.

In your situation what is happening? Is the page that the button takes the user to look and work the same as the admin? Does the user know they are going to a new website? Does the experience change dramatically?

[alex-page]

Looking at the screenshots I believe these should be links and not buttons.

[joellesasseville]

I do agree this isn't a perfect solution. In an ideal world, we'd be able to open the bulk editor in the same page, and we would have our own call scheduling system. This would allow keep the merchant workflow streamlined and consistent with the admin experience, but this isn't something we can't do at the moment.

The screenshots might not provide enough context, but these buttons are key actions that merchants need to perform. Links wouldn't represent well their level of importance in the flow and would be inconsistent with the other steps.

Usually buttons links to actions that are performed in the admin, but it is not our case. We felt it was important to set expectations that these actions behave differently.

[sarahill]

I think that's a fair argument and I agree there are some cases where we can use button styling to reinforce hierarchy. I'm still not 100% convinced that the icon is as useful here but this might be something to post for feedback in the #accessibility channel. @joellesasseville are you down to post in that channel? I would be interested to hear the feedback from those folks.

[sarahill]

Just an update on this: We shared this discussion in a couple different channels for feedback

[sarahill]

The updated guidance on external links has now been merged in #6518

The PR:

• removes the external link icon from the Link components external prop
• updates the guidance for external links

Thanks for everyone's questions and feedback in this discussion!