Published in Web Development on Thursday, July 15th, 2004
Should the navigation element for the 'current page' be left as an active link or deactivated?
In his blog post "Hoverless Current Links", Mike Rundle proposes a method where by using a little CSS you can trick a user into thinking that the navigation element for the current page is not a link.
I've often wondered what to do about this situation. For simplicity, lets think about tabbed navigation. You find yourself on the 'contact' page of a site, yet the 'contact' tab in the navigation area is still clickable. This seems weird, no?
Most major sites that I checked simply have some method of highliting the navigation element for the current page. Come to think of it, well, I can't think of a page where the current 'tab' is deactivated.
That being said, is this an unintentionally developed standard better left as is? What's your take?
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
That's how my site works, and has done since day one!
Furthermore, my sidebar menu extends this by removing the link for the current page. To see this in action:
As I said, it has always been this way. I was in an Obey Nielsen (see item #10) mode when I implemented this.
It can be irritating to click a tab, wait a few moments (perhaps minutes with a modem) and then the current page just refreshes. So I think it is common courtesy to deactivate links that lead to the current page. If possible also make the link into a "you are here" indicator
From the comments of Mike Rundle's post. Just gloating. ;)
If it only reloads the page, lose it. It is only a burden, for reasons mentioned above.
My statistics plugin [link for example screen shot] for WordPress intentionally checks this, and if you're on the summary page you get no link to the summary page. I think this is the a natural way to say, "Hey dummy, you're here."
If the navigation link is highlighted clearly to indicate that it is the current section, why get angry when you click on it and the page refreshes? The fact that something isn't a link should not be what tells the user they're on that page. The fact that a navigation item is highlighted, link or not, should do that.
I think the unintentional standard has arisen out of laziness, and I think that's just fine. It makes styling and maintaining navigation easier to not remove the link.
Furthermore, there's the case of a site section that has subsections within it. In this case, I would expect clicking the 'top-level' section link would return to the front page of the section, and design my sites likewise. What do others think on this point?
This whole technique was started (well on my end at least, others probably did it way before my time) after extensive usability testing done when I worked on a project at Xerox a few years ago.
The goal was to navigate through their website and be able to accurately find the correct printer drivers and downloads needed to make your hardware work, however because each page in the search results hierarchy wasn't clearly marked, people were clicking on links that just reloaded the page for them. Unfortunately, reloading the page meant that it would reset the form values on that page, and thus the user would have to go back and fill them in all over again.
My team implemented this technique on some super-internal, super-deprecated pages on Xerox's old Drivers and Downloads page (since redesigned and forgotten) and I forget the exact figure, but the number of people who clicked same-page links from the main navigation dropped by at least 80%. after using the cursor switch.
So that was how it began... I figured one-line of CSS to boost usability of a certain metric far past expectations was worth it :)
If this post is grammatically incorrect or isn't spelled right.... sorry, it's like 3:15am over here lol.
Hmmmm...think I second the comment citation of [m]'s post. I've done that on my minzweb.de tabs navigation. I just removed the
hrefattribute from the anchor, and it works fine. The anchor now isn't even accessible while tabbing through the page.On the other hand I have to admit that I didn't waste too much thoughts on this topic yet. Time to change that?
Wow, nice to wake up to a little input!
Minz, it is a topic that I felt needed some digging after reading Mike's blog post. It makes a lot of sense, however there are situations like that outlined (and questioned) by Alun, and in fact this situation figures here on the blog (with the Archives 'tab') and on a client site that we'll be soon launching.
Jonathan, thanks for the Nielsen link. Your site does do this in places, I never noticed!
I noticed that you wrote "in places". I'd just like to clarify the mechanics of my navigation links:
Hence, the user is always aware of the "major" section she is in and she is never presented with a link that, when clicked, effectively (and confusingly) does nothing.
Jonathan... Whew, I'll have to dig around you site some more. It is probably the most technically advanced blog I have seen, from a programming standpoint. Do you have a complete colophon with a summary of all of it's bells and whistles?
No Mike, I'm afraid I don't. The thing is, I don't know what's considered "bells and whistles". I just focused on making the CMS as usable as possible (heavily influenced by Neilsen et al).
I share Jonathan's opinion that you shouldn't have a link on a page that just references itself (unless it's a "refresh" link or goes to an anchor somewhere in the page). Whether you're talking tabs or logos or anything. Now, I wouldn't be surprised if my site doesn't follow that, but that's just because I've been too lazy to do much with it, so it just does whatever WordPress does by default. :)
I am also of the opinion that documents should never refer to themselves, which most everyone seems to agree with if not implement. However, I'd hazard to say that a purely stylistic approach is wholely insufficient. With styling off, very limited styling (ie. a rudimentary CSS1 agent), keyboard navigation, assistive technologies, etc, etc. the hyperlink is still navigable.
Since you're likely changing the document markup to style the hyperlink anyway (at least in many if not most cases), why not change it so that the problem goes away more thoroughly?
Seems like common sense to me. Also, even for capable CSS2 visual agents serving die-hard mouse users, there's also accidental or "doodle" clicks that can happen, and context menus are different for images in and out of hyperlinks as well as for hyperlinks vs. normal text. It's best to keep UI behaviour as predictable as possible.
I'm spoiled because PmWiki does this for me, as you can see here. It's not perfect, but it should prevent quite a few same-page-reloads.