24

The title alone would probably result in a chanting "NO!" as the popular answer, but please let me elaborate.

Background

We have a table of items that represent something. Each item can hold one to five attributes. A column in the table displays how many attributes each item has. This column consists of a cell for each item, containing a link-styled label saying 1, 2, 3..., depending on how many attributes it has. If the user hovers over the cell, a tooltip will appear displaying a text with the ID's of the attributes contained in this item.

Problem

The label, styled as a link, is not clickable as it ignores any click input. The reason for its appearance as a link is to attract the user to it, potentially leading to the user thinking "Hey, I have something here". They might hover over it, perhaps try to click it, and will be shown the tooltip.

I'm not really sure how else to communicate affordance for a tooltip.

Question

Would this be considered good UX? You could argue that the user is being fooled, but is the gain enough to justify that?

Own opinions are OK but I would prefer factual evidence strengthening your case.


EDIT : I guess a side question here is whether it's OK to have a tooltip for something that isn't an action but a display of data instead?

13
  • 3
    hmmm... This question is within the scope of UX.SE and if someone had a problem with it I would have loved some feedback accompanying that dislike. Apr 18, 2012 at 13:40
  • 5
    @MonicaCellio arg, those are title attributes not alt :). Only old versions of IE (inappropriately) display alt as a tooltip, it's meant for accessability
    – Ben Brocka
    Apr 18, 2012 at 18:39
  • 2
    For help text that's shown as a tooltip, it's common to use a dashed underline and to change the cursor to the "help" pointer.
    – zzzzBov
    Apr 18, 2012 at 21:14
  • 1
    @zzzzBov, Ben -- thanks. Anyway, AndroidHustle, the point was that you can provide helpful on-hover text for data too, not just tools. Apr 18, 2012 at 22:16
  • 4
    Note that some devices do not have anything like "hover" -- e.g. tablets or smartphones. If you want your UI to work on these devices, you need to find another way to access this information.
    – liori
    Apr 19, 2012 at 0:07

8 Answers 8

52

I would suggest using the dotted underline approach for abbreviation/acronyms. This is good way to let the user know that if they hover/click SSN it means Social Security Number. For more descriptive items like contextual inline help, us an information icon of "i" or a "?" icon for added assistance. The javascript/jQuery plugin I use is qTip2.

enter image description here

enter image description here

5
  • 4
    agree that dashed or dotted underline is the standard solution that users will expect.
    – Ronald
    Apr 18, 2012 at 21:41
  • I did not know about using a dashed underline to imply hover contextual help, which maybe is a bit alarming on my part. =) but since this is the standard to imply tool tips it's definitely what I want! Thank you! Apr 19, 2012 at 9:21
  • 6
    @AndroidHustle. There's even a standard way to do this in <abbr title="HyperText Markup Language">HTML</abbr>.
    – TRiG
    Jul 18, 2012 at 17:15
  • 2
    Screen readers will probably do a better job handling <abbr> than qTip2.
    – Brian
    Dec 6, 2012 at 19:46
  • 1
    Generally speaking, using <abbr> and the default styling (i.e. dotted underline) is good. However, this context is a table with an entire column of numbers that will have dotted underlines, and that combination can be quite offputting - it might be more visually pleasing to instead have a (i) icon along side each of the number.
    – Erics
    Dec 14, 2012 at 0:02
8

How about adding a information icon "i" that is a hover target or possibly clickable by the side of the label.

You could have a tooltip which presents a summary of the information you wish to convey on that rather than the label. If necessary the click could be used - for touch screen devices say - to also display the tooltip.

3
  • Thanks Chris. Thing is though there already is an action column which opens up a modal window that displays all items contained, ant operations to them. What I want is to display the id:s of the items without forcing the user to load another view where they could be listed. Apr 18, 2012 at 13:33
  • 7
    Then keep the (i) idea, but make it a hover target, rather than a clickable link. Using a false affordance (a 'link') seems like the wrong way to get people to hover there, but I see many sites which have a (i) or (?) icon that is intended to afford hovering for more info. Of course, I'd make the entire cell have the tooltip, just for convenience... Apr 18, 2012 at 14:02
  • @AlexFeinman You bring up some neat ideas. Maybe having an "i"-icon and making the entire cell trigger the tooltip is the best approach. In any case I think it sounds better than the way I have it now, it's not nice to trick people... =( Apr 18, 2012 at 14:07
3

It seems to me that the answer here is that you are misusing the tool tip and that the link should do something when you click it even if that is to popup the same info as the tooltip, the tip should be at most a summary.

1
  • 1
    Yup, the visual styling of links are a cue to the user that they should action the link (eg. click, tap, tab-enter, etc), not simply hover over the link. Either find a different cue for hovering (eg. the suggestions for (i) or (?)), or make sure that clicking the pseudo-link invokes an action.
    – Erics
    Dec 13, 2012 at 23:59
3

How about a title attribute and dotted bottom-border? (assuming this is HTML/CSS)

2
  • This isn't really an answer to the question: "Is it ok to style a label as a link".
    – JonW
    Apr 19, 2012 at 12:43
  • @Jon — I find that this is a very good answer to the question. Dec 19, 2013 at 17:13
1

What you're describing sounds similar to the UX that Intellitext type ads use. Even though you're using it for a different purpose, copying UX from an unpopular form of advertising isn't a good idea. My immediate reaction would probably be to either rage quit the page or to fire up adblock to delete the offending elements; it's doubtful I'd look closely enough to realize my initial impression was incorrect.

1

Attracting the user to click on something makes it sound like the user is an insect.

There is no need for any visual cue that information is available for the item via a tooltip. This is something that users can just discover (or learn about from documentation or from other users). If you consistently make this kind of helpful information available throughout the application, users will expect it and look for it.

(I know, I know, you wrote and configured great tooltips and want the users to notice right away and read every one of them.)

The exception is if you have many similar objects in the display and only some of them provide this help. An obvious example of this a handful of links in a paragraph of text. It is okay to style some words or phrases in a paragraph of text as links just in order to give them tooltips.

Semantically, they are links even if they do not navigate to a different URL. They are links to tiny documents comprising their tooltip documentation.

The decision basically should hinge around: is this web-like, or desktop-like? In a desktop application, we don't want hyperlinks substituting as UI such as buttons, menu bars and whatnot; it is acceptable only in text.

0

I suggest to make that label a link. Function of that link should lead the user somewhere. For example details page of Something containing more informative list of Items. Or popup menu - each menu item (named by Item's ID) could open separate page of Item's detail (or report with Somethings sharing the same Item - depending on your data model).

0

I am inclined to answer NO. But I don't have an ideal solution in this case. What I suggest as affordance is to place something like an ellipsis  or a +.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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