Active Nav States: Which page am I on?

I just encountered the Dell Lounge website for the first time.  I was in search of a giveaway for ACL tickets that I’d heard about.  I didn’t find the giveaway (I’ll admit: I didn’t look very hard) but I did find one of my pet peeves!

This is a basic concept, y’all.  A professionally-designed site such as Dell Lounge shouldn’t have missed this.

The global nav on the Dell Lounge breaks a basic rule of web design.

Looking at the screenshot above, can you tell which part of the site I’m currently on?

If you answered No, that’d be ok.  They would have ommitted an active state which is a questionable choice, but its excusable – especially on a blog, which usually has a single header stored in an PHP Include.

But if you answered Dell U, guess what?  You’re wrong.

In the screenshot above, I was on the main “Music” page; I’d clicked on the first nav item.

Information Design lessons of the day:

1. Use an active state to help users know where they are as they navigate your site.
2. If you’re asked to visually differentiate any part of your navigation, carefully consider whether you ACTUALLY need to do so. If the sections or functions are not parellel  - one group is one type of thing while another does something else – it may be reasonable.   Otherwise, question the reasoning behind it — and be prepared to tell your clients that differentiating for EMPHASIS doesn’t fly.  Find another way to call out content.
3. If you’re making visual differentiations on your navigation bar, ALWAYS be sure that you’re separating a GROUP of items. NEVER, EVER, EVER differentiate a single item because it is easily mistaken for an active nav state.
4. And, finally, make your blog looks like a blog, and your tags looks look like tags so your users aren’t confused when they click a nav item and hit a  results pages.

See also

1. What do steaks, Facebook Connect, and Arianna Huffington have in common?
2. “Make it Bright Red!” and other ways to guarantee users won’t notice it
3. Love the Hove(r)