apollo13 art logo

 

      Contact | Links

 
Home GalleryResearchDevelopmentTeachingAbout Us

 

MM 340:
Principles of Web Design

Lecture/Navigation

Home

Some Examples

IA vs. Navigation

Big Questions

Org Schemes

Alphabetical

Chronological

Geographical

Topic/Subject

Task Based

Audience Based

Metaphor Based

Techniques

   -MoreTechniques

 

 

 

 Interactive Navigation

Cascades.  In general there is never enough space on a page to show all the navigation that uses want.  It is certainly possible to have too much navigation, but as users return to a site they value the ability to reach  right in to the page they want, without having to go through many intermediate levels. Classic examples by now are MSNBC viewed through an activeX applet on IE 4 and above browsers.  Here there are cascading slideouts which at times take one  as deep as 4 or even 5 levels into the site.  Here is a cross browser example.  The code is here as well.

Directory style.  Another standard method of displaying multiple levels of structure is by duplicating the look and feel of the standard directory.   This can be done using javascript, dhtml, java or by downloading activeX applets.  Here is a freeware directory that uses frames.

Information visualization techniques.  A new breed of interactive navoigators relies on more dynamic displays to help the user know where they are in a conceptual space rather than a strictly hierarchical space.  Although this may be a fruitful line to pursue these methods, so far, do not seem to scale up without disorienting the user.  Here is a nice example from Plumb design using Think Map.  Don't forget to click to launch the applet. 

Linked dropdowns.   A simple and effective way of dealing with multiple levels is to us drop downs that are linked so that the choice of a topic in the first drop down determines the options in the second, and so on.  Here is an example of linked dropdowns that go 2 deep.  More than 3 deep becomes unweildy.  What are the strengths and weaknesses of this approach?

Project Seven Extensions for Dreamweaver

back to Techniques