Hey Justin

We recently did a project where we experimented with a number of
navigational utilities I'm pretty happy with the end result.

The site is visible at www.iih.org. There are four main navigational widgets
through out the site; the top nav with 1 level of drop down, the
breadcrumbs, the "also in this section" nav and the site map.

The top nav: 
=-=-=-=-=-=-=-
This nav provides users with quick access to the top level sections and
provides users with javascript and mouse input to browse one level deeper.
If javascript & css are not present these second level items appear at the
bottom of the page.

I have three main problems with these drop downs:
1/ Unlike menu systems in the OS, these can not be navigated via a keyboard.
2/ Relying on mouseOver for multi level menus makes them hard to use. If
your mouse slips off you have to start from the beginning. I really think
this is an underrated point - users have difficulty holding their hand still
and concentrating on learning a menu system at the time!
3/ Obvious usability issue for those without javascript.

The breadcrumbs
=-=-=-=-=-=-=-=-=-
These a fairly simple, they give the user a sense of where they are within
the site & allow them to easily move back up higher in the site structure.

The "also in this section nav"
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
(This nav is not on the homepage, but is available on almost every other
page on the right hand side)

This nav is contextual in that it shows you everything from your current
location down. It again uses javascript to create a folder structure style
hierarchy. Initially the current level is displayed, but by clicking on the
folder icons you can expand it to show sub sections. 

This nav addresses all three issues with the normal drop down model;
1/ You can use a keyboard to move through it
2/ Its onClick based so mousing our accidentally doesn't take you back to
the start
3/ In the absence of js you get the fully expanded navigation

There are a couple of little css bugs in this nav, but they are just
cosmetic. The other beautiful thing about this nav is that it requires no
inline javascript, its just a bunch of nested <a>, <ul> and <li> tags. 

The site map
=-=-=-=-=-=-=-
The site map is available from the footer on *every* page. Any user should
be able to navigate the entire site even if they have no javascript without
having to resort to the site map. Its just there as a safety blanket :)

Credit where its due - most of the navigation concepts on the site came from
the fantastic CUE resources (http://www.qld.gov.au/web/cue/overview/) - the
best thing to come out of Queensland since Sir Joh.


> I'm confident I can provide simple, smart navigation without 
> them, but first I need to find some solid proof that they're 
> a bad idea :)

My main complaint with drop downs are outlined above. I'm not going to say -
don't use them they are evil, but in light of the alternatives I just think
they are the weaker option.



Cheers

Mark


------------------
Mark Stanton 
Technical Director 
Gruden Pty Ltd 
Tel: 9956 6388
Mob: 0410 458 201 
Fax: 9956 8433 
http://www.gruden.com  

*****************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
***************************************************** 

Reply via email to