Why is it important
- With the risk of loss of navigation and disorientation, it may lead to more users (accidentally or unintentionally) leaving your website
Trends
A couple of years ago browsers opened links in a new browser. Then a few years ago a browser (I think it was Firefox) introduced the possibility of tabs. Nowadays a lot of users are used to tabs more than windows. Links that should open in a new screen will do so in a new window or tab. Tabs is increasingly becoming the convention. In some browsers it depends what is the default setting for the user’s browser.
What are the options
Developers have control over this by tagging links using the parameter ‘target=_blank’ to indicate a link should open in a new window/tab. Whether it’s a new window or tab, as stated before, depends on the browser. In most cases it is too much to ask to distinguish between all the browsers (user agents) out there, so best is usually to take into account the novice users (unless they are an insignificant minority).
Simply there are 2 main choices: new window (NW) or same window (SW). Other possibilities are pop-ups, lightboxes. Other layout options and content containers such as accordions, horizontal tabs, anchors, etc are generally suitable for relatively small amounts of text or content – these will not be covered here.
This article discusses the pro’s and cons of each option, in particular the debate of new versus same window and aims to derive a guideline.
New or same window: When to use what
Target audience – NW is annoying for more advanced users. Is it confusing to users with few computing skills? Who is likely to use the site?
As always in ID, target audience (skills), usage context, source/destination page design and business goals play a role.
When does usability get in the way of business goals? Usability gurus generally share the view that almost all links should open in the same window, so that the user is the one in control and knows what to expect (i.e. that links always open in the same window, not a new one). But usability gurus often give advise from a general usability point of view, and don’t always concern themselves with the business goal, context. Some also speak from opinion or convention, rather than research about what works best within the context. Usability testing and multivariate testing results are useful, but shouldn’t be blindly applied to all designs if their context differs.
Opening certain links in a new window (or tab) IS necessary in some cases. For example, external sites (or to be more precise: those links of which the user expects them as being external should open in a new window, and the refering site is NOT a search engine). Following this principal all links within forum posts and blogs that link outside should open in a new window (debatable, since some argue this takes control from users – many users right-click a link if they want to open it in a new window/tab. Users may think “why can’t I click the Back button?”).
So it depends on the site and context. Below is my general advice.
Principles and exceptions
The types of links that should always open a NEW window/tab are:
- Links to webapps and Non-HTML documents (e.g. PDF, Word doc, etc . Why? Because Word/Acrobat takes time to initialise, and have their own application navigation elements. As this makes the browser look like a seperate application prone to accidentally being closed by the user.)
- Links to external sites (unless it is the same site as the source – but even then on conversion-critical pages new links might be desirable, annoyance versus conversion – it also depends on the context and how the user arrived at the page.. Nielsen writes more about this below. iFrame if you must consider redirects in a Facebook or LinkedIn fashion) > more on this soon!
- Links pointing to pages where the (browser) Back button or navigational elements are missing (pop-ups should have navigational controls such as ‘close’)
- Links from sales-critical pages where accidental closing must be avoided. (lightboxes should not be full-screen, read more on lightboxes/pop-ups below)
- Links from pages within the sales check-out which could interupt the user flow if opened in the same window. For example, footer and help links within the order process.
- Links from user-critical pages which are session-sensitive, such as an order confirmation page in certain browsers.
- Links to webmail – an A/B test from Microsoft revealed the MSN homepage got 3% more clicks when Webmail was opened in a new window.
More suggestions @ https://medium.com/user-experience-design-1/f80299897a0d
All other links should always open in the SAME window or tab:
- All the rest – normal links to other pages on a site
- Multimedia stand-alone files (Quicktime .mov, .avi, etc) that could take time to initialise (debatable, as in my experience these formats can crash the system due to taking up many resources)
Pop-ups, modal dialogs, lightbox overlays, iframe and other options…
Pop-ups
Using JavaScript a pop-up can be created, defining show/hide Scrollbar, Resizable, Status bar, X/Y position?
Be aware that some pop-ups may refuse to open due to the presence of so-called ´pop-up blockers´. Many modern browsers have these pop-up blockers built-in to them. (to research when there is this risk).
Lightbox and overlays
See my other posts and lightbox patterns. Main issue is that scrolling in a window within a window is a no-no.
Frames and iframe
´You are now being redirected to an external, unaffiliated site.´
´Click here to return to <your site name here>´
The fixed top bar on Yummly.com (when you click to view a recipe on the original site) and many other sites TIP
Guidelines
Do not create or direct users into pages that have no navigational options.
This is the case for pop-ups and new windows/tabs. When these browser windows open, the Back button is disabled (in essence, the new browser window knows nothing of the user’s past navigation, and hence is disabled). If the new window opens full-screen, users may not realize that they have been redirected to another window, and may become frustrated because they cannot press Back to return to the previous page. If such links are incorporated into a Web site, they should clearly indicate so (using an icon or tooltip) the newly-opened window should contain a prominent action control that will close the window and return the user to the original browser window. In general while browsing within the same site, do not create Web pages that disable the browser’s Back button. Disabling the Back button can result in confusion and frustration for users, and drastically inhibits their navigation. Exceptions are external sites or refering links for which is this acceptable and expected behaviour.
Consulted: Research-based Web Design & Usability Guidelines [PDF]
Similarly, lightboxes risk being mistaken as new windows and are often closed. If there is no alternative and lightboxes must be used, then use a top-right X close link and prominent Close button that is visible the moment the lightbox is opened. Do not fade out the background too much (use a visual effect). Clicking outside the lightbox will close it and immediately return to the underlying content. When testing, click in a textfield or link in the background content to make sure the background content is truely disabled. Lightboxes should not be full-screen. (see my Wiki on max % guidelines for height and widths of lightboxes). Clicking Back should close the lightbox (not always technically possible).
Consider the fact that links are the convention for navigation, and buttons are convention for actions. In this respect, to be consistent with convention, lightboxes and pop-ups should be opened from a BUTTON not a link.
Conclusion
In the end it´s business goals and user´s goals. Users are the business, so annoy them as little as possible: always open in the SAME window, unless there is a valid reason for doing otherwise.
As a alternative to lightboxes, consider patterns like accordion, sliding panel and other of progressive disclosure that retain an obvious presence on the current page.
Beware of exceptions stated in this article.
Research: how users use browser tabs
Research paper: Parallel browsing behavior on the web: http://jeffhuang.com/Final_ParallelBrowsing_HT10.pdf
I saw this mentioned in a recent article “Why attention is the new currency online” http://www.designdamage.com/why-attention-is-the-new-currency-online/
Relevant text here: “Microsoft research Ryen White and Information scientist Jeff Huang recently studied the behavior of 50 millions web surfers and habits regarding tabbed browsing on 60 billion pages. They found that instead of users viewing more pages with tabs, it simply leads to multitasking cutting user’s online attention span! Parallel browsing with different tabs occurs 85% of the time Viewers often view 5-10 page per tab 57.4% of the browsing time are used for parallel browsing with tabs Most web surfers do not create tabs (branch out) from search engine result pages, but more from non-navigational queries Users open new windows and tabs because they’re waiting for a page to load”
Hope this helps!
Dave Gray
Case study: external links in a website forum
Website business aims:
– users must always know they have arrived at the page they requested
– users should intuitively find their way back to the site (versus they should be forced/encouraged to browse the site when ‘done’ with the forum)
– satisfy the business goals: encourage forum usage without sacrificing portal usage (whereas the latter is more revenue generating in the short term, the forum builds a strong community and opportunities for future revenue generation)
The arguments provided by Nielsen are all valid for our case:
– Fear of pop-ups might make user instinctively close the new site, thereby (However, mistaking it for adware is low, however. The user clicking ‘Forum’ knows what he wants and will see and wait and try)
What is the best design when you want to link to a site-within-a-site (forum) but this site does not contain the LHN. And we want to ensure our users can easily return (or switch) back to the original (portal) site when they are done using the forum site?
Then in this case you would want to open a new window, so users can ‘find’ back your site easily. (Unfortunately, accessibility and performance aren’t factors often considered.)
Discussion: should ads, adsense and affiliate links open in a new window?
It depends how you balance your user vs business goals. It’s a strategic issue, because you send your visitors to another site potentially never to return again.
If your balance is on the usability side, then don’t annoy the user: open in same window/tab, so you give the control to the user. Advanced users will right-click/ open in a new window/tab anyway. Other users will use the back button to return to your site.
However, we are talking AdSense here. Here are some things to consider:
How will you integrate the ads in your site? How important is PPC ad revenue versus users leaving your site? Will you ‘disguise’ ads in some way, or make it very clear that they are ads?
If your design is such that you run the risk that users think text links go to content on your site, then open in a new window/tab. If you choose to explicitally place a header saying “advertisements” above the links, then most users would probably expect those ad links to open in a new window. Depending on where/when these ad links are shown, consider mentioning “these ads will open in a new window” as a compromise between ad revenue and maintaining usability/goodwill towards your site. If you go for the more disguised/deceiving approach then you should open in a new window/tab.
Ads should be usable too, or users will only click once or never return to your site. Make sure you adapt your design to match user expectations so you don’t annoy them. Do some usability testing or A/B testing.
More possible exceptions
Open in a new window when:
- The destination page has no navigation to the previous page (page header is missing)
- The destination page consists of a process with a number of steps, perhaps a login of its own, where it would be frustrating (or buggy or technically not feasible) to hit back many times to return to source page. In this case consider a “Close” button (or “Back to <source_page>” link – and that link/button is either always present or presented only at the last step of the process.
Do not open in a new window when:
- Mobile browsers (e.g. Android browser) where it is not easy or common to the user to switch between windows
References & Further reading
Discussions
http://www.smashingmagazine.com/2008/07/01/should-links-open-in-new-windows/
http://www.deyalexander.com/publications/new-windows.html
http://www.linkedin.com/groupItem?trk=EML_anet_qa_ttle-0Pt79xs2RVr6JBpnsJt7dBpSBA&gid=3754&view=&srchtype=discussedNews&item=26595407&type=member
Beware of opening links in a new window by WebCredible
See also
Opening New Browser Windows
by Jakob Nielsen [Prioritizing Web Usability] (incl. positioning of new windows) –> to summarize!
Pop-up windows by Jakob Nielsen [Prioritizing Web Usability] (why not to use them for advertising or anything else)
Pop-up alternatives (lightbox, super-tooltip ,etc)
Afterword
( See also Jira sub-task ‘Before launch tasks’ (LHN in new window)
and http://www.marketingfacts.nl/berichten/20071113_usability_mythe_2/
Posted by Dan 
Danni's UX Lab 'Lucy' 