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.

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.

share|improve this question
    
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 '11 at 1:23
    
@BenBrocka thanks, I couldn't remember what they were called :) –  ashes999 Oct 21 '11 at 1:33
    
Why the DVs? How is this not a good usability question? –  ashes999 Oct 21 '11 at 16:31
add comment

3 Answers 3

up vote 3 down vote accepted

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.

share|improve this answer
    
+1 I think this is the first answer that addresses what I actually want to know. –  ashes999 Oct 21 '11 at 16:32
add comment

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.

share|improve this answer
    
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 '11 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 '11 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 '11 at 14:29
2  
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 '11 at 16:12
add comment

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.

share|improve this answer
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 '11 at 2:40
add comment

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.