Design Specifications and Guidelines - Visual Design

Link Appearance

A link's appearance depends on its type. A shortcut link to another file is represented by a small arrow image that is automatically overlaid on the icon of the original file. Therefore, design your file icons with this overlay in mind.

A hyperlink may appear as text, graphics, or both. A hyperlink differs from a Windows shortcut link in that a shortcut appears as an icon and represents a link to an object. Its location does not typically depend on its context; that is, a shortcut is generally not used to represent a readable form of content.

On the other hand, hyperlinks are references to other locations and appear to blend in with the context in which they appear. Deleting a hyperlink would typically disrupt the context in which it appears. A hyperlink also typically presents information itself, but a shortcut displays only the iconic representation of the object to which it provides access. Also, shortcuts always have names, but a hyperlink may or may not have a name.

Text hyperlinks are typically underlined and in color. Use the system link colors to indicate new and previously visited links. Avoid making the text bold because this can interfere with readability.

Use descriptive definitions to define text hyperlinks. Avoid using the words "Click here" to identify a link.

Correct	Incorrect
For more information about choosing the right product for your needs, see Selecting a Product.	For more information about choosing the right product, click here.

Also, avoid unnecessary navigation information in your reference.

Correct	Incorrect
The tutorial provides more information.	You can read more about this in the tutorial, which is linked to the home page.

Make graphic hyperlinks visually distinct. Users often have difficulty differentiating graphic links from content. Always display the hand pointer when the user moves the pointer over the graphic link, just as you do for text hyperlinks. You may also want to include a redundant text hyperlink for any graphic hyperlinks you include.

More Information

For more information about hyperlinks, see Chapter 6, "General Interaction Techniques," and Chapter 10, "Window Management."

If you support links outside the local context of your document or application, provide a visual cue to users. For example, use a unique graphic and place it in a consistent location, or incorporate it into a text link.

A data link is visually indistinguishable unless the user explicitly clicks it or selects a specific command to display the links. For more information about displaying data links, see Chapter 12, "Working with OLE Embedded and Linked Objects."

Fundamentals of Designing User Interaction

Windows Interface Components

Design Specifications and Guidelines

Appendixes and References