Showing users what kind of content is behind a link (popups)

Question

I've been developing a website which contains quite some links inside a text block. Clicking one of those links will open a popup with one of these types of content:

• image
• video
• exercise
• translation
• external link

It could also open 2 or more, though I doubt some of these would be used together (i.e video and exercise). Images will be accompanied by an external link most of the time.

This is how links look like at the time:

The question is:

What's the best, most user-friendly way to show the user what kind of popup content is behind a link without breaking the reading flow of the text (and should also be working on mobile)?

I've already got a way to represent a translation, the '°' symbol. But I'm not so confident about the other ones. For an external link I was thinking of something similar to this which would go directly to the link instead of showing a popup with a button:

For the other 3, I'd be using icons that match the type of content.

The problem with this is that the content get's easily cluttered and unreadable when you've got dozens of links in a text block. Also, if you had multiple types of content for one link you'd have to either place multiple icons or combine them in yet another icon. I just think there's a more practical way out there.

So, do you guys know of a more user friendly way to this?

EDIT: This is how I've implemented it now.

Answer 1

Using some conditional styling in your CSS you could add icons to the ends of links inline with the content that would look for certain URL's or kinds of links for instance:

a[href^="mailto"]:hover:after{ 
    content: "\f003" attr(title);
    font-family: FontAwesome;
    font-style: normal !important;
    font-weight: inherit !important;
    text-decoration: none !important;
    color: inherit !important;
    padding-left: 0.5em;
    display: inline-block;
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
}

Would add a Font-awesome envelope icon after any mailto link so the user would know they are going to be directed to their default mail program. Putting a version of this without the :hover in a @media to target mobile would address small screens.

Chris Coyier has a nice write-up about styling links depending on their destination

Answer 2

I think with a link you only need to indicate or differentiate between these things:

• Is the user going to be taking to another page?
• Is the user going to be taken to another section of the same page?
• Is the user going to be provided with a pop-up?

You may not need to differentiate between internal and external pages, but you do need to indicate whether you are going to load a different page or pop up a new browser window. So really you are just indicating the relative location of the link to where the user is currently, and how that location will be presented to them. What the user is more interested in is whether their train of thought or flow of action is going to be interrupted, and if so how will it affect them.

As for the type of content, I believe the context of the link should be made rather clear through the text itself, because you can do that more easily with words than the link indicator due to the variety of content (and combinations) that you can serve up.

I think the external link / window popup symbol is well understood (and you can borrow it), so you just need to think about whether you want to indicate that they are on the same page/site or not through another visual cue (like colour or symbol). This should keep your final design simple and not too hard for the user to remember.

Answer 3

How about showing a tooltip when hovering the link?

Something like this: CSS3 Tooltips

Unfortunately this won't work on mobile devices...