First, what do I mean by navigation?  Navigation is the ability to move to what you want to see.  This involves the use of a menu internally, the use of the browser’s back and forward buttons, and the use of book marks, and the use of links.  Traditional navigation uses paradigm of going to locations which, on the web, are pages.  Sites enhanced with JavaScript: jQuery, ajax, etc. don’t always have “pages” in the traditional sense, but rather differing “states” on a single page.

This presents several challenges.  A visitor should be able to navigate to states (when those states emulate a traditional page) through bookmarks, the browser back and forward, etc.  The expectations of navigation already in place due to the pre-existing paradigm are as important –perhaps MORE important–to site/navigation usability as the jJavaScript enhancements are.

If you know me, you know that I’m not a huge fan of JavaScript.  I don’t think JavaScript should ever replace functionality, but merely enhance it.  As a result, I have only limited knowledge of JavaScript because I have only made limited use of JavaScript.  The jQuery library has really captured my imagination, especially with the jQuery UI family.  Seeing the functionality of the FogBugz website (particularly the “Learn More” section’s accordion menu) inspired me further.  This is everything that a JavaScript-enhanced site should be.  Without JavaScript, the site functions normally–the accordion is a flat hierarchal menu, the link hrefs point to a normal html page.  With JavaScript, the menu is an accordion and upon a click the content is loaded via an ajax call.  Bookmarking and browser back/forward navigation work.

Why this isn’t built into jQuery UI already I don’t know.  Expectation plays a huge role in the success or failure of a UI.  My prior lack of interest in JavaScript is a huge hindrance to me here–I can read through the FogBugz JavaScript and identify certain areas I’m sure are critical to the functionality, but I don’t really understand it enough to write my own code to fix the navigation problems in the the jQuery UI.

So I’m going to take the charge to learn and study this issue, documenting my findings about how to emulate traditional navigation on JavaScript enhanced sites.  That emulation should include graceful degradation,  bookmarking, linking, and back/forward (plus any other details that are slipping my mind).  In my opinion, unless all those bases are covered the interface is a failure.

What do I know so far?  First, there is a pre-existing practice for referring to a particular spot on a page.  That is the token (aka hash aka anchor aka fragment).  Give an element an id token of “spot” and then link to #spot and the hash will be appended to the address and browser will jump to that element .  Many JavaScript enhanced sites use this part of the URL to remember states and provide navigation.  There are probably other ways to provide a unique address, but I favor this one.

When you set a click event on an anchor or otherwise interrupt its normal function with JavaScript, often the hash won’t actually be appended.  You can set it and add it to the address by explicitly setting window.location.hash to whatever it needs to be.  That’s all well and good, but it doesn’t seem like that works the same way with browser back/forward buttons as “regular” hash.

I’ve done some preliminary reading and it seems IE back/forward doesn’t generally work well with a hash and there is some talk of hidden iframes to force browsers to register history more fully.  From there on I don’t know much of anything, so this should be an interesting investigation.