N341  Chapter 6 Notes - Navigation

 Modified: 

Table
of
Contents


Basic
Web
Linking
Model

Structured versus Unstructured
  • Menus, lists, tables, etc. of links are organized into a structure. Advantage is organization promotes a regular appearance and chunking, generally easier to locate desired link. Useful for selections such as navigation.
  • Links in text content are generally unstructured. Advantage is that appears in context of content, providing additional content as needed, such as the definition of a term or background material.
 

Static versus Dynamic
  • Static links are most common where the link destination are hand entered as part of the HTML.
  • Dynamic links are most often generated by a server program from a database. An example would be Amazon.com which generates most, if not all, pages by the Web server merging HTML template with database entries on books, etc. to produce a final page. Advantage to Amazon is possible to write one set of HTML and generate a unique page for every entry in the database.

 

Taxonomy of Link Forms 

 

We are already familiar with text and graphic links from discussion of HTML..

Creating Stylized Links Using FrontPage

 

 

Create a graphic navigation menu such as:

  • Open FrontPage to a new page.
  • Select Word Art.
  • Pick a style and enter words that would describe links to three of your Web pages.
  • Press Alt Prnt Scrn keys to copy screen to the clipboard.
  • Open: Start | Programs | Accessories | Paint.
  • Copy the words in Paint and Paste back into FrontPage as an image.
  • Select View | Toolbars | Pictures.
  • Create hotspots over the words to link to your Web pages.
  • Save to W:\ drive and preview.
 

Create Buttons such as:

  • In FrontPage select AutoShapes and pick a shape for a button.
  • Select the shape on the screen, right click, select Edit Text (or Add Text).
  • Label the shape with text appropriate for a link to one of your Web pages.
  • Click on the shape and add a hyperlink to one of your Web pages.
  • Save to W:\ and preview.

Link Implementation  Issues: Usability, Feedback, Support 
  • The standard convention for text links is blue and underlined. 
  • HTML change link colors using the <BODY> tag.
  • CSS uses the <A> anchor class rules.

Link Colors
Link Type  

Unvisited
Visited
Active
Hover		 Standard Color  

Blue
Purple
Red

 HTML Tag  


<Body Link="colorvalue">
<Body VLink="colorvalue">  
<Body ALink="color">

 CSS Pseudo Class Rule


A:link{color:colorvalue}
A:visited{color:colorvalue}
A:active{color:colorvalue}
A:hover{color:colorvalue}
 
<style> A:hover {background-color: yellow;}  </style>
<body text="#000000" bgcolor="#FFFFFF" link="#0000FF"
          vlink="#551A8B" alink="#FF0000">
 

Rollovers
  • Rollovers for text links change color when the mouse passes over the link. That is done above and appears as this.
  • Rollovers for graphic links require at least two images, one that normally appears, one when the mouse is over the link. The example has a third for when the link is pressed, providing user feedback.

    Here is an example:

    •   
    <a href="Syllabus.htm" Title="Check out the N341 Syllabus"
       onMouseOver="document.Face.src='wd6_6.gif ' "
       onMouseOut="document.Face.src='wd6_5.gif ' "
       onMouseDown="document.Face.src='wd6_7.gif ' ">
       <img name=Face border="0" src="wd6_5.gif ' ">
    </a>
 

User Expectations
  • Use link information that matches the user expectation of following the link. N341 Syllabus
  • Add title information for additional information of a link.
  • Indicate size of potentially long downloads. Library of Congress (2,304, 237 GB)
  • Indicate the date on links that may grow stale. Grades (Spring 1907)
 

Rollover Messages 

Does the N341 class make you happy! Find out by working all the homeworks and project. You can look at the Syllabus by clicking on the button.
<head>
    <style>
        #about { position: relative; 
                      top: 10px; 
                      left: 5%; 
                      background-color: orange; 
                      visibility: hidden
                     }
    </style>
</head>

<body>
   <a href="Syllabus.htm"  
                onMouseOver="document.all.about.style.visibility='visible'"
                onMouseOut="document.all.about.style.visibility='hidden'">
   <img name=Face border="0" src="wd6_5.gif">
  </a>

<div id="about">
Does the N341 class make you happy! Find out by working all the homeworks and project. You can look at the Syllabus by clicking on the button.
</div>
</body>
 

Broken Links
  • Broken links are a disaster. 
  • Reasons
    • Typos on the links.
    • Moving files to another location.
    • Deleting files.
  • Solutions
    • Use software to track down broken links referenced by pages on your site.
    • Maintain redirects from old location to new location for links to pages on your site. The script below redirects the browser to Syllabus.htm automatically.
      <script>
          location.replace("Syllabus.htm"); </script>
    • Check server log files for 404 errors. These are pages that were requested but not found, indicating broken links that need corrections or redirects.

 

Exercise 0

Server logs
  • In Windows Explorer, locate the IIS server logs in:
  • Find the most recent log file.
  • Enter a URL in the browser that is known to exist on the localhost.
  • Enter a URL in the browser that is known NOT to exist localhost.
  • Open the log file and locate the entries. What differentiates the two server requests?

Exercise 1

Server messages and redirects

Whether a server responds to errors with a standard message or redirects to a different page (e.g. home or error page) can be easily controlled by the following:

  • Start | Run | Control | Administration Tools | Internet Information Services | Default Web Site | Project virtual directory | Properties | Custom Errors | 404 (file not found error) | Edit Properties | File | C:\Project\Welcome.xml | Apply | etc.
  • Enter a URL in the browser that is known to exist on the localhost/Project.
  • Enter a URL in the browser that is known NOT to exist on the localhost/Project.

Exercise 2

Create a page with two text links. Define different rollover messages for each. 

  • Copy and paste the above Rollover Messages example into Notepad, then into FrontPage as HTML.
  • Change the image link to some text.
  • Make up a different rollover message for another text link.
  • Preview.

 

Navigation
Systems

 

  1. The navigation system should be faithful to the content's organizational structure. Linear, hierarchy, grid, etc.
  2. Choose visual navigation elements that build context for a user. Be consistent.
  3. Take advantage of built-in services of Web browsers familiar to users. Link colors, Back and Forward button, etc.

Common Navigation
Aids

Homepage
Site wide return user to home. 

Site Navigation
Main categories of site.

Search
Secondary navigation when user cannot find destination or ignores navigation, common.

Where?
Where are you now.

Blue links
Standard link color.

Repeated Navigation
When page scrolls down.

 

Page and Site Labels   

 

Use consistent and explicit page labels for all pages in a site.

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. 

 

The Depth Gauge seen by someone at Homework 3 would be:

N341 >> Chapter 3 >> Homework 3

 

Exercise 3

Navigational Aids
  1. Visit http://www.ius.edu and locate all navigational aids on the page.
  2. Visit the Admissions and Financial Aid links.
    • What navigation rules are followed?
    • What navigation rules are violated?
  3. Visit http://www.ford.com and locate all navigational aids on the page.
  4. Visit the Vehicle >> Racing and Vehicle >> Auto Shows links.
    • What navigation rules are followed?
    • What navigation rules are violated?

 

Page and Site Style
and
Location   

  • Color-coding pages to imply location depends upon user memory (not good) and must be significantly different (leading to rainbow site). Best to avoid and use consistent color scheme.
  • Be careful of theme-based location for a metaphor site, use clear terms such a Technical Support rather than Garage.

 

Where Have I Been?  
Bread-crumbing leaves the visitor know where they have been, using a different color for visited links is main means. Browser maintains a cache of pages visited to color visited links on a page differently from unvisited, and to move forward or backward.

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.

 

Exercise 4

Where Have I Been?
  • Enter the cookie name and value and click to set and print the cookie.

    • Name                       Value
     

  • This method creates a temporary cookie that can be used for maintaining a trail of pages visited. Closing the browser loses the cookie. Expiration dates can be set to prevent cookie lose. 

 

Where Can I Go?  
  • Make navigation obvious.
  • Pull down tabs and other expanding navigation devices save space. Problem is the choices remain hidden until expanded, forcing the user to search for choices they can't see directly. Most users won't bother or know to use the pull-down.
  • The following implements a somewhat cheezy pull-down navigation menu that links to other pages, it ignores Homework selection because there is no value. Try it.
<form name=HWform ACTION="" method=GET>
     <SELECT name=HWselect   

                       onClick="document.HWform.action=document.HWform.HWselect.value;
                                     doc = document.HWform.HWselect.value;
                                     if(doc != '') document.HWform.submit(); 
                                     return false;" 
                >
                <option value="HW1.htm">HW1 
                <option value="HW2.htm">HW2 
                <option value="HW3.htm">HW3 
                <option selected>Homework</option> 
     </SELECT> 
</form>

 

Exercise 5

Where Can I Go?
  • Modify the pull down menu to navigate to at least four pages, include http://www.ius.edu as one.

 

Placing Navigation

TLB  
Navigation - Generally placed on page using frames or tables.  

The simplified page at right captures many of the recommendations espoused by the text. Task navigation at top, site navigation is at left, and end of the page navigation at the bottom.

N341

Homework
Notes

Homework 

1

2

3

Homework 2

  • Purpose -
  • Assignment -
N341 Homework Notes Top

 

 

Top Navigation
  • Guaranteed to be exposed initially, 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 can simply reload the page:

    <a href="wd6.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 left and right 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 (example).
    • 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.

 

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

      N341
      HW1
      HW2
      HW3

      N341
      HW1
      HW2
      HW3

      N341
      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

 Though not sacred, the TLB is very common.

 

  • 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 the most often used navigation element.
  • Minimize distance to common navigation choices. Speaks to putting most main navigation near Back button, upper-left.
  • 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.

 

Exercise 5

Placing Navigation

The exercise is to create two HTML pages to practice navigation techniques.

  • PageA.htm
    • Create a single page in FrontPage with TLB navigation. 
    • Use tables to organize the navigation. Use Merge Cells within the tables for grouping cells to get the layout needed. Arrange the page following the principles just covered.
    • Create a small amount of page content. 
    • Create appropriate links to your own or other's pages in the three navigation areas. 
    • One link should be to PageB.htm
    • Save as PageA.htm on W:\ directory.
  • PageB.htm
    • Copy and paste PageA.htm to PageB.htm.
    • Change the content of the page in some obvious way.
    • Change the PageB.htm to link to PageA.htm.
    • Save on the W:\ directory.
  • Test by opening PageA.htm in a browser and following links to verify ease of navigation positioning.

 

Frames 
  • 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="WD6.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 current 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>

 

Windows 
  • 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.

 

Exercise 7

Frames and Windows

The exercise modifies the earlier exercise to create four pages: an HTML frameset page, two navigation pages, and one content page.

  • Navigation pages.
    1. Create three new pages in FrontPage.
    2. From the table navigation page of the previous exercise, copy the Top and Left navigation links as HTML and save into files named Top.htm and Left.htm respectively as HTML.
    3. Copy or create new content and save as Content.htm.
    4. Save the files to the W:\ directory.
  • FrameSet.htm
    • Create a single new page in FrontPage.
    • Copy the frameset above.
    • Paste into FrontPage.
    • Change the frameset links to Top.htm, Left.htm, and Content.htm.
    • Save as FrameSet.htm to W:\ drive.
  • Test by opening FrameSet.htm.