"Opens in a new tab" tooltip warns people that a link or button will open something in a new tab to avoid disrupting their workflow.
We rarely open links in new tabs. We use a new tab only when necessary when we want to avoid disorienting people. We use an "Opens in a new tab" tooltip every time we open something in a new tab to set expectations and minimize disorientation.
See this InVision project that shows some alternative design treatments we considered. Our considerations include how to:
You’re in the middle of a Workflow or Form where opening something in the current tab would result in data loss or lost progress.
You’re currently playing media that would be interrupted.
It’s a mailto: link that will open the user’s preferred mail client.
Avoid "Opens in new tab" tooltip on a link to a PDF.
Avoid "Opens in new tab" tooltip on an infinite-scrolling page.
Avoid "Opens in new tab" tooltip on a link to an ‘external’ website.
In a multi-step or long-running process such as our employee data import wizard, it might be better to maintain state and let people navigate to a new link in the same tab and come back to the same place without losing their progress.
On an infinite-scrolling page, we can avoid using a link that opens in a new tab by making sure the “back” button remembers the state and keeps the user’s place in the scrolling stream of content.
From a modal, we can avoid using a link that opens in a new tab by making sure the “back” button remembers the state and keeps the user’s place so returning to the page shows the open modal.
If you’re not sure how disruptive the link is, consider a call to action like “Open the survey preview page in a new tab to see what participants will see.”
In some cases, such as the survey designer’s “Preview” opening in a new tab, we might still want to show user’s a way to navigate forward through the app to return to the previous place, for example, the survey designer.
For tooltips in general, they must appropriately respond to changes in viewport and not get cut off at the edge of the screen or the edges of a modal. They must also be triggered on hover and (keyboard/touch) focus.
We’ve seen customers frustrated about Academy articles NOT opening in a new tab and then being unable to navigate back to the app.
Here are some examples of other existing design systems: