A346  Chapter 5 Notes - Navigation

Selections

On navigation, current page should be indicated but de-emphasized.

Depth Gauge

Gives direct links back to higher levels visited. Practical only for simple hierarchical sites. 

History

• Back - Can use history directly to implement a back button or link with HTML by:
  <a href= "" onClick= "history.back(); return false;" > Previous</a>  Previous
• Forward - Can use history directly to implement a forward button or link with HTML by:
  <a href= "" onClick= "history.forward(); return false;" > Next</a>   Next
• Generally avoid duplicating browser controls using back and forward.

Redirection

• Redirection automatically sends the user to a new page.

  <script>     location.replace("Syllabus.htm"); </script>

• Generally used to repair broken links caused by reorganization of moving pages or changing page file names.
• Where HREF requires user to click the link, redirection is automatic.
• The JavaScript above is the file contents that when opened automatically redirects browser to "Syllabus.htm".

Cookies

• Cookies are text information stored on the browser by a the server or JavaScript for temporarily or for a specified amount of time. Cookies are often used to personalize visits but not much used for location tracking. The following sets the temporary WHO cookie to Ray. 

<a href="" onClick='document.cookie = "WHO=Ray;"; return false;'> Set Cookie</a>

• To print all the cookies stored by your browser using the following:

  <a href="" onClick='document.write(document.cookie); return false;'> See Cookie</a> 

• The following retrieves the cookie, parse the WHO= and name, and prints a "Hello Ray"  message. 

<script language="JavaScript">
   var theCookie = unescape(document.cookie);   // Read cookie and find WHO
   var start = theCookie.indexOf("WHO=")+"WHO=".length;
   var end = theCookie.indexOf(";",start);
   document.write("Hello "+theCookie.substring(start,end));
</script> 

Landmarks 

• There are few landmarks on a Web site since remembering a landmark depends on user memory. Generally not effective to distinguish one page from another, be consistent.

Top Navigation

• Guaranteed to be exposed, end of page may not be visible.
• May be scrolled off top of screen.
• Can be fixed to top using frames , more later.
• Sometime used for task navigation, as in above example.
• Standard set by GUIs.

Bottom Navigation

• Alternative to top navigation.
• Useful when top navigation scrolls off screen.
• Use back to top link located in navigation bar at page bottom. A link to the top of this page is:

  <a href="wd5.htm">Top</a>

Left Navigation

• Always visible, right side may not be exposed on low-resolution screen.
• Uses up valuable screen real-estate. Some solutions:
  • Let user scroll but not desirable.
  • Open new window for wide content by: Syllabus
    <a href="" onClick="window.open('syllabus.htm', ''); return false;">Syllabus</a>
  • Hide the menu. See the example from page 139 of text.
  • See also below, click the image to visit the site. 

Right Navigation

• Creates problems with different resolution screens.
• Since printing starts at top left, may not be exposed on low-resolution screens without scrolling.

Center Navigation

• Useful for homepage or page that is nothing but navigation.

• As a rule, be consistent in:
  • Position - Use left, right, etc. navigation consistently.

    A346 HW1 HW2 HW3

    A346 HW1 HW2 HW3

    A346 HW1 HW3

  • Order - Don't rearrange. 
    • Graying the selection - Better to gray out than to delete a choice from a list which would cause rearrangement. Which of those at right is more clear that HW2 has been  reached and is no longer a selection? 
    • Trees - Trees can expand a complex topic without rearranging navigation. Click to see an example.
  • Contents - Keep page contents in generally the same area. Usually in the horizontal middle of screen.

Navigation by Screen Position

• Top for primary.

  A346 Homework Notes Homework  1 2 3 Homework 2 Purpose - Assignment - A346 Homework Notes Top

• Left for secondary.
• Bottom for backup.

• Does the screen at right violate TLB?

Navigation and Scrolling

• Try to minimize scrolling, takes too much work.
• Scrolling left and right is harder than up and down.
• Put important page elements where exposed first when page is loaded, top left.

Navigation and Mouse Travel

• Back button is most often used navigation element.
• Minimize distance to common navigation choices. Speaks to putting most main navigation near Back button.
• Keep navigation consistent from one page to the next to keep mouse in close proximity with navigation when moving from one page to the next.

• The purpose of frames is to visibly divide the screen into several parts. Click to see the effect of the following frameset definition file.
• Frames are generally difficult to develop consistency of navigation.

  <frameset rows="10%,*">       <frame src="Menu.htm"> </frame>       <frameset cols="25%,*">             <frame src="Syllabus.htm"> </frame>             <frame src="WD5.htm" > </frame>       </frameset> </frameset>

• Frames can create problems for search engines. For those that do not understand frames, only the frameset file is searched.
• Frames consist of three parts:
  1. A hidden frameset page that specifies the page framing parameters and pages that go into the frame.
  2. A second page that often holds visible content. 
  3. A third page that is often for navigation. 

Reasons to Use Frames

• Create independent windows on one screen.
• Provide fixed reference point for navigation that is independent of the content scrolling.

Reasons not to Use Frames

• With multiple pages:
  • Confusion on back button.
  • Confusion on printing. The following will print the current page but which is the page in a frame?

    <a href="javascript:window.print();">Print the page. </a>

  • Book-marking.
  • Ugly when scroll-bars needed.
  • Nested frames when a framed page links to another framed page.
  • Not supported by all browsers.

Frame Busting

• Your pages will be in a frame when visitors arrive at your site from a frame. 
• Can bust out by defining page links by making each TARGET="_top". "_top" is literally the top level frame (i.e. no frame):

<a href="Syllabus.htm" TARGET="_top">Syllabus</a>

• Recall that new windows are easily created by:

• <a href="" onClick="window.open('syllabus.htm', ''); return false;">Syllabus</a>

Reasons to Use Windows

• Navigation branch that does not return to current page.
• Tear off menu for navigation.

Reasons Not to Use Windows

• Adds to clutter on screen.
• Intrusive, may cover content.
• Window may get lost among other windows.
• User may close, problem if window holds navigation.