Problem

You must provide a function to allow access to related content, from arbitrary locations within a page.

The Link is a very common action element, available in one way or another on every platform.

Links are clearly differentiated from the text in which they appear, and cannot be confused with any other text styling.

Solution

Links are simple, textual interactive elements which provide access to additional information, generally by:

Links are almost purely hypermedia elements. While not invented by the Web, and not exclusive to it, the ubiquity of websites and links can serve as a good guideline for display standards and use of the pattern; your users can have a single understanding of the OS, applications and the web if consistent methods are used.

Links are generally found in content-rich areas, when used in application or OS contexts. Links to additional information within explanatory text, or for cross-referencing within help systems, are common uses outside of the web. Most other text found within an application or OS will be labels for lists, Icons, Buttons, and so forth.

Links alone are rarely suitable for these situations, so there are numerous interactive methods in this chapter you can choose from for the specific needs.

Hover states must be indicated by a change in the link, usually a color change. The change is an important indicator that the correct item will be selected, as well as that it is indeed an active item. Visited items may also indicate this condition with a change in color, exemplified here with the word "Button."

Variations

There are no true variations of the link. Links may be found anywhere on the page, and are differentiated from non-linked content, with a change in color and underline (for text), or a colored border (for images).

Other text which must function as a link should be the label within a Vertical List, have an associated Indicator or be the label for an Icon or Button.

Interaction Details

Links can be selected by pressing the OK/Enter key while in focus (for scroll-and-select devices) or tapping directly on the link text for pen and touch devices.

Be sure to support focus states, or hover, by changing the link color, and possibly other text styles. These will, of course, only work for devices which support hover, or focus-without-selection. Pen and touch devices generally do not have this capability.

Additional information about a link should be presented immediately after the link text, and not as a part of the link. File types and size may simple be text as shown. Use an icon or the name of the provider (if short) for content that will load a new application or leave the site.

Presentation Details

Inline links should always be a different color from any styled text. Whenever possible, they should also be underlined, but be sure to follow the OS standards. Simply using color can be confused with style and not perceived as a link. If needed, dotted or dashed underlines, or slightly desaturated color can be used to reduce the visual prominence of the underline.

Some systems will use highlighting (a field of color behind the whole link text) instead of an underline. This is easily seen, and should be followed if the OS standard, but some users may not immediately understand the meaning.

Underlines should never obscure descenders. Underlines must break, or otherwise integrate cleanly and clearly. If not, pick another typeface.

For most inline-styled links, the color of the link should reflect the current condition:

In certain cases, the visited state is of no significance. If the information is entirely dynamic, or the entire experience is used so all links would be "visited" on a typical viewing, that state may be disregarded.

Links in lists use their position in a list, as a series of repeated items, to indicate they are selectable. To avoid excessive horizontal rules (the separators for the individual line items) you usually should not underline links in lists.

The title for each link should be unique, clearly communicate the information on the target, and be easily scannable.

Additional information, in text or as a graphic, should be included after the link to communicate when an atypical target is presented. When a link leaves a site, loads a new application, or will initiate a file download, indicate this. Since normal links do not have icons, any reasonable icon after a link will usually be interpreted correctly. Text following the link should display the file size of downloadable items, and the type of file, such as: (384 kb PDF).

Linked images should be bordered with the same colors as text links, when no other communication is available. When possible, add a description of what will happen to the image, or add a descriptive text link immediately adjacent to the image. Avoid use of simulated text or Buttons in the image; the lack of interactivity (such as hover or active states) may confuse users.

Do not use repeated or unnecessary prefixes, like "Click here" or "Download," as shown. Additional information, such as file types, should not be part of the link text. Compare the scanability and readability of this with the previous example.

Antipatterns

Do not use links to activate functions. Even within a web page, use buttons and other form elements for action behaviors.

Avoid using generalized terms like "Click here." They are not meaningful, and make the content hard to scan for the relevant information. Especially in lists, try to use unique but descriptive terms. Instead of "Click to view the manual," simply say "View the manual."

Do not use underlines for any other elements on the page, such as for emphasis. User-defined styles may still be allowed when editing text in word processing programs, of course.

The Link pattern defines behaviors for the linked text only. Do not change the background for an entire row or other container in which a link occurs or this will become another type of pattern.

Avoid changing the type style for link condition changes, such as hover. Switching to bold, except for a small number of typefaces, will make the text wider, causing strange jumps, confusing the user and perhaps causing the page to reflow. Other changes may be suitable and appropriate, such as switching from a dotted underline to a solid.


Next: Button


Discuss & Add

Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.

Examples

If you want to add examples (and we occasionally do also) add them here.

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.