Differences between revisions 9 and 10
Revision 9 as of 2010-12-21 04:33:08
Size: 2715
Editor: shoobe01
Comment:
Revision 10 as of 2010-12-21 04:39:21
Size: 3044
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 21: Line 21:
'''List''' ... often with a marker, but typically not a unique one, so the text is the identifier, and therefore it must follow link standards; often not underlined as this would be cumbersome... HOW TO UNIVERSALLY DENOTE IT'S A LINK???? '''List''' ... often with a marker, but typically not a unique one, so the text is the identifier, and therefore it must follow link standards; often not underlined as this would be cumbersome... HOW TO UNIVERSALLY DENOTE IT'S A LINK???? ... Note that in many '''[[Vertical Lists]]]''' implementations, the entire line item may be selected. When more than one item may be selected, the link ... thing... whatever...

Lists may be styled as inline links, with underlines, but often are not to avoid clutter, due to the dividing rules between individual line items.

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.

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. Most other text found within

Variations

Two types of links may be encountered:

Inline links are ... underlined (text) or bordered (images), etc.

List ... often with a marker, but typically not a unique one, so the text is the identifier, and therefore it must follow link standards; often not underlined as this would be cumbersome... HOW TO UNIVERSALLY DENOTE IT'S A LINK???? ... Note that in many Vertical Lists] implementations, the entire line item may be selected. When more than one item may be selected, the link ... thing... whatever...

Lists may be styled as inline links, with underlines, but often are not to avoid clutter, due to the dividing rules between individual line items.

Interaction Details

Click states... hover (except for hoverless systems like touch), down, loading, visited, etc.

Presentation Details

Inline links should always be a different color from any styled text, and be underlined. While other styles may work, they will need to be learned. For any inline-styled links, the color should reflect the current condition:

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

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

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.

Examples

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