Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
In May 2014 there's still no distinct answer including real user testing on usefulness of distinguishing external links (f.e. via icons). Answers given include just examples (most often Wikipedia) or opinions. :\ –  Volker E. May 21 at 9:49

10 Answers 10

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:

enter image description here

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

share|improve this answer
    
I've used that technique on a website once too ... can't remember where. –  Nathanael Boehm Nov 26 '09 at 4:46
3  
The Wikipedia icon doesn't mean "launching another window". It means "external site". Clicking the link just opens the external site in the same window; it doesn't open a new window. –  Bennett McElwee Dec 7 '09 at 0:17

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.

share|improve this answer

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?

share|improve this answer

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.

share|improve this answer

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

alt text

Obviously you need to explain what the icon means somewhere.

share|improve this answer
4  
Similar icons are used elsewhere to mean "opens in a new window" so consider that when you implement it. –  Rahul Nov 15 '10 at 15:19
    
@Rahul - that is also true, so a different icon might be in order –  ChrisF Nov 15 '10 at 20:42
4  
@Rahul I have yet to understand why some people insist that links should open in a new window (leaving internal pop-ups aside). You're completely right, I've just never understood the need for target="_blank" :-S –  jensgram Nov 16 '10 at 8:04
    
@jensgram Related question: ui.stackexchange.com/q/2006/249 –  Rahul Nov 16 '10 at 12:40
    
@Rahul Thanks :) (Apparently I have already seen that question -- and upvoted your answer.) –  jensgram Nov 16 '10 at 13:47

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.

share|improve this answer
    
Note that my example link won't really open in a new window. It's just an example... –  Bennett McElwee Dec 7 '09 at 0:51

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.

share|improve this answer

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.

share|improve this answer

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 :)

share|improve this answer

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.

share|improve this answer
    
I found myself inserting _blank into a bunch of external links in a blog post the other day trying to reduce the absurdly high bounce rate on my blog ... but I felt so guilty about it I removed them all 3 minutes later. –  Nathanael Boehm Nov 26 '09 at 4:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.