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?

AndroidHustle
  • 16,241
  • 2
  • 53
  • 80
  • 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. – AndroidHustle Apr 18 '12 at 13:40
  • Re your edit: ok, technically what you're calling a tooltip is a datatip, but "hover over something and get more info about it" is a fine pattern regardless of what you're hovering over. (A third example: image alt text on web pages.) – Monica Cellio Apr 18 '12 at 15:46
  • 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 '12 at 18:39
  • @BenBrocka, you mean <img title="some text" .../>? I've seen alt="some text" a lot. – Monica Cellio Apr 18 '12 at 18:50
  • @BenBrocka oh I see, you're probably talking about title in href, while I was talking about the img tag. Both img/alt and href/title provide something akin to datatips. (I was just trying to point out that tooltips, with tools, aren't the only way to have hovertext.) – Monica Cellio Apr 18 '12 at 19:24
  • @MonicaCellio tooltips are still titles for imgs too, alt is only for accessability – Ben Brocka Apr 18 '12 at 19:52
  • 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 '12 at 21:14
  • @MonicaCellio, the [alt] attribute is not shown as a tooltip, but the [title] attribute is. The [alt] attribute is required as a textual replacement of the contents of the image in the context of the page, whereas the [title] attribute is meant to be used as the title of the contents. Oftentimes developers will add one, the other, or both with identical text (which is not correct, but common). The differences are akin to the differences between subtitles and closed captions. – zzzzBov Apr 18 '12 at 21:21
  • 1
    @zzzzBov, Ben -- thanks. Anyway, AndroidHustle, the point was that you can provide helpful on-hover text for data too, not just tools. – Monica Cellio Apr 18 '12 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 '12 at 00:07
  • @liori you're right about that. However the product were developing will be used in a very regulated fashion and will never find its way to any portable device. But a good point nonetheless! – AndroidHustle Apr 19 '12 at 09:15
  • 1
    Why not just display the ids in the column? – Joshua Drake Apr 19 '12 at 13:36
  • 1
    @JoshuaDrake because the space is compromised enough as it is. And the item ids are 15 digit numbers, displaying five of those in one cell would crowd the table enormously. – AndroidHustle Apr 19 '12 at 13:39

8 Answers8

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

Benny Skogberg
  • 54,996
  • 22
  • 140
  • 241
JeffH
  • 3,950
  • 21
  • 28
  • 4
    agree that dashed or dotted underline is the standard solution that users will expect. – Ronald Apr 18 '12 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! – AndroidHustle Apr 19 '12 at 09:21
  • 6
    @AndroidHustle. There's even a standard way to do this in <abbr title="HyperText Markup Language">HTML</abbr>. – TRiG Jul 18 '12 at 17:15
  • 2
    Screen readers will probably do a better job handling <abbr> than qTip2. – Brian Dec 06 '12 at 19:46
  • 1
    Generally speaking, using 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 '12 at 00: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.

ChrisF
  • 14,869
  • 2
  • 59
  • 80
  • 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. – AndroidHustle Apr 18 '12 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... – Alex Feinman Apr 18 '12 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... =( – AndroidHustle Apr 18 '12 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.

JamesRyan
  • 1,880
  • 1
  • 15
  • 12
  • 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 '12 at 23:59
3

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

yitznewton
  • 159
  • 3
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.

Dan Is Fiddling By Firelight
  • 588
  • 4
  • 10
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.

Kaz
  • 980
  • 6
  • 6
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).

Frantisek Kossuth
  • 586
  • 2
  • 10
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 +.

Nicolas Barbulesco
  • 1,457
  • 10
  • 12