The following guidelines will help you develop effective links.
The Navigation section also provides helpful tips for linking documents in a more usable manner.
Required: On all Official Web pages, two links must be provided that assist Cal Poly Web users with navigating our Web sites. These two are a link to the Cal Poly Home page (http://www.calpoly.edu/) and a link to the Cal Poly Find It page (http://www.calpoly.edu/findit.html). See the University Identity and Communication Elements Required for Official Cal Poly Web pages for more information.
Place Important Links at the Top of the Page
Users typically first see the top section of any web page on their display screen. Place the most important information and links on the top of the page to ensure that users see this content.
Do not Create Links to Non-existent or Unfinished Pages
If you have works in progress, wait to activate those links until your documents are ready and available.
Use Blue (if practical) For Underlined Link Text
Studies have shown that users expect text links to be underlined. Using blue underlined link text (the default color) is most recognized and should be used to designate linked text where possible. If you choose to use other link colors, make sure the chosen color is noticeable and used consistently throughout your Web site.
Identify Links the User Has Visited With A Different Color
Designating an alternate color for visited links, such as red or purple, helps decrease the time users spend searching for information and shows users the options that are still available.
Use Short and Descriptive Link Titles
Short descriptive link titles clearly communicate the purpose of the link and allow users to quickly discriminate between similar links on the page. Make link text descriptive enough so that they make sense when read out of context, since people who use screen readers to access the information on a Web page will often use the tab key to step through the links on a page. This helps users quickly find the content they are looking for on a particular page. (See the Navigation section for more information on effectively naming links)
Indicate the Location Of Linked Content
Users typically assume that links will take them to a location within the same Web site. Therefore, you should give users a clue as to whether a link will take them to somewhere within the same page, or to a different site altogether. Rules of thumb when indicating link destinations are:
- If the link is to another document within the same website, identification commonly isn't necessary beyond the link text itself.
- If the link is to the same page, use terms along with the link text such as "see below", "see above", "in this document", etc.
- If the link is to another website altogether, use language to indicate to the user that the link is an outside reference such as: "the following links are not contained on this website", "some links point to external resources", or even presenting the actual URL of the page.
Indicate Non-HTML Type Documents
Users assume a link will take them to an HTML page. Give users a clue if the link they may click on points to, for example, a PDF, MS Word, or Excel document:
- A link to a Microsoft Excel document might look like these:
- See the butterfly distribution table (.xls) for more detail
- See the butterfly distribution spreadsheet: butterfly.xls
- A link to an Acrobat PDF document might look like this:
- Policy on Water Balloons at foosball games (PDF) - blah blah blah, etc.
- A link to an MS Word document might look like this:
- Guidelines for laying on the lawn between classes (MS Word)
- Guidelines for laying on the lawn between classes (.doc)
You get the idea, just give your users a hint or clue of what they are clicking on.
If you're using a graphical navigation scheme, make sure text used for button and menu graphics is easy to decipher. When using graphical links, follow these guidelines to improve usability:
- If wording is used on a graphic link, use text that clearly identifies the purpose of the link.
- Ensure that there is a clear distinction between graphical elements used for navigation versus graphical elements not used for navigation.
- Use properly formatted ALT text for all graphics to assist users of screen reader web browsers to better understand and navigate your website. See more information on using ALT text in the Web Accessibility section.
- Make sure that important information can also be accessed using text links within the Web page as well as graphical links.
- If you are using an imagemap, provide an equivalent text link such as a text menu of selectable items on the imagemap. This makes web tools (such as screen readers) used by the physically disabled more effective.
- Finally, all graphical elements should be optimized for the Web (minimized file size) in order to decrease download times. (see the Technical Issues / Graphics section for more information)