13

I'm making an app where one can read old English works, where I'd like to have two clicking actions:

  1. The user should to be able to click on certain words which take a person to another page (cross-linking)
  2. The user should be able to click on a word and have a definition pop up.

The links won't overlap (so a word which will be cross-linked won't be defined).

I was thinking of just changing link colors (so link type 1 will be blue (Hey, it is a normal link) and link 2 will be red).

The problem is that going to another page is jarring, while a definition isn't (it's a sandwitch/toast style notification), and I want the features to be naturally discover-able.

I've seen websites have special icons next to links which cross-link to different sites, but I don't want that either, as it's too visually cluttering.

Is there a way to show that a link won't send you somewhere else?

UXer
  • 231
  • 1
  • 4

5 Answers5

31

enter image description here or you can try dotted border; be sure to test it on the users though.

If it's a quick reference and no action (like selecting / scrolling, although you can do it on the pop-up with some effort) is required on pop-up, I would suggest to differentiate with actions in addition to the style:

  1. Regular links (click -> another page)
  2. Hover on link + help cursor enter image description here (saves click to open and click to close) -> definition pops up like so

enter image description here

Runnick
  • 1,753
  • 1
  • 13
  • 29
  • What is the advantage of differentiating between actions, unless you want to allow both actions on the same element? In my experience, users are, for instance, already confused about single/double click in different list boxes (in such a way that they are often unsure which one to use at a particular point); it seems to me this would be a similar case. – O. R. Mapper Apr 07 '17 at 07:16
  • 4
    As for hovering specifically, note that the expectation is that popups that appear upon hovering over something disappear when leaving that area. That may be fine for very small amounts of information, but it seems like an antipattern for extensive text as shown in your example: Some users like to move the cursor during the amount of time required to read all that text, or even to point at some parts of the lengthy text with the cursor. If copy-to-clipboard from the popup text is desired, mouse interaction in the popup is necessary, anyway. – O. R. Mapper Apr 07 '17 at 07:18
  • @O.R.Mapper Great points! I'll edit my answer. If action needed on pop-up contents, definitely it's better not to use hover. For a quick reference I still believe it works great, saving a click. – Runnick Apr 07 '17 at 09:14
  • 3
    Hover detection may be difficult to achieve on touch devices. – Ouroborus Apr 07 '17 at 18:38
  • @Ouroborus true. Even though hover will work as click on mobile, you'd want to put some effort into closing the tooltip. Or you can disable hover entirely. – Runnick Apr 07 '17 at 18:42
  • +1, I find this to be intuitive, or I've seen it elsewhere. I would also recommend using <dfn> or <abbr> tags for the defined terms instead of anchors to keep the markup semantic and accessible. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn – cloudworks Apr 08 '17 at 18:07
6

have a definition pop up

I can think of two options:

1. The Windows Ellipsis Pattern (link...)

The purpose of these three dots is to tell the user that there is some additional information which will open in a popup.

enter image description here

2. Icon along with the link

enter image description here

This is from the Microsoft UX Guidelines for Ellipsis

Using ellipses

While menu commands are used for immediate actions, more information might be needed to perform the action. Indicate a command that needs additional information (including a confirmation) by adding an ellipsis at the end of the label.

Dipak
  • 16,183
  • 6
  • 45
  • 51
  • 14
    "The purpose of these three dots is to tell the user that by clicking on it a popup will open." - that is not quite correct. The purpose of these three dots is to tell the user that the requested action will not be run immediately, but only after some additional input. That is why, for instance, the Help -> About command should not feature these dots despite opening a popup. – O. R. Mapper Apr 07 '17 at 08:00
  • 1
    @O.R.Mapper Thanks! Totally missed it... corrected. – Dipak Apr 07 '17 at 08:08
  • I have seen websites (news) which have an underlined arrow icon pointing diagonally right and upwards to the right of links that are external. – TernaryTopiary Apr 07 '17 at 10:31
  • 1
    @TernaryTopiary: What's the point of highlighting that option both in the comment and in this answer when the OP has explicitly written "I've seen websites have special icons next to links which cross-link to different sites, but I don't want that either, as it's too visually cluttering."? – O. R. Mapper Apr 07 '17 at 10:36
2

Different link colours might induce some confusion about visited links (which are usually indicated by different colours, too, if they are indicated at all).

An alternative way, though, might be to use different styles of underlines. It has been done before, for exactly the same purpose you describe: The old WinHelp (the help system in 16-bit-versions of Windows) featured jump-links and popup-links. As Wikipedia describes:

In the .hlp file, the jumps show up as green text with a single underline, and popups show up as green text with a dotted underline.

O. R. Mapper
  • 1,668
  • 1
  • 14
  • 11
1

There are so many ways to convey a pop up vs a link redirect

Incorporate an icon:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I'm not saying the question mark is specifically the best choice. It really depends on what the popup is about. This however gives enough of a variation that users will know what does what.

Visual distinction:

mockup

download bmml source

Creating visual distinction between the two can help convey that one takes you out, while another keeps you in.

Things to keep in mind when designing a language on your site:

1) Keep it consistent. If you do, it will become a learned language. Something people will start understanding as they go through your application/site/whatever.

2) Make it mobile friendly. What ever you decide to do, make sure that it's mobile friendly (allow enough spacing, and don't do hover effects).

Hope this helps.

UXerUIer
  • 5,485
  • 1
  • 23
  • 37
0

I see varied answers here and a common thought about all of them is we are talking about visual treatment and any approach needs to be validated against a set of users to be sure.

Having said that, here is my option.

I would keep underline treatment separate and only use for the link. Users are familiar and already associate underlines with links so there is no reason to break that mental model.

I have seen dotted and dashed underlines used by in-page advertising companies like Infolinks before. That is why I would want to validate this user treatment.

I would change the color of the word which is supposed to give more information on hover. This visual treatment is different from underlines and so I will not mix the mental models.

You can play around with colors for both based on your branding requirements.

enter image description here

In both the cases, I would take care of not including many hover or click points on the screen.

Harshal
  • 3,105
  • 16
  • 23
  • 3
    The blue link without an underline looks more like an external link than the underlined black text, to me... – Samuel Bradshaw Apr 07 '17 at 13:42
  • I agree, so I said you can play with colors based on what users prefer. My idea was to keep underline for link only and other way for other function – Harshal Apr 08 '17 at 11:57