jim.shamlin.com

Links

Defined: a "link" is anything (text, graphic, or form button) that a user might click to cause a reaction (usually, loading a new page)

1. Use meaningful link labels (5:4)

The link label (text or whatnot that the user must click to activate the link) should be clear. It should indicate what the user should expect to see when they click the link, and it should be different from other links that appear in the same page. Also, the dread "click here" is to be avoided - place the link intuitively.

2. Link to related content (4:2)

Provide lists of links to related content within a site that may be located in other sections, in order to help users find and consider all related information.

EN: This seems to be relevant to certain types of content - news items, encyclopedia articles, etc. - on very large sites.

3. Match link labels to the title of their destination page (4:4)

Users are more confident that they have acted correctly if the title of the page on which they arrive matches the text of the link they clicked.

EN: I think some variation is possible - the two need not be verbatim - but they should be similar enough that the user doesn't get confused.

4. Avoid misleading cues to click (4:2)

If an item is not a link, it should not look like it is one.

EN: Some subjectivity here as to what would mislead a user, but some things are clear-cut: text underlining is a visual cue for a link (don't use it for emphasis) and beveled edges of a graphic indicate a clickable button (don't bevel for artistic effect).

5. Repeat important links (4:2)

It is acceptable to place a link in multiple locations to accommodate different browsing or cognitive styles. For example, a recipe for apple pie might be listed under both 'apple" and "pie", or a link that contains store hours might be listed in the navigation sidebar as well as within the content of a page.

6. Use text for links (4:4)

Text links are more readily recognized than graphical ones, especially when a site contains a mix of graphics, some of which are links and others are not. This is true for graphics that contain words.

EN: It may be acceptable to use a graphic for a link if its location is indicative. For example, a logo in the upper left is generally understood to be a link, or several graphics in close proximity in a navigation area are understood to be links).

7. Differentiate used links (4:2)

By default, browsers use a different color for links that have been visited. If you deviate from this, be sure to provide different colors for visited links. Also, be sure that the visited link color is less intense than the unvisited link color, and be aware that there are default browser colors (do not use blue for visited links or purple for unvisited ones).

8. Provide consistent link cues (3:2)

The cue that an item can be clicked should be unambiguous (example, if a link color is the same as text color, the link will be overlooked) and they should be consistent throughout a page and site (there should not be several different colors for links - ideally, use one color, consistently, for all links throughout a site).

9. Ensure that embedded links are descriptive (3:4)

The term "embedded" is used to indicate a link that is used in context (a few words in a sentence of content serve as a link to something else, but the rest of the sentence is plain text). These links should be descriptive as well.

EN: Embedded links should be avoided, as they encourage a user to exit a page in mid-sentence or mid-topic, and the user may become distracted and fail to return, or lose their conceptual place when they do return. Instead, provide a list of relate links at the end of an article or page.

10. Click to link (3:3)

Using mouse-over events to trigger a link results in a greater number of errors and a high level of user frustration. Users should be required to click something in order to link to another page.

11. Use appropriate text link lengths (3:3)

A little subjectivity here on what is appropriate, but the guidance is to consider the text used to link: it is "not enough" if the highlighted words do not describe the page to which the user is linking; but "too much" if it contains more information than necessary (in the example, an entire paragraph of text functions as a single link)

12. Flag external links (3:3)

Users expect that links will transport them to another page within the same site, and should be forewarned if the link takes them to another site entirely.

Examples include the URL presented beside a link (EN: novice users may not understand the implications of an URL, but I expect this is something they learn fairly early), an icon or word beside a test warning of an external link, and a click-through page informing the user that they are leaving a site and going to another.

13. Clarify clickable regions of images (3:3)

When an image map is used (parts of it are hot, others are not), the user should have some indication of what should be clicked, especially when it is not intuitive (a picture of two men sitting at a bar, where the user is supposed to click the bottles on the shelf) or ambiguous (a map of the united states shows time zones ... does the user click their state, or their time zone?)

14. link to supportive information (3:1)

Use links to provide definitions or glossary concepts to help users understand text.

EN: See my previous note on embedded links (9, above) - however, it would still be preferred to use a pop-up window or DHTML layer can be used to provide supporting information without taking the user out of context. It might also be wise to make these "links" of a different color because they do not have the same purpose/function as "normal" links.