Differences between revisions 14 and 15
Revision 14 as of 2010-12-22 00:40:14
Size: 4906
Editor: shoobe01
Comment:
Revision 15 as of 2010-12-22 01:26:29
Size: 4971
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
Link-Basic.png
Link-states.png
Link-Info.png
Link-anti.png

Link-Basic.png Link-states.png Link-Info.png Link-anti.png

Problem

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

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.

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.

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.

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)