External links: Whether & how to distinguishing them from internal links, and to open them

Question

How do other IAs/UXD's treat external links & what are the perceived pros/cons of different options. Specifically looking for recommendations on:

• whether & how to visually distinguish external links from internal links
• whether to open them in the same window/tab or a different window or tab

I've found some great feedback re these questions on http://www.ixda.org/search.php?tag=external+links & http://www.useit.com/alertbox/open_new_windows.html

Looking for additional opinions, thoughts & especially any usability test findings contributors of this site might have re these questions.

Answer 1

Having some sort of visual identification next to the link is a good approach. One Wikipedia uses.

Obviously you need to explain what the icon means somewhere.

Answer 2

How important is it to distinguish between the two? Will the users care? Most sites don't differentiate between internal and external links, they just let users hover over the link to see or click and find out.

If it's necessary, then I prefer following Wikipedia's convention as that's a very well-known site, thus the icon is recognizable.

Otherwise, you could do something like using dotted underlines for one type of link and using solid underlines for another. Or use double underlines for one and single underline the other. You could even use different link colors to make them stand out from one another even more, but that's probably not appropriate in most cases.

The last option is to just put external links in a separate section (Wikipedia does this too on most pages). This clearly indicates to users that these are external links and lets users find/avoid them the most easily.

Anyway, in most cases it's completely unnecessary to even "warn" users that a link is external. Just avoid linking to bad sites or irrelevant content.

Answer 3

I like how Wikipedia does it. They have a small icon meaning "launching another window". Usually modern browsers will make this a new tab. Example:

I have actually used this exact link in apps to denote when it will launch a new window.

Answer 4

Take a look at the Outgoing Links design pattern:

http://www.welie.com/patterns/showPattern.php?patternID=outgoing-links

In particular:

Use when

Most websites use a combination of internal links and external links. However, when the majority of the links are internal, the external links become the exception, for example in a News Site. In contrast, in a Portal Site or Blog Page the balance is usually towards external links. So when links to external pages on other sites are not the norm, it is good to tell people that the link they are about to click will take them away from the site they are browsing.

How

Mark the links by adding an icon after the link label. When outgoing links are selected a new window is opened. Usually the icon is a combination of an outwards pointing arrow and a shape

Why

By adding an icon, or other kind of marking, users know that such links are different and what to expect when they click on them. Marking the link will not solve any major usability issues with your site but it will subtly manage expectations of users as they browse the site.

Answer 5

Generally, apart from the exception noted in my comment above, I don't differentiate between external and internal links. There are some rules to help minimise the surprise element in off-site navigation by obviously not including external links in your primary navigation, clustering internal menu and external links like favourite sites, blogrolls etc separately but generally in content it's ok to mix internal and external and where possibly use the content and hyperlink to indicate the destination.

For example: read more about my skills and experience in my professional bio - you might be surprised if this took you to another site.

But: I read on News.com.au the other day that Google executives face jail over video - you would expect would go elsewhere.

Hope those are good examples :)

Answer 6

I have found that it profoundly confuses users sometimes when their "back button" is suddenly disabled and they have to click close, it seems to break flow. On the other hand it might also confuse them to be stranded on another website all of a sudden. But thats where the Back button comes in.

Another thing to consider is that many novice users don't comprehend the concept of tabs yet. So if their browser catches your "new window" in a tab, and the user tries to close or go back, they won't find their way back to your website.

Speaking from personal experience: I intensely hate it when websites open new windows or tabs. I will decide that for myself, thank you. Usually i ll let new tabs load in the background while I finish reading the article.

So, in conclusion: making them visually distinct could be useful if it is clear to the user WHY they are different from other links. Otherwise it would just be confusing. However, I would never (or almost never) make links open in new windows.

Answer 7

Agree with Lèse, it usually doesn't matter that much.

However, it can matter when, for instance, the link is part of a set of links that link internally. On a site I worked on, two of the links from the main navigation linked to external sites. Placing them with the normal links would confuse people, so I aligned them to the right of the navigation area and added icons like wikipedia does.

(almost) All of the links in articles on wikipedia are internal, only the external links section features external links. Adding the icon in this case makes sense, because they differ from the standard.

So to answer your question, it depends. From your wording I get the feeling that clicking on an external link is something your users don't want to do?

Answer 8

I think new-window is a judgement call. Often I like links, especially external links, to open in a new window without me making the (huge extra) effort of right-clicking & using the context menu.

So, if you are linking to something that the reader would probably want to look at later, while continuing to browse your site, then a new window/tab is the way to go. The Wikipedia icon is a good idea too.

Answer 9

I agree with Glen on the little arrow icon like Wikipedia uses to signify them, and I also agree with Maikel about not opening the links in a new window automatically. Let the user decide to do it if they want to.

Answer 10

Links that open a new window or tab should be clearly indicated. Some users will be confused when links open in new windows or tabs. Such users may also be confused by cryptic icons. If you really need to open links in a new window, just say so: Here's an example (link will open a new window)

But it's hard to make a good case for forcing any link to open a new window.
If in doubt, just don't do it.

As for external links, you might wish to differentiate them for legal or branding reasons. Use text "(external site)" or an icon as Wikipedia does (as long as you don't mind the fact that some users won't know what the icon means). But as long as they open in the same window then the user can always use the back button.