Navigation Usability

Portfolio Checklist | Portfolio Rubric

One of the considerations in Web site usability is that users can easily find what they want on your site. Below are some guidelines for increasing usability.

Navigation

Follow these design tips to help students move between pages of your website.
Note: The home page is the introductory page of your site. It should also function as a hub, linking users to other content areas within your site.

1. Include your name in the header of every page.
2. Always include a way to return to the portfolio home page on each page of your portfolio. This link should be in the same location on each page.
3. Include a link to your portfolio from your personal home page.
4. Include a navigation menu on your home page that guides users to other content areas of your site.
5. Use more pages with shorter content rather than one page with a lot of text. Users may not scroll down the entire page.
6. Make sure links are underlined and in a different color from the rest of your text.

Page Design

1. Use the same design elements for all portfolio pages. Switching between very different styles and colors can be disorienting.
2. Check color contrast of your pages.
3. Format pages so that there are margins (i.e. white space) on each side of the page.

Link Formatting

Working on writing the correct link text may seem trivial, but viewers rely on links to navigate and understand your Web site, and, most importantly, to find the content on your site.

Navigation Versus Content Links

Most Web sites actually have two kinds of links: navigation links and specific links within a content page. Navigation links help viewers find all the pages on your site and are generally placed to the sides, top, or bottom. Content links are placed in the middle of other text on a page.

Tips for Content Links

1. Avoid links that say “Here” or “Click Here”. These destinations are vague (particularly since most readers scan the Web) and often hard to spot because they are small.
2. Indicate a specific destination or document. For instance, it’s preferable to write “See my Teaching Philosophy page” and hyperlink the title of the page, “Teaching Philosophy”, in your sentence.
3. Use a different color for links. Most Web sites use a different color for links, so visitors look for a color change to indicate a link. (Blue is the standard color for links in text.)

Tips for Navigation Links

The good news about navigation links is that you can exercise some formatting creativity, but remember to:

1. Include a core set of navigation links on each page.
2. Format the navigation links differently from the content links.

File Uploads

1. Add an ALT text description for uploaded image files. This is for those unable to see the image.
2. Warn users if a link is going to a multimedia file, PowerPoint file, PDF file, Word file, or anything other than a simple Web page. For instance, you can label a link as a “PDF” link if it goes to a PDF file.
3. If you upload a PowerPoint or audio file, describe the contents before you ask users to download it. A screen capture of a PowerPoint page is especially helpful.
4. Consider converting Word files to PDF files if you are using complex fonts or formatting. Not all users may have the same fonts, and downloads of Word files vary from browser to browser.
   Note: PDF conversion utilities, including Adobe Acrobat, are available in all CLC lab machines. Often they are found as one of the available “printers.”