Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am working on on a site which uses a hover state on a link within copy (a window pops up, much like a tool tip) as well as a standard link (which takes the visitor to another page).

The distinction is that the hover link is identified by having a perforated line running underneath it and the standard link has the standard 'underline'.

As these links have two distinct differing actions is there any best practice or reading material which suggests they should look visually different?

Just for info - I believe the text links should be handled differently as they have separate actions and behave differently.

Cheers

share|improve this question

4 Answers 4

To the other good suggestions in this thread, I'd recommend altering the cursor (via CSS) for those tooltip links.

a.tooltip {
    cursor: help;
}

The "help" cursor type is applied frequently around the web for tooltip links, acronyms with a title attribute that's displayed on hover, and so on.

See http://css-tricks.com/almanac/properties/c/cursor/ for a comprehensive list. Also note that you can use a custom image as your cursor, which might be preferable to the question mark appearance of the "help" cursor in your application.

share|improve this answer

As I interpret the question, you will display sentences of text where segments in the text can be either normal links or hover elements which aren't links but triggers a small popup to show adjacent to the element when hovered.

It's well known that normal links should be cued with an underline and a differing (usually blue) colour, however the hover links with a dashed underline are not that well known amongst the general public. You almost have to have some association with the web designer field to know of that convention. Therefore I would suggest that you, in addition to adding a dashed underline (or skipping the dashed underline altogether), also display an indicator which cues that the item is expandable: ▼.

Here's a link to the unicode ID of the triangle.

Here's an example of how it could look:

enter image description here

On hover: enter image description here

The expandable indicator is conventional, and most users will recognize it and successfully interpret that the element holds some additional info that will appear on either hover or click.

share|improve this answer
    
Thanks for that, you have interpreted that absolutely right. I know the hover link should definitely have a clear identifier and your example answers that question. Just for info - the two different links wont appear in close proximity to each other. Thanks –  Tommisauce Oct 3 '13 at 7:36
    
@Tommisauce Ok, I don't think the lack of close proximity between the elements will pose a problem. The elements cues different behaviour, so a user will be able to interpret how they work without having them presented close to each other. –  AndroidHustle Oct 3 '13 at 8:11
    
As someone who just now read the question and response, I would never make the connection that a tiny Unicode arrow next to the text means there would be a pop-up. I think the bigger question is why there are two types of data/interaction that are so closely linked visually/graphically. Bound by keyword or not, are these two things so similar such that you're trying to force an indicator into it, or should they be more visually distinct? –  borego Oct 6 '13 at 6:21

Different actions should be differentiated because the user likely has one expectation for each affordance's outcome. For best practices, there's a thread that discusses tooltip usage. This may not compare tooltips to links (loosely does), but it should highlight that tooltips are often displayed differently to begin with.

To borrow from that thread, Glen Lipka posted this image to highlight a few common patterns for signifying a tooltip.

enter image description here

It sounds like you are already using the dashed underline. You haven't provided any reference for what the tooltips are being used for (icons on the site, definitions, abbreviations, etc.), but this may affect which route you go in addition to following a completely different route to display hidden information.

share|improve this answer

It depends on how long these hover links are (one word, few words, whole sentence). If it more than a few words, consider a different approach, such as an inline icon, or an icon in the margin that is clearly tied to the text.

If it is just one or two words, and they are used sparingly, then consider using something like the tags appear on this very page. Look under your original question and imagine those tags appearing inline in the text. They would draw the eye, if that's your goal.

If your goal is to keep it subdued or there will be lots of them, like dictionary definitions for words, then stick with the dotted underline.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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