Really Usable Navigation

By Deane Barker on June 23, 2007

In the comments to this post, someone mentioned Seattle University, so I went to check out their site. On the home page, I found what I think is a fantastic navigation scheme (pictured).

Right now, I’m reading the latest edition of Rosenfeld and Morville’s legendary Information Architecture for the World Wide Web and there’s a entire chapter on “labeling,” which is trickier than you think.

Essentially, you have to figure out what everyone is going to think is behind the link labels you put in your navigation. Since navigation has to be compact and brief by nature, it can be tough. For in instance, I would personally think “libraries” would be under “Campus and Community,” but looking under this navigation, it’s easy to pick up that it’s under “Learning and Teaching.”

What Seattle University has done here is let users peek inside a section, by having sublinks to the most important information in those sections. And in all of this, they’ve kept it nice and compact — looking at the section heading, you can’t help but read the sublinks, which gives you some great insight into what’s in the section.

It looks good, and it works. And I’m going to blatantly steal it someday.

Gadgetopia
What This Links To

Comments

  1. I agree, it’s a tidy, compact navigation. Very nice! Structurally, it’s basically the same as any traditional navigation/subnavigation: A list of main items, each with a nested list of subnav items:

    For what it’s worth, I thought I’d share a little CSS to generate this display format from a set of unordered lists (alas, the commas between subnav items will show up only in browsers supporting CSS3 selectors and the content property):

    /* main navigation ------------- */
    #mainNav {
        width:15em;
        padding: 1em;
        margin: 0;
        background-color: #333;
    }
    #mainNav li {
        border-bottom: dotted 1px #fff;
        padding: .4em 0em;
        margin: 0;
        list-style:none;
    }
    #mainNav a,
    #mainNav a:visited {
        color: #fff;
        text-decoration: none;
    }
    #mainNav a:hover {
        text-decoration: underline;
    }
    
    /* subnavigation --------------- */
    #mainNav ul {
        padding: 0;
        margin: 0;
    }
    #mainNav li li {
        font-size:80%;
        border: none;
        display:inline;
        margin-right: .5em;
        padding: 0;
        color: #999;
    }
    #mainNav li li:after {
        content: ',';
    }
    #mainNav li ul > li:last-child:after {
        content: '';
    }
    #mainNav li li a,
    #mainNav li li a:visited {
        color: #999;
    }
    

Comments are closed. If you have something you really want to say, email editors@gadgetopia.com and we‘ll get it added for you.