Page Navigation

I can recognize good design in navigation elements.

I can choose a navigation scheme for my own web site.

Navigation is only one segment of a Web site's information architecture, but it is the most visible segment to the end user.

When you develop a navigation strategy for your web site, you should consider some common design elements. Most of these have become patterns of one kind or another: Web designers saw other sites, use them and then copied the basic idea to their own sites. To provide some insight into navigation best practices, we're going to view web sites and study navigation bars. View the following example sites.

  • Image based navigation bars (such as Cheer America)
  • Text Based navigation bars (such as Texans FC)
  • Drop-down hover navigation (such as Amazon.com)
  • Combination of images and text navigation bars (such as Blockbuster)

Navigation bars

Navigation is the way for your web site visitors to move between pages. The most important part about navigation is that it should almost never take more than two clicks to move from one page on your web site to another.

Vertical Navigation Bars

Pros:

  • Because monitors are wider than they are tall, a vertical bar takes up a smaller percentage of the screen than a horizontal bar.
  • These bars force the body of the document to be narrower, with fewer characters per line, making the document easier to read.
Cons:
  • The bar goes down the entire side of the page, so the user keeps seeing it when he scrolls down.
  • It can get in the way of the text and make it harder to read.

Horizontal Navigation Bars

Pros:

  • Horizontal bars are out of the way of the actual document, so the visitor can scroll past the bar and read the page.
  • They can be easier to read because they’re written horizontal, as the eyes of most people in the Western world are accustomed to reading.
Cons:
  • If the bar gets too large, the visitor may have to scroll down to read the document, which can be very annoying.
  • Unlike with vertical bars the visitor may have to scroll up to the top of the page to move to another section of the site.

Complex Navigation bar
Fireworks, JavaScript or Flash can be used to create complex navigation bar. These typically drop down or roll out, then disappear.

Assignment

  1. In a word document find two examples each of:
    • a text based navigation bar
    • an image based navigation bar
    • a drop down navigation bar.
    • a horizontal bar (can be text or image or drop down)
    • a vertical bar (can be text or image or drop down)
  2. Identify which site you chose, whether it is text based, image based, etc.
  3. Include a picture of the page. (To place a picture of the web page simply press the "print screen" button on your key board.)
  4. Then on the page that you want it to appear on press "Ctrl - V" or right click and choose "paste".
  5. Now resize your image so that it fits. Hold down "shift" as you resize it to keep the proportions the same.
  6. Identify the URL where you found the navigation.
  7. Include a reflection: tell what you like about the navigation bar. (minimum of one paragraph please.)

Resources:

* Use the Cool Home Pages Site to find your pages. Not all of the links work just keep trying new ones. There are hundreds of sites. Pick a site that displays the colors or principals you are looking for. You cannot use a site more than once. You should find different sites than others in the classroom.