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.