10

I'm trying to solve the differentiation between in-site links vs. outbound links. Currently I'm using for all links the blue from my palette and underline on hover. Due to the nature of the site, that has a lot of outbound links, I believe this is confusing for users. They can't tell if a link will send them to a different site or to a detailed information page in my site.

Are there any common practices to solve such an issue?

Improve this question
5
  • Does it matter if the links are internal or external? Sometimes it does, often it doesn't.
    – DA01
    Jan 7, 2013 at 18:11
  • @DA01 From a user experience point of view I think it very much matters to convey appropriate expectation to users. Someone might like to explore more of a site's content, even if an interesting external link is offered, or the other way, quickly find their way to linked resources of an article, for example.
    – kontur
    Jan 8, 2013 at 9:16
  • @kontur Maybe. But I'm not convinced that's always true. A user wants to find the information they are looking for. Whether it's no the current site or not may be of little importance. And if they do leave the site, it's been shown that people are well versed in using the back button on their browser.
    – DA01
    Jan 8, 2013 at 16:11
  • 1
    @DA01 I think the difference is they know what to expect from a inbound link, while an outbound link will give a new experience.
    – Noam
    Jan 8, 2013 at 16:32
  • 1
    @Noam But it's a very typical experience. That is pretty much how the web works. People are linking across web sites all the time.
    – DA01
    Jan 8, 2013 at 18:37

5 Answers 5

Reset to default
8

One common approach to this is adding a small icon (offen a chain link or a arrow coming out of a square) to outbound links. This visually separates the two categories of links, with inbound links having visual markup, and outbound additionally having a icon.

Also do take advantage of browser built in tooltips (via the title attribute), as undecided users hesitate before clicking a link they are unsure of where it will take them, and in that case a insightful tooltip can help.

Edit: I found this interesting page on wikipedia detailing wikipedia's own conventions for denoting external links, with a table of examples. They take it one step further by distinguishing different types of linked resources, as can be seen in my screenshot (red emphasis added). enter image description here

Improve this answer
1
  • 1
    the arrow you've mentioned is what I see used most commonly in situations like this.
    – GotDibbs
    Jan 7, 2013 at 18:35
6

I'm going to offer a counter-point to most of the answers. Partly playing devil's advocate, perhaps.

Do not distinguish between in-site and out-site links.

Why? People don't care. They are using the internet to find information and will gladly follow the links they feel will get them to where they want to go.

In my experience (admittedly, this is by no means a scientific based thought) the belief that out-bound links should be treated differently stems from clients feeling that their site is more important than their customers feel that it is.

You often hear arguments "we need to launch external links in a pop-up so that users can come back to our site". I find that an arrogant belief that the users want to come back. They may. And if they do, they can certainly use that back button. But odds are they are really just focused on getting the information they are looking for. And if your site leads them to that information in an unobtrusive as possible way, that's a good user experience.

Improve this answer
2
  • I think people would care if multiple windows or tabs keeps popping up and they are having to switch attention or focus between different tabs or windows. I like the idea of being able to provide a preview so the user can decide if it is worth the effort or not when redirected somewhere external.
    – Michael Lai ♦
    May 23, 2013 at 6:57
  • I think that there is at least one reasonable (non-arrogant) use case: namely keeping folks from breaking the flow within an application, while still giving them access to another source of information, etc. There may be an argument for avoiding links in those situations, but that seems like a possibility.
    – David Eldridge
    Mar 23, 2018 at 17:38
0

Most new sites I design I have all outbound links open in a new window/tab (with target="_blank") while all in-site links open in the same tab. It doesn't take long for most users to figure out that pattern (which seems to becoming more common) and understand that if a new window opens the page is from different site. Granted they will not know it is an out bound link until after the new tab opens.

I do think it's a good idea to visually indicate it's an outbound link and think kontur's suggestion's are good. It would be nice if this convention could be somewhat standardized. In any case it wouldn't hurt to attach a class (maybe "outbound-link") to all outbound links in order to be able to plug in (and modify) an appropriate visual indication in the future.

Improve this answer
6
  • 2
    On the technical side of things, you can also use css selectors like a[target="_blank"] (all links marked up as opening in a new window) or a[href^="http://"] (all links with a href starting with http://, which, if you use relative hrefs for inbound links, are all external links). See quirksmode.org or sitepoint.com for additional info, but support is pretty much IE7 and higher.
    – kontur
    Jan 8, 2013 at 9:13
  • @kontur excellent point. If I was to do a site from ground up I might add the class in the link markup for clarity, but that attribute selector technique would a nice way to add new visual indicators to an existing site.
    – obelia
    Jan 8, 2013 at 18:07
  • This is bad advice. Opening new browser windows unannounced is considered a usability and accessibility no-no. (It's also just plain annoying).
    – DA01
    Jan 8, 2013 at 18:38
  • @DA01 considered by whom? Certainly in the past when opening a new window was expensive it was an issue but now it's quite common. Many usability experts have adopted this model.
    – obelia
    Jan 8, 2013 at 18:53
  • It goes back to 'do not change default behavior'. People like to control their own browser experience...be it keep a page in their current window, new window, or new tab. Forcing a new window can be very annoying for users...especially on mobile.
    – DA01
    Jan 8, 2013 at 19:54
0

Why not use an underline all the time (hover or otherwise) for outbound links? And no underline for in-site links. Obviously users will need to get used to it, but they should eventually get it.

Alternatively you could use dotted underlines for in-site links.

Improve this answer
3
  • That might be useful...but it could also be confusing...a user would have to think as to why links are being rendered differently in different locations.
    – DA01
    Jan 8, 2013 at 18:37
  • I disagree because users don't get used to things because of one site. You don't want users having to "get used to it" on your site.
    – kwh941
    Jan 12, 2013 at 0:16
  • Yes, I agree with your comments. I've upvoted DA01's answer.
    – naveed
    Jan 12, 2013 at 4:32
0

Links should always be styled the same whether internal or external.

Do not force your users to over think (extraneous cognitive load external site).

However, while the link should be styled the same, it can be useful to indicate what function the link performs through other methods. The most common are tooltips or small icons:

link icons

Image used from askthecssguy external site

You may also be able to indicate external links just from context for instance wikipedia has a manual of style on how to use links in articles. From the context it is obvious that this would link to wikipedia.

Of course, this becomes more difficult when you are linking through an image rather than text. Tooltips are easy to implement but need the user to hover. Better may be to inset an icon into the corner of the image.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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