Tooltips and title (and a bit about alt tags)

Subject

Tooltips

Also known as

title attribute, titles, link title

See also

Variants of tooltip: click-tip  (user must click to view tooltip), super-tooltip (richt-text styled tooltip)

Similar to tooltip: ALT-tag   (see below for differences of ALT tags)

Screenshots

 
Above: NiceTitle is a JS/CSS implementation by somebody

Applies to

– Links <a> and navigation links
– Form elements and controls
– Buttons and controls
– Images and logo’s  (could contain tagline)

Use

– The goal of the link title is to help users predict what will happen if they follow a link.
– It’s a navigation aid to decrease disorientation of links. For example, tooltips on the home page allow the user to quickly preview the underlying content behind a link, without having to drill down into the page.
– Tooltips can save user time, avoid waiting for pages to load, especially those of badly named links.

– People often ignore embedded links. They don’t want to be interrupted by having to wait for another page to load. Tooltips can increase motivation to visit a link (if written well and not overused).
– In Web Apps, use tooltips as a descriptive text to tell user what the object under the mouse does. If you don’t need them, that’s great -you have a self-describing design- but many users expect tooltips anyway. [3]. “Minesweeping” is the irritating activity of moving the pointer across icons to uncover ToolTips or rollovers in order to figure out what the icons represent. Such designs require the user to actively decipher the interface, probing and testing the meaning of each interface element, rather than the interface elements being self-apparent.
– For form controls?? (e.g. the +/- buttons in a shopping cart)
– For images use the alt attribute, not the title attribute.

Design

– Beware, tooltips can obscure the view of any elements under it.
– Mac browsers show web tooltips in [balloon tooltip] style instead of rectangular PC style [Nielsen, 1998].

– Tooltips appear after 0,5 seconds and dissappear after ~5 seconds

 Accessibility

– Title attributes are by default NOT read by screen-readers (as oppossed to what Nielsen says), but if the user has turned it on can be read out loud by auditory browsers.
– There are some notes that state that the title attribute can be harmful to accessibility.

SEO

There are no known SEO beneficial effects to using TITLE attributes. If any benefits are mentioned, they are often myths. Further research is needed.

Copywriting

Do:
Appropriate information to include in a link title can be:    [source:1]
– name of the site the link will lead to (if different from the current site)
– name of the subsite the link will lead to (if staying within the current site but moving to a different part of the site)
– added details about the kind of information to be found on the destination page and how it relates to the anchor text and to the context of the current page
– warnings about possible problems at the other end of the link (for example, “user registration required” when linking to The New York Times) 

Don’t:
– Don’t add link titles to all links: if it is obvious from the link anchor and its surrounding context where the link will lead, then a link title will reduce usability by being one more thing users have to look at.
– The user should not have to read the whole tooltip text. The first few words should give the user a good idea of what the link is about.
– Tooltips have to be brief. Some browsers (FF) can show only a limited amount of tooltip text and often disappear after 5 seconds. Limit to 60-70 characters.
– Tooltips on links should be used to enhance website usability through information scent.
– Use tooltips only when they provide the supplementary information about the link that they’re intended for – don’t use it to say ‘Click Here’ and don’t repeat the link text redundantly (although Amazon and Landsend do do this for their image-based commerce buttons).
– Don’t use title attributes for anything not supplementary, definately don’t use it for site critical information.
– make the link anchor and its surrounding text understandable without seeing the link title. Users should not have to point to a link to understand what it means: the link title should be reserved for supplementary information.
– There is no proof that titles affect SEO.

Process of identifying alt/title tags

Next time we define tooltips, maybe we should first carefully identify if each link/button we want to give a TITLE tag/attribute is not in fact a button image. For example, I’ve found that the buttons in an Order Process I was working on were not images, but (copy-able) text. To check this, right-click an image or try to select the text characters in the link (would this work for all cases?). However, what to do in such cases where there is a clickable, copyable link on top of a clickable image button? I suppose that the former should receive a TITLE tag that has the exact text as the ALT tag of the button below it..

Differences with ALT-tag

Whereas the TITLE tag can be used for practically all HTML elements (<a>, <span>, etc), the ALT tag or attribute is used for images (<img>) only.

All the above guidelines apply to the ALT tag also, with the following exceptions:

• All images should have an ALT tag. All clickable images should have an ALT tag which describes the text on that button, usually just a repeat of the exact text of the button itself.
• Possible SEO benefits of using ALT tag versus none for using an TITLE tag.
• Accessibility benefits of ALT tag has been proven over and again, whilst those for the TITLE tag are over overrated.
• Possible design (look) differences.

Links and further reading

[1] Jakob Nielsen’s “Using Link Titles to Help Users Predict Where They Are Going” @ http://www.useit.com/alertbox/980111.html 
[2] Presentation about Title attribute at Web Essentials 05 @ http://www.paciellogroup.com/resources/articles/WE05/ 
[3] Designing interfaces (book)
[4] Microsoft (Windows) tooltip guidelines @ http://msdn.microsoft.com/en-us/library/aa511495.aspx 

 For Developers

NiceTitle by http://www.kryogenix.org/code/browser/nicetitle/
Similar examples to Nicetitle here
A gallery of 50+ Tooltip scripts also useful for designers