Differences between revisions 5 and 6
Revision 5 as of 2010-12-20 19:07:24
Size: 2059
Editor: shoobe01
Comment:
Revision 6 as of 2010-12-21 03:37:34
Size: 3070
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 8: Line 8:
A function must be provided to
Line 32: Line 33:
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.

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).
Line 38: Line 45:
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.

Suggest underlines for web. Indicators for off-site? Avoid words that are just links, app or otherwise, without some indication they are functional. Also notes about files when not something viewable directly and size (e.g. 235 kb PDF)

This is all good for web, but what about apps. How DO you tell if something is clickable? I see failures all the time in desktop apps even. So what indicates unless icons or buttons (or underlines) are used?

Check Mac (old is fine) and Windows guidelines to see what they call the types of clicky things, if they aren't buttons, etc.

Problem

A function must be provided to

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

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

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.

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

Or... should most of those display states be here instead? Or both?

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)