Helping users get back from a new tab

by Foolproof

A common problem we see in our website user testing is the user getting lost when they click a link that opens a new tab in their browser.

Some users understand that they are now in a new tab. When they are done with the content on the new tab they either close it, or click back to the original.

But most users don’t notice that they are in a new tab and struggle to find their way back.

How do users react to the new tab?

If the content of the new tab is a .pdf file, a media file or a page from a different website, then users try clicking the browser’s back button. But the new tab has no history, so the back button is disabled. At this point, many of our test participants turn to the moderator and apologise for being stupid and not knowing how these things work.

If the content of the new tab is a page from a different area of the same site (such as a help page), with the same branding and global navigation, then users try to use the global navigation on the page in the new tab to get back to where they were. Sometimes this works for them, but many never make it back.

Why is this happening so often?

When a web page links to a separate document or a page in another website, common practice has been to set the target attribute of the link element to open the content in a new window.

Most users noticed that they were now in a new window and learned that closing the window got them back to where they were.

The first tabbed browsers gave users more flexibility as they could change their settings to have the new content open in a new tab rather than a new window. And some users even learned the shortcut to open any link in a new tab.

But most of the latest browser releases respond to “<a target="_blank">” by opening the content in a new tab rather than a new window. And lots of users are getting confused.

What should you do?

The simplest first step is to clearly signpost links that will open content in a new tab. You can do this with different typography, document icons and new tab/window symbols. You can do much of this through the site’s CSS style sheet using rules that match against the value of the link element’s href attribute.

Helping Users Get Back From A New Tab0

This link on the Directgov website has a symbol and popup title text indicating that it will open a new window.

The next step is to review the structure of your pages. You should make sure that links to external and differently formatted content are clearly separated from links to local webpages.

Over the longer term, consider why you are linking to the other content and whether it helps the user to have it open in a new tab.

  • If it is help information, then show it inline, or in a lightbox.
  • If the content has specific printing needs, then present it in a webpage and add printing rules to your style sheet.
  • If users want to save the content for offline use, then present the content in a webpage and offer a Save or Download button that links to a file. Use content-disposition to have the browser download the file rather than open it in the browser window.

What could they do?

In time, users will learn how to manage their tabs, but maybe the best solution could come from the browser vendors. When one tab opens content in a new tab, the new tab could remember its ‘prehistory’. And clicking the back button could take the user back to the original tab. Job done.

What do you think?