When to open a link in new tab by default?
22 July 2020
Since about 90% of all links should be handled by the site’s navigation which supposes to open in the current tab, the ratio is not absolute.
Short answer — on the image above. The area stands for how often we encounter that scenario. Basically, our users will be looking at a report with multiple tables for all students in their class. The main task is to understand how the class’s doing as a whole. And in some cases, teachers also need to print an individual student’s report for the parent conference. In this case, when they click on a student’s name, should the individual student report opens in a new tab or in the current tab?
Almost all my research online recommended that don’t make it open in a new tab. The main reasons are
1. The default behavior of hyperlinks is that they open within the same page.
2. Let the users choose it themselves.
I found a lot of complaining about Quora open every question in a new tab. Personally, I always have more than 2 windows and 30 tabs open, and I am never annoyed by opening new tabs by default. I might be spoiled by the fast reaction of everything, and have no patience to wait for the loading when going back and forth in the browser. And recently I just knew press command key + click a link = open it in a new tab, wow!
Now I finally understand what “choose it themselves” mean. Because I won’t choose to open in a new tab before, I feel it’s just too much effort to open in a new tab by right click, move my mouse, and another click. I asked around, many of my friends don’t know the open new tab shortcut, the same for command + left to go back. I guess that’s why we found in some cases open a link in new tab by default is super helpful.
So, I started collecting all the scenarios of when opening a link in new tab by default can be helpful and even become a common sense in the most popular products we are using. And I believe the time has changed, new tab might not be that scary anymore.
All links that are not handled by the navigation worth a thought. Below are 3 main categories I found when opening in a new tab by default can be great.
1. External links
Let's start from the most common one — open a link that does not belong to the main site, we can define external by if it’s sharing the same domain.
Another example, you might already notice, every link in a Medium story will be open in a new tab by default. Really?
When to do so:
- Users need to keep the original content as a reference
- The external link is unrelated to the main task users are doing on the original page, it’s almost certain that they will be back
When not:
- The purpose of your page is to lead users to an external address — say, search engine
- The external site is part of the flow — say, use Paypal to checkout can be in the same tab
Design tips:
To indicate 1. it's an external link; 2. the users they will open the link in a new tab — could consider have an icon or hover effect.
2. Ancillary information
There’s no doubt the Terms of Service will always be open in a new tab by default though it’s not an external link. The idea here is to not let the ancillary information become obstacles for users to complete the main task.
Indeed.com, shows job details directly on the right side of the main page (I found LinkedIn started A/B testing similar design recently), while open the company page with the introduction and data analysis in new tabs. I guess in this scenario, a company’s page can be considered as ancillary information that should not get on your way for browsing and applying.
Other frequently seen examples are Help and Live Chat. In Renaissance Learning web application, users can always get to corresponding help content of the current screen they are on or get the live chat from the header. Users need the content on the current screen badly when looking at the help document or chat with an agent. That’s why those links are open in a new small window.
Besides, when you have audio or video playing for your ears, you probably don’t want a pause if your eyes want to do something else. Lots of examples can be found in this scenario.
Last but not least, usually, the link to open a .pdf or .mp3 file are often happens in a new tab or window.
When to do so:
- Users already made efforts on the current screen (filled text field/scrolled to a certain point/filtered) that they don’t want the page to refresh and lose their progress
- Clicking “Back” cannot restore a page properly
- Get supporting or help that need the current page to set the context
- Have audio or video playing as the main service
- Different file type (pdf/mp3/documents)
When not:
There’s no specific task or obvious goals, and users just wandering around — say, Facebook and Wikipedia
Design tips:
Usually, the scenarios above can be handled better by a popup (for example Intercom’s chat popup on the corner; product detail on product hunt ). If open in a new tab only because you want users to stay on your site longer, then think twice.
3. Search results for discovering
If your product is like Airbnb, Kayak, and booking.com that helps people discover and make the best choice from a huge number of options, then you might consider opening your search results in new tabs from your home page.
I’m not talking about the general search engine that people know exactly what they are looking for. There’s a group of products helping users to understand their needs by offering options and discover things they did not imagine before. In this scenario, users may jump around from the all search results page to an individual item a lot. And they might also compare different options a lot. Consider that lots of users don’t know the shortcut of open in new tab or jump back, new tabs for individual item make this behavior much easier.
Design-award-winning car selling website CarStory opens vehicle detail page in a new tab from their search result page. With previous experience working with the CarStory team, I bet they have real data proved that the new tab behavior delivers a better UX and achieve a higher business goal.
Zillow shows a home detail on a popup after the click and offers an EXPAND option on the corner to open a new tab for that item. The only difference is expanded view have all detail expanded, while on the popup accordion menu some detail is collapsed.
After trying those sites yourself you might agree with me that view each result in a new tab makes it easy to compare and you always do not want to lose your progress on the original all search results screen.
Amazon is a comparatively conservative site, and their back operation performance is outstanding. Amazon’s main site open almost all links within the same tab. But here’s how they dealing with the new product:
When to do so:
- If your product matches with the [discover→browse→compare→choose] mode like the examples above
- Have a dynamic feed that users don’t want a refresh when browsing
When not:
- your business model is creating leads (your job is done when users click on a result)
Design tips:
Frankly speaking, without looking at the real usage data, I’m not 100% sure about if open a new tab is the best practice in this category. Some people might not realize they were opening a new tab until they hit the back button to find nothing. New tab also has accessibility issues. So you might need some real data or user research to support your decision on it. But worth a try!
Let’s wrap this all up. Yep, certain sites designed like that doesn’t mean you should design the same way. The decision should always be made based on your own context. And maybe, your user data and testing results. Here is the checklist of things you might consider when you want to open your link in a new tab/window:
- what’s users’ expectation of clicking that link?
- is the destination external or internal?
- what’s the performance of the back operation?
- are users going to lose their progress?
- do users need to see the current page content as context?
- how do you want to indicate the users about that (open in a new tab)?