|
Size: 3070
Comment:
|
Size: 2573
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| 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. |
|
| Line 8: | Line 2: |
| A function must be provided to | A function must be provided to allow access to related content from arbitrary locations within a page. |
| Line 23: | Line 17: |
| Inline ... underlined (text) or bordered (images), etc. | Two types of links may be encountered: |
| Line 25: | Line 19: |
| 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???? | '''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???? |
| Line 33: | Line 29: |
| 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. | 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. LINK COLORS???? |
| Line 38: | Line 36: |
Or... should most of those display states be here instead? Or both? |
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????
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.
LINK COLORS????
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.