3

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:

links

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:

wikipedia external link

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.

links with icon

2
  • To clarify the question -- why this indication is necessary to user? Jun 27, 2014 at 8:24
  • Because the client asked for it ;) But it'd definitely be more user-friendly that way.
    – Vince C
    Jun 27, 2014 at 8:29

3 Answers 3

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

1
  • 1
    The problem here isn't how to implement it, it's how I should be designing this in a user friendly way. Besides, in my case, the link's content isn't stored in the href but in several data attributes. I'm actually just looking for a good reason why using icons is superior to any other way or where they should be placed. I do appreciate the answer though.
    – Vince C
    Aug 4, 2014 at 6:30
0

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.

3
  • Thanks for replying. I get your overall idea but I'm mostly wondering about a real implementation. These links contain just some words or names so I'm not quite sure as to how I'd be doing that. Do you have an idea how I could implement that text-based context indication? Right now, I have something like this, which doesn't look too cluttered but still isn't perfect.
    – Vince C
    Jul 2, 2014 at 6:51
  • So you have no control over the actual content, just the styling for the links? Because I would write the content so the it might say something like "this is a video of [link name]" then you don't need the icons. Otherwise, I suggest at least putting the icons after the text in a consistent position and size so that there isn't extra processing for the users.
    – Michael Lai
    Jul 2, 2014 at 22:16
  • Well, I do have a tiny bit of control. But your idea won't work in this case. I have text blocks filled with popup links. I can't add "this is a video/image of..." on every link, that would definitely make it harder to read. Regarding your second thought, I might place them behind the word. I was just thinking to place the ones that show a popup before the word and the external link after.
    – Vince C
    Jul 3, 2014 at 6:19
-1

How about showing a tooltip when hovering the link?

Something like this: CSS3 Tooltips

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

4
  • It won't work for keyboard users either. Anything that requires a hover state to trigger means you're only servicing people who use a mouse when browsing the web; which is increasingly something you can't assume to be true.
    – JonW
    Jul 2, 2014 at 9:18
  • @JonW That's right. This only is an option if you know where and how the page is going to be used, i.e. a companies intranet. Jul 2, 2014 at 9:25
  • Many company intranet users could (and likely are) keyboard users. Not everyone uses a PC with a mouse.
    – JonW
    Jul 2, 2014 at 9:27
  • Definitely not an option, as stated, the mobile view is equally important.
    – Vince C
    Jul 2, 2014 at 9:37

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.