4

So it's mentioned frequently how icons and buttons might not always be 100% intuitive in what they mean, and that ideally they should be accompanied by a label.

What about a tooltip, like in HTML when you have the <dfn /> tag? Essentially, it underlines a word, and if you hover over it for a second, it'll show a tiny label popup with the explanation. Moving the mouse removes the tooltip.

Is this a good idea, usability-wise, as an alternative to a label (for constrained real-estate environments, like Android screens)? Also, should I have no delay, a short delay, or a long delay before showing the information? What about an option to disable the labels?

Edit: Just to be clear, this is for a non-HTML environment; but I'm asking in general about tooltips, and how to make them usable.

3
  • I think what you're asking about are called tooltips and they're commonly used to explain how to use an element in an interface. en.wikipedia.org/wiki/Tooltip
    – Ben Brocka
    Oct 21, 2011 at 1:23
  • @BenBrocka thanks, I couldn't remember what they were called :)
    – ashes999
    Oct 21, 2011 at 1:33
  • Why the DVs? How is this not a good usability question?
    – ashes999
    Oct 21, 2011 at 16:31

3 Answers 3

4

Personally, I think tooltips should always be used where you have hover-ability. The only question is what time to wait before display, and I think this should be directly proportional to how common the control in question is, and consideration also needs to be given to the intended audience. For example, on a public site you should use the lowest denominator - someone who has never seen a computer before and stumbled across your site.

The number one rule to remember about this is that when people get frustrated, unlike the average geek who starts looking elsewhere for solutions, the average person will actually narrow their focus, so the closer to the icon that you can put the information, the happier your users will be.

For decreased real-estate (such as a phone screen), using smaller text can be helpful - though for the vision impaired it might be worse.

Just make sure that you always keep in mind your audience.

1
  • +1 I think this is the first answer that addresses what I actually want to know.
    – ashes999
    Oct 21, 2011 at 16:32
0

If the icon is simply decorative and there is no action or link attached to the icon, then it should be an <img alt=""> element with a blank ALT attribute.

If the icon is an action or link, you should not use the <img> element but instead use an anchor <a> element and set the icon image to be the background image, and then use a TITLE attribute for a textual representation of the link/icon.

The TITLE attribute will appear as a tool-tip on mouse-hover, and will also be used by screen readers.

4
  • Sorry, I guess I didn't make it clear that this is a non-HTML question. This is a general question about using tooltips.
    – ashes999
    Oct 21, 2011 at 1:34
  • 1
    Sorry but no. Never us a image tag with a blank alt text. By downing so you are creating a 508 Accessibility error. This is bad practice. If an image has to be used and you don't want it to be seen by a screen ready, it should be a background image.
    – JeffH
    Oct 21, 2011 at 14:11
  • From 508 -- "Web page authors often utilize transparent graphics for spacing. Adding a text description to these elements will produce unnecessary clutter for users of screen readers. For such graphics, an empty ALT attribute is useful"
    – Erics
    Oct 21, 2011 at 14:29
  • 3
    Blank alt attributes are fine. Making it a background image is good too, but the empty alt attribute is an acceptable approach for decorative images. Keep in mind accessibility errors aren't always indicative of real accessibility issues as the validation tools rarely have the ability to comprehend context.
    – DA01
    Oct 21, 2011 at 16:12
0

Is this a good idea, usability-wise, as an alternative to a label (for constrained real-estate environments, like Android screens)? Also, should I have no delay, a short delay, or a long delay before showing the information? What about an option to disable the labels?

No, not a good idea. Since you especially mentioned Android, there is no hover on a touch screen.

1
  • 1
    Ah, that lack of hovering keeps biting me. Anyway, maybe you can explain a bit more why you don't think it's a good idea, as this question is general.
    – ashes999
    Oct 21, 2011 at 2:40

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.