Differences between revisions 22 and 23
Revision 22 as of 2010-12-22 01:37:09
Size: 6048
Editor: shoobe01
Comment:
Revision 23 as of 2010-12-22 01:38:53
Size: 6044
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 54: Line 54:
Avoid using generalized terms like "Click here." When needed, use this as explanatory text and make the link a more descriptive term, e.g. "Click to '''view the manual.'''" Avoid using generalized terms like "Click here." When needed, use this as explanatory text and make the link a more descriptive term, e.g. "Click to 'view the manual.'"

Problem

A function must be provided to allow access to related content from arbitrary locations within a page.

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

Solution

Links are content-only items which provide access to additional information, generally by:

  • Loading a new page of content.
  • Jumping to the portion of the current page which carries the additional content.
  • Loading a Pop-Up dialogue with the relevant content.

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; users can have a single understanding of the OS, applications and 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 and so forth. Links are rarely suitable for these situations.

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.

Focus states, or hover, will be supported 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 currently.

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. 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.

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

  • Non-visited
  • Visited
  • Hover (when available)
  • Active (pointer down)

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) they may not be underlined.

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. Any reasonable icon after a link will usually be interpreted correctly. Text should have the file size when downloadable, 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." When needed, use this as explanatory text and make the link a more descriptive term, e.g. "Click to 'view the manual.'"

Do not use underlines for any other elements on the page. User-defined styles may still be allowed when editing text.

The Link pattern defines content behaviors 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.

Examples

Link (last edited 2011-07-31 20:55:44 by shoobe01)