It seems strange to be talking about something as basic as “navigation” 11 years into the web era. And yet, if you’re a web designer, chances are you’ve made some mistakes in this fundamental area. I know I have. So let’s go back to basics.
On a website, “navigation” doesn’t mean just links. Navigation is, like most elements of a website, about communicating with the user. Good navigation tells a story, and good stories have a beginning, middle, and end.
Navigation also has three parts, which are used to communicate to the user about their past, present, and future. Any good global navigation scheme should, at a glance, answer the top three questions every user has at the back of their mind on any page:
- Where am I? (Present)
- Where can I go? (Future)
- Where have I been? (Past)
Here’s a test: Go to any random page on the internet. A deep page, not a home page. Then see if you can answer all three of those questions without looking at the URL or mousing over links to see where they go. See if you can tell your present, future, and past purely through visuals. Even in our brave new Web 2.0 world, most sites fail.
Why is this important?#section2
Studies show one incontrovertible fact: If your website is about selling things or convincing a user to come back, navigation is a key factor visitors use to decide if you’re trustworthy or not. And trustworthiness is critical: Would you give your credit card number to that street merchant who looks like he just rolled out of a dumpster?
Even if your site is not about selling anything, your apparent trustworthiness will influence how your content is received, and it will decide if a user bookmarks you and comes back for more or closes the window, never to return.
Three simple guidelines#section3
Here are three time-tested, easy-to-implement guidelines for trustworthy navigation.
One: Never, ever link to the page you’re on#section4
The other day I was driving on the freeway. I was on the 120, going north, dutifully following my Mapquest directions, which said to get off on 120, and then turn right on 120. Say what? I thought I was on the 120 already. Am I lost?
I can’t speak for the design of the California highway system, but we can avoid this problem on a website.
Remember, navigation tells a story. When the user mouses over a link and that trusty pointer hand appears, that says: “This is a place you can go. Click me to go there now.”
When the user clicks, their expectation is that click will make something happen or take them to a new place. If that does not happen, that’s a bad experience and the user is filled with doubt and uncertainty. Your site’s trustworthiness just went down a notch.
It’s amazing how many sites get this one wrong. Even beloved Flickr, so often the poster child for good experience, and even the winner of the 2006 Webby award for navigation, gets this wrong. Just look at that link to the home page on the home page. What could that link possibly do besides confuse the user?
Now, I know the folks at Flickr aren’t out to make their navigation confusing. So why? Personally, I blame lazy content management systems. Most have one global navigation template, to make site-wide changes quick and easy. Building in a lot of if/then statements to change the links per page takes some extra time. But it’s so worth it. Simply changing a global navigation item to be plain old text when you’re on that page means that it will look different (visual recognition of your present place) and will avoid the click-to-go-to-where-you-already-are bad experience.
The one possible exception to this guideline is anchor links. As you know, anchor links don’t send the user to a new page, merely a new part of the page they’re on already. But that can still be confusing, so that’s why they should be used sparingly, if ever. Part of the problem is that, all links usually look the same, even if some are anchors and some are links to other pages. So an obvious solution is to make anchor links look different, which is easily doable in CSS. Another option is to not use them unless you really, really have to.
Two: Show where you are#section5
Like the first guideline, this is just about giving the user a big “You Are Here” clue, wherever they are. If the navigation quietly reminds the user where they are, they’ll never have that “Am I Lost?” panic moment.
In practical terms, this means that when a user is on the main page for a section (awesomeness.org/section), the global navigation element that had been linking to that section should be unlinked and visually highlighted so that, at a glance, you can tell where you are.
Then, when the user drills down to a content page within that section (awesomeness.org/section/page), the global navigation element for that section should go back to being a link (because now the link has utility), but it should not go back to looking exactly like it did on the home page (because now you’re in that section).
Three: Think before you link#section6
If you were considering nominating me for Captain Obvious after the last two guidelines, you’re gonna love this one. Just think about every link in your global navigation. Ask yourself, “Will users really need this link every single time they visit?”
Just because you’ve decided to give a page a top-level directory does not mean it has to be represented in the global navigation. And if it is, what you’re communicating to the user is: “This thing right here is absolutely integral to this site and what you can do here.”
So choose wisely. Think of everything in your global navigation as describing your site. Make sure it tells the story you want to tell.
I realize that this raises more questions than it answers. Should “Home” be one of the global navigation elements? Should I stick to under five items? What about dropdown menus? Should I use tabs at all? Many questions, one answer: It depends. Design your site for the users you have, and the users you want. Then test, test, test.
Putting it all together#section7
Here’s an example of what all this looks like in practice.
Global navigation on the awesomeness.org home page.
Hovering over Section Two while on the home page. The underline communicates clickability.
Global navigation on a main section (awesomeness.org/section). Note that “Section Two” is not a link and is visually joined to the body of the page, communicating ownership of the content below.
Global navigation on a page within Section Two (awesomeness.org/section/page). Note that the tab shows where you are, but the blue shows you can still click it to return back to the main Section Two page.
Hovering over Section Two while you’re on a page in that section.
In all these examples, the visual language is consistent. The tab means “you are here” and is understood at a glance. The underline is always present on hover. And blue always means clickable.
Of course, there are many ways to visually represent these concepts. The point here is simply to illustrate one way of approaching the problem.
If you try to implement something like this on your site but you can’t because a page can exist in multiple sections at the same time, you officially have Bigger Problems. At that point, you probably need to think about other visual metaphors (besides the usual tabs), or reexamine your information architecture.
Navigation is the uncelebrated workhorse of web design, but it deserves a little more attention than it usually gets. When people use your site, they’re like tourists in a foreign city. If you want them to have a good time, make sure they can get where they want to go and know where they are when they’re there. If you show them a good time, they just might come to visit again. But if you leave them lost and confused, well, don’t expect to move much swag in the gift shop.
bq. This has been a known issue in usability for a long time. I think the real problem is how to actually implement it without having to hard code the navigation menu on every page. A lot of webmasters probably consider doing this but reject the idea when they can’t figure out how to do it. I’ve seen some web sites attempt to do this by just removing the link to the page you’re on. It’s even more confusing when the navigation menu changes from page to page.
A good navigation menu will highlight the current page _if_ it would otherwise appear on the menu [1]. I believe that most CMS systems should be able to handle this, but if not, it is a simple matter to add _id=”current”_ to the relevant
[1] Obviously, with a complex and multi-level website, there may be times when the page you are on wouldn’t be referenced on the navigation menu anyway, at which point the whole argument becomes moot.
bq. In addition to what others have said I always thought that links to the same page when it’s the homepage mean that a saved or emailed page always has a link to the original page (or it’s replacement!).
That is a valid point – although rendered useless when authors only set relative links. I guess I haven’t thought of it because it would be less relevant to my sites – the home page is just a gateway page so no-one would want to save it – and all of the content pages do have an absolute link to the home page.
I also tend to use with absolute links, but I am aware that this is only useful to a select few users. Does IE7 support this?
bq. I don’t understand how to do breadcrumbs in every intertwined websites when there are many ways to get to what you’re looking for or get to that you need.
Breadcrumbs are not a panacea for every website. They work well for sites that have a strong multi-level hierarchy and a clear structure.
For sites with a flat structure and no obvious hierarchy, breadcrumbs may not be so useful – when everything is shown simply as “Home > Current page”, there isn’t a lot of point!
But remember, the breadcrumbs don’t necessarily show the user how they have got to the current page – they show where the user is in the website’s structure. It isn’t impossible to have two parallel breadcrumbs – imagine a computer retailer that had:
* Home > Products > Printers & Scanners > LaserJet > HPLJ1000
* Home > Manufacturers > Hewlett Packard > Printers > HPLJ1000
This clearly shows twin paths to the current page and makes it very easy for the user to navigate through the hierarchy to another page.
I began to think how other software applications (beyond the web) interact, and I couldn’t find an example similar to the self-links in web.
You all are probably using a browser with tabs. Look at the tabs! How do they behave? Does clicking on the active tab make the page reload? No, it doesn’t – you wouldn’t even think about clicking the active tab. But what if clicking the active tab would be like clicking the refresh button? Would it be a good thing? When you would accidentially double-click another tab, the page would reload – which could result in loss of data in half-filled form – not really the beheavior you would be happy with.
Many people here have suggested, that you should only style the active link differently – but what if the CSS in off? You could put the link inside strong element, to provide some natural highlighting, but can you really be sure, they look different for users of Lynx etc? And then there are screen reader users, who would scan through the whole listing of links found from page…
And about the remote control example. My TV doesn’t show me constantly, which channel I’m on, so I quite often click the button of the active channel – that’s quite confusing.
Hi. Let me just say you may be right, and I may be crazy. And _ranty_. And! Just because Flickr’s really popular, doesn’t mean it’s perfect, by any stretch. We’ve never really worried too much about The Rules though 😉
I just thought I’d jump in with a few comments about Flickr. It isn’t a corporate website. It’s a feisty blend of old-skool “homepage” and a deep, complicated, *organically organized* application. We do want people to be able to use it though and to trust us implicitly (!!). Nielsen says good things, but we also need to start asking how might things need to change in the “Navigation Basics” universe? How does folksonomy affect navigation design?
“His list of rules from November 2003”:http://www.useit.com/alertbox/20031110.html – “There are ten usability mistakes that about two-thirds of _corporate websites_ make”:
*10. Don’t include an active link to the homepage on the homepage*
If we’re just talking about not linking to HOME when you’re on the HOME PAGE, then maybe this is a fine suggestion, and we should look at implementing it. (I think this is generally a good idea.)
However, Nielsen extends this rule to apply in other areas:
“But when users are on a page that’s featured in the navbar, you should turn off that option’s link and highlight it in such as way that indicates that it’s the current location.”
This might be a good idea too, particularly when you’re designing a site which has a strict taxonomic structure, like a corporate brochure or a banking site or something. I wonder though, if the rule needs updating if you’re dealing with a site where the information “organizes itself” organically, as a result of the input of millions of contributors.
I’m possibly misguided when I interpret Nielsen’s sub-clause to mean ‘show some indication to the visitor where they are on the site at all times’. Like, Groups > Recipes to Share > Recipes to Share Pool > Photo in the Recipes to Share Pool should tell you that you’re in Groups when you’re looking at the photo in the pool.
Flickr is a bit weird. The trick is, we have this pesky little page which displays a single photo (“like this example”:http://flickr.com/photos/fraying/210353355/) that doesn’t necessarily fit anywhere within the navigation framework in a systematic way. If I look at the example page (a lovely photo of Derek), there’s no way to locate every visitor in any of these layers in a meaningful way because the each photo can exist within a number of different contexts (a set, from a friend, in a group, taken on a day etc). You might not even be a member of Flickr, but just visiting, in which case the navigation you see is different – Home, Learn More, Sign Up…
The guts of Flickr is organic, not taxonomic. The way I conceptualised the site’s navigation was more like an onion skin than a top-down structured hierarchy. Each member has a lifecycle in the system, which means that *every person* sees something slightly different in terms of content. Even so, we can still generalise about one’s position within this lifecycle. The centre of the system is You, which extends to people you know or are connected to (Contacts), to things or people you are interested in (Groups), and then to the Flickrverse as a whole (Explore).
I certainly see that if you’re looking at your main groups page (logged in), there _might_ be use in highlighting the groups navigation element in some way. The page you land on when you click “Groups” is designed to be a jump point into all the things you can do with groups, so I guess the design assumes that you probably wouldn’t click on “Groups” again. (All the top-level pages look different too, depending on whether – in this case – you belong to a group yet or not.) Things you can do within the groups area are reflected in the Groups navigation menu as well (which you can access by clicking on the little down arrow next to the word “Groups”). I also think the design we’ve created of a sub-section (sub-onion-skin layer) goes a long way towards achieving Nielsen’s assumed goal of locating people in any one system. Like, when you’re looking at Your Photos, there’s a fixed set of options (where we use the highlight technique, as well as big-ass text saying where you are) to illustrate location.
As an aside, I actually really like the idea that someone can feel a bit lost when they surf around Flickr. The exploration and personal, dynamic wayfinding that can happen in a space like that is lovely and exciting, and should be encouraged!
If we’re OK with that, then perhaps navigation design needs to suggest these answers instead:
1. What can I do?
2. How do I get back?
That was another reason for not highlighting navigation elements – so people can use them as a jump point when they’ve stopped exploring and are ready to get started on something else. Those links you see in the top bar can get you straight to where you want to go when you’re ready to get moving again.
By the way, I think the idea of drop-down-y navigation is a bit newer than Nielsen’s 2003 article. It’s a relatively new method designed to illustrate many options quickly, rather than having to navigate a tiered structure to get to where you want.
My point is: some of The Rules might be getting a little dusty.
But, what do *you* think?
As I type this, there are 56 comments to this article. I’d guestimate that 50 of them are all on the same topic, and there have been about 3 good points raised. That’s a pretty crappy signal/noise ratio. We, as an industry culture, have the time and inclination to take part in such pissing contests?
I see the other Derek’s point in that a page linking to itself is functionally useless and you can maintain a consistent look and feel to navigation through a case statement or a seriese of if/then statements or contextual css selectors or whatever to make the navigation element that refers to the current page stand out as a you-are-here beacon while also removing the link functionality.
So really the only thing up for debate is, do more users expect that functionality to be there to the point that they would be confused by it’s absense or are there more users who expect the behaviour off any link to include moving them to a *new* page.
I personally don’t know. I have neither read nor conducted research into the matter. I can see it going either way. In my mind, it seems like as long as it’s obvious the text refers to the current page, either as a link to it or simply as a position marker, it shouldn’t matter either way.
But my mind isn’t most users, and I’m not going to assume what my mind tells me automatically maps to a best practice without some sort of outside verification (and I’m always going to be questioning even that).
Some bad design practice are so widely used and have been for so long that users now expect them, such as drop down navigation menues. It’s possible that linking to a page from itself has reached the same level. Who’s to say? Obviously not me.
People are accusing the author of forcing his opinions and his way of doing things upon us without a lot to back it up other than his own common sense (and Nielson, as an afterthought). But I have yet to see anyone else do any different.
Someone has questioned the way you do things and violated your own common sense and your knee jerk reaction is to leave a comment, or in some cases a whole serise of them, attacking the assumptions of the article.
That’s all well and good, as long as you also take *at least* as much time to examine your own assumptions. A few of us seem to be doing that, but it’s the exception rather than the rule.
If ALA published an article that espoused right-handed ass wiping, I wonder if we’d get 6 pages of discussion over the merits of south-paw rectal hygiene (relegious preferences notwithstanding).
Generally speaking I agree with the minority; there’s no reason why a page should have a link to itself. That’s what the refresh/reload button is for. I can think of exceptions: in GMail if I’m expecting an email to arrive (e.g. a test sent from myself) I may click the “Inbox” link a few times until the new message shows up. But GMail is less a website than an application anyway.
I see the self-link as potentially causing a problem similar to “form error blindness”, where a user submits a form, misses a compulsory field but does not see the error message alerting them to the fact, and thus keeps submitting the form, getting more and more irritated until they leave (cursing you).
Theoretical example:
– User gets to your ‘widget detail’ page direct from Google (with no context)
– User thinks “Awesome widget! I’d love to get more detail on it” and clicks the “Widget detail” link
– Page reloads cos the user is already on the widget detail page
– User thinks “Stupid website, why doesn’t the widget detail link work?! Well I shan’t bother then.”
– Result: Lost sale
Now admittedly, if the widget detail link was highlighted in such a way as to say “You are here” then it probably wouldn’t such a big deal that it’s also a link, but the message would plainly be stronger it it were both highlighted and unlinked.
The theoretical sale wasn’t theoretically lost because they wanted more detail than was available – the point is that they thought they were being offered more detail and then it wasn’t delivered.
Sure, as experts we’d all know what was happening and carry on regardless, but we are not a representative sample of users. Audiences are different obviously, and we all have to make our own decisions there.
On the alternative side, I can see, possibly, a reason why a self-link is a valid navigation field; that is to confirm that you are on a certain page. For instance:
– You land in the “Corporate” section of a site, but you’re not sure where you are in the morass of boilerplates and executive bios
– You click the “Section home” button and it reloads the page
– “Ah”, you think, “this _is_ the section home page.”
To me this is a bit like walking into an elevator, waiting for the doors to close and pressing the ‘3’ button just to make sure you’re on the third floor. It _is_ a way to confirm where you are, but it demonstrates that maybe the building could use a bit more signage. Of course the difference is that there is no real-life Google to teleport you straight to the third floor, so by definition you know how you got there and have some sense of where you are.
As for backup – I actually do have stats to show that a significant proportion of visitors to the home page of a (high-traffic) site on which I work (but don’t design) click on the link that leads to that same page. What the stats don’t tell me is what they’re expecting. If they’re expecting a different page, then how is it an acceptable user experience for the same page to reload? If they’re expecting the same page, then _why are they clicking on it?_
Generally speaking I agree with the minority; there’s no reason why a page should have a link to itself. That’s what the refresh/reload button is for. I can think of exceptions: in GMail if I’m expecting an email to arrive (e.g. a test sent from myself) I may click the “Inbox” link a few times until the new message shows up. But GMail is less a website than an application anyway.
I see the self-link as potentially causing a problem similar to “form error blindness”, where a user submits a form, misses a compulsory field but does not see the error message alerting them to the fact, and thus keeps submitting the form, getting more and more irritated until they leave (cursing you).
Theoretical example:
– User gets to your ‘widget detail’ page direct from Google (with no context)
– User thinks “Awesome widget! I’d love to get more detail on it” and clicks the “Widget detail” link
– Page reloads cos the user is already on the widget detail page
– User thinks “Stupid website, why doesn’t the widget detail link work?! Well I shan’t bother then.”
– Result: Lost sale
Now admittedly, if the widget detail link was highlighted in such a way as to say “You are here” then it probably wouldn’t such a big deal that it’s also a link, but the message would plainly be stronger it it were both highlighted and unlinked.
The theoretical sale wasn’t theoretically lost because they wanted more detail than was available – the point is that they thought they were being offered more detail and then it wasn’t delivered.
Sure, as experts we’d all know what was happening and carry on regardless, but we are not a representative sample of users. Audiences are different obviously, and we all have to make our own decisions there.
On the alternative side, I can see, possibly, a reason why a self-link is a valid navigation field; that is to confirm that you are on a certain page. For instance:
– You land in the “Corporate” section of a site, but you’re not sure where you are in the morass of boilerplates and executive bios
– You click the “Section home” button and it reloads the page
– “Ah”, you think, “this _is_ the section home page.”
To me this is a bit like walking into an elevator, waiting for the doors to close and pressing the ‘3’ button just to make sure you’re on the third floor. It _is_ a way to confirm where you are, but it demonstrates that maybe the building could use a bit more signage. Of course the difference is that there is no real-life Google to teleport you straight to the third floor, so by definition you know how you got there and have some sense of where you are.
As for backup – I actually do have stats to show that a significant proportion of visitors to the home page of a (high-traffic) site on which I work (but don’t design) click on the link that leads to that same page. What the stats don’t tell me is what they’re expecting. If they’re expecting a different page, then how is it an acceptable user experience for the same page to reload? If they’re expecting the same page, then _why are they clicking on it?_
I don’t use Flickr but I had no trouble understanding what was going on in the example linked to above. It’s easy to understand the idea that this is a photo, and it’s part of the following albums (down the right-hand side).
If I want to see more photos in the same set, I click an album. The same topic, there are tags below. (Of course, if that’s not how it works, there _is_ a problem!)
But if the image’s title, “Me in NYC,” was a link, and I clicked it and just got this photo again, that would be weird. I would probably assume “Me in NYC” is a link to a gallery, and figured this was the only photo in it.
Blogs do that and it drives me nuts. You’ll be reading an entry and its title is a link. You click it and *damn* I was already here.
A lot of standard blog templates (see: every single blog on Blogger.com) also seem to be missing a link to the previous page/month at the bottom. So, once you’ve finished reading the current page, to access older content you have to scroll to the top and click on a link to a particular month. None of which are highlighted in any way.
Does the current page only show posts from the most recent month, in which case I visit the previous month, or, does the current page simply show the last ten posts, so I still need to visit the current month.
“Why are you making me think”:http://www.sensible.com/buythebook.html ?!
Blogs are a whole can of navigational worms. I’ll try not to comment on those! Except to reply to this comment by Chris Botman:
_”You’ll be reading an entry and its title is a link. You click it and *damn* I was already here.”_
The reason for that is because the title is a _permalink_. Users are accustomed to right-clicking on it to grab the URL. A better solution is to provide a dedicated link, marked with a symbol, or the word “Permalink”. My blog system makes the titles permalinks, but I haven’t figured out how to change it yet.
I certainly don’t agree with the strict ‘no self-linking whatsoever’ rule.
I for one use it quite regularly to open the same page in a new tab (often in a situation where I have to qoute or keep the original text as easy reference – standard quoting options are often very limited and small textareas don’t help either).
Maybe it’s me abusing the tabbed browsing functionality, I’m not saying self-linking is feasible in every situation. But I surely wouldn’t advise against it in every situation.
Hi Chris,
bq. The reason for that is because the title is a permalink. Users are accustomed to right-clicking on it to grab the URL.
But what was wrong with using the _address_ bar? Isn’t there a design rule floating around about not reproducing browser functionality?
I’ve got to diagree with the statement about self-linking being confusing. Sure, when you’re on the home page and you click the home nav menu button it reloads and doesn’t go anywhere. However, the more important issue is that the nav menu doesn’t change from page to page. It isn’t just about ease of updating with a single menu include. It’s also a usability issue for the visitor. Not including the self link makes the menu change from page to page, which means that the position of the other buttons change from page to page. This is what’s confusing and a usability issue. On each page the visitor takes that extra second to re-evaluate the order of the menu and that get’s annoying really quickly!!
Todd: You’re right, the global nav items should not move from page to page. If you look at my example in the article, you’ll see that’s not what I’m suggesting. It’s totally possible to have the global nav elements stay in exactly the same place using CSS. You can (and should) remove the link from the current location without changing its position.
bq. The reason for that is because the title is a permalink. Users are accustomed to right-clicking on it to grab the URL.
bq. But what was wrong with using the address bar? Isn’t there a design rule floating around about not reproducing browser functionality?
Most blogs use a concatenated view of multiple entries, whether it’s on the home page, a category page or an archive page. In this case, copying the address/location field would not work. It is only on the _individual_ article pages (the ones that usually have the reader comments, trackbacks or pingbacks) that the link is redundant to the location field. The “permalink” is exactly that: a link the user can use to be assured they can find the exact same content again. I remember a time before blogging where “blog-like” diaries would eventually bury content in an archive and made it near impossible to find the content where it had once been. The permalink fixes that.
Here I must take some exception, especially given the current trend to use AJAX to add content to a page without the page refreshing. For users of adaptive technology, this is a spacial orientation issue that is quite serious – *you* might see a visual change, but if you can’t see, how do you know things have changed? Take for example this very real world piece of code (taken from a popular “blogging tool”‘s calendar function):
… coupled with:
Problem is, if/when you trigger the link/JavaScript, it visually outputs the new content below the calendar, but you have not specificly moved the “focus” of the virtual cursor that reads out the page to a screen reader. However, by using the anchor within the source code, you can and do shift that focus:
…with:
(careful readers will note that I have also changed the listing of entries to… a list – go figure)
Another thing to consider is smaller display screens – where the ability to ‘skip down’ to further in the content aids greatly in both usability and accessibility (and, with Section 508 mandating a “Skip Nav” link, unavoidable).
And so with due respect, I must disagree with your opinion, and in fact suggest that more (or at least effective) inter-page navigation that is provided by the anchor is better; not only is it low-tech (so what’s wrong with that?), but it is in keeping with the overall thrust of your artical – good navigation is critical for your user.
The blog issue is a red herring. Of course you need a link to the entry (permalink) from the blog index. But when you’re *on* the permalink page (aka individual entry) you do not need another href to the permalink. You’re already on it! Many blog platforms make this error, making the blog title a link to the page you’re already on.. Again, it’s just sloppy coding.
As for the brave new world of Ajaxy goodness, it just makes consistency and wayfinding *more* important, not less. If your web apps need a refresh button, then add a refresh button. Training users to click a link in the global nav to the page they’re already on in order to refresh the page is nonsensical. It’s like making someone get in an elevator to see what floor they’re on.
Hi John,
Thanks for your reply. Sorry if I wasn’t clear, but I was specifically referring to the page for an individual entry.
Derek’s reply above sums up the case nicely.
bq. It’s also a usability issue for the visitor. Not including the self link makes the menu change from page to page, which means that the position of the other buttons change from page to page. This is what’s confusing and a usability issue.
You *don’t* remove any items from the menu. You simply remove the hyperlink from one item and style it differently – all items remain in the menu, in the same order.
See this “example of a menu”:http://webstore-ed.net/ourladys .
The discussion here (about the article) is a classic example of “conference table research” where experts opine on the preferences of users who are not at the table. Whether the author is correct is interesting, but not essential. Derek’s point at the very least raises an interesting hypothese about usability.
It is very easy to find out if this is a guideline where we should consider or better yet test before self-linking a page, a rule where we should obide by it unless there is clear evidence that not self-linking is worse, or a law where we should avoid self-linking at any cost.
All we have to do is test it. I would like to offer anyone who would like to try this free use of our testing solution as long as they share the results. I will avoid plugging our company here, but if you are interested, please contact me at jtroche@mac.com.
“Then watch them try to go somewhere, move the mouse over a link, click it, and wait for something to happen. Only it was a link to the page they were already on. THEN look at their face. See how long they wait. Ask them how they feel when they realize they were waiting for nothing to happen.”
What is slightly amusing here is that THIS user is going to click on your differently styled non href’ed link also (depends if this hypothetial user is savvy enough to understand the pointer to finger cursor change…a whole other argument)…and then sit there confusedly waiting to go somewhere and not…so I fail to see the relavance in your hypothetical test.
In both cases the user will learn (hopefully), that clicking on that link goes no where. So it’s a moot point whether it’s a live link or not. Either way the user learns it doesn’t do anything…
But yes, it should be styled differently…and as long as you are doing that it is just as easy to take the href out..so you win 🙂
but in the end it doesn’t really matter that much b/c one global navigation will win out and the link will stay href’ed and unstyled…why? B/c it’s easier and I have to get home for dinner and play with my kid 😉
I don’t think the user would automatically associate distrusts if you link to the page your on via the main navigation.
I agree Johan that the user would not automatically assume disstrust should if you link to the page your on via the main navigation. But one thing I think instills trust is if your nav bar is in the same place thru the whole site and not just one way on the front page and differnt on the subs
Your article makes sense BUT, I being someone who works on the Web for a living knows the “logo” is usually a link back to the homepage/index, but looking at this site, (alistapart.com), show me where the “home” button appears on this page. If I were a casual user and landed upon this page, how would I navigate to the home page? I guess this site fits the category of “mistrust” also.
I have to say that despite the fact it sounds counter-intuitive, I prefer it when a tab link is not deactivated even though I’m already on the page it links to. It feels like there’s a cognitive disconnect if I hover or click on the tab and nothing happens.
When it comes to breadcrumbs however, I always disable the link on the item at the very end of the breadcrumb trail (i.e. the current page), as it just seems wrong to have the link active.
Here are a few things I just feel are missing from the article that do not favor the implementation of removing ‘self links’.
# While it confuses some people to have them, it can confuse others by remove them.
# It can cause feelings of discomfort.
# Given time / cost restrictions, it is not an important ‘feature’ on a website and does not deserve priority over other features when building a website.
# Most examples given against self-links are problems of _poor design_ and not the actual self-link.
# A programmatic implementation is not terribly difficult to code, but can add to the complexity of a site making updates/debugging more difficult.
# A programmatic implementation will increase the page creation time of the site as every link on ever page would have to check against the requested page URL. Links can often be very long and a page can have quite a few links on them. Each link would require a string comparison. Certain logic might be needed include the query string as product pages are often dynamically built which could make comparison slightly longer and more complex.
# Statically implementing such an idea would require the maintenance of multiple different navigation systems on different pages. It should go without saying how bad an idea this is.
# It actually might be a _design choice_ to allow self links for “˜tabbing’. A business’ site might often have users who “˜multi-tab’. It’s much easier right clicking and choosing “˜new tab’ from the menu than opening a new tab and coping and pasting the address into the new tab address bar and submitting it. Without self-links, this is impossible.
# It’s necessary. AJAX style sites (such as Google Email and Google Analytics) not only break the back button, but they can break the refresh button as well. Refreshing a page might only be possible (without extra clicks) by having a self-link. Think clicking your “˜inbox’ when you’re in your “˜inbox’ to refresh your mail. Also, AJAX style sites can actually update a page faster with self-link refreshes than full-page (refresh button) refreshes, _depending_ on how the site was programmed.
# If it were really a serious usability issue, it wouldn’t be done on today’s biggest sites.
Correct me if I am wrong about this, but there are more than just visual needs of users. What happens to users of screen readers? Does their navigation options change? Do screen readers _see_ the same navigation options or do they now exclude any choice of the self-linked page? Do users of screen readers prefer having or not having self-links? Do screen readers already exclude self-links? Just because a navigation doesn’t visually change (dramatically), doesn’t mean the mark-up isn’t going to semantically be missed.
This discussion reminds me of a Dilbert cartoon. The marketing department asks the engineers for something completely impossible because it would be “˜cool’, resulting in the engineer stabbing himself with his tools.
Just because something _can_ be done, doesn’t mean it _should_ be done. What’s good on paper is not always good (or practical) in practice. As designers, we strive for the prefect stylish and usable site. As programmers, we are trying to create applications that are simple, fast, extensible, feature packed and logical. As business people, we strive to out-do the competition and make more money. These 3 things conflict with each other at some point or other. You cannot have the most usable site and have it be the fastest site possible while being cheap and quick to produce. Removing self-links is the designers Nirvana, makes the programmer groan. There for it’s up to the businessman to break the tie, which means to remove self links have to have a ROI given the sites target market.
Which is probably why you do not see it on implemented on pretty much all the big name sites and only on more of the academic pages. There’s relatively no ROI for implementing such a feature, even if its considered a usability benefit by knowledgeable and professional people such as Mr. Nielson and Mr. Powazek.
Cheers,
John
1) My reaction to pages that link to themselves is “Why did you waste my time?” One option might be to, in addition to making the non-link look different, add a title attribute of “You are here.” My site avoids self-linking.
2) I’ve also had the frustration, as mentioned above, of a link that seems to offer more information actually turning out to be a self-link.
3) Dynamic breadcrumbs replace the functionality of the browser’s Go-back-more-than-one-page button, and thus strike me as overkill. They also appear to require cookies to work.
4) Hierarchical breadcrumbs would seem to be good for where am I, although not for “How did I get here” if an alternate path was taken. My site plans to implement such breadcrumbs.
To comment point #8 in post of John Bertucci:
‘Tabbing’ is defenetly not impossible without self-links. That’s more of a user-agent problem. For example Opera allows you to simply duplicate a tab. ‘Impossible’ is a bit harsh.
To comment point #8 in post of John Bertucci:
‘Tabbing’ is defenetly not impossible without self-links. That’s more of a user-agent problem. For example Opera allows you to simply duplicate a tab. ‘Impossible’ is a bit harsh.
Chris Hester said:
bq. The reason for that is because the title is a permalink. Users are accustomed to right-clicking on it to grab the URL.
Chris Botman responded:
bq. But what was wrong with using the address bar? Isn’t there a design rule floating around about not reproducing browser functionality?
Because maybe the address bar contains a link that isn’t a link to the page but to a specific part of the page, like the comments section.
bq. I for one use it quite regularly to open the same page in a new tab (often in a situation where I have to qoute or keep the original text as easy reference – standard quoting options are often very limited and small textareas don’t help either).
I do this all the time. It’s much easier for me to click the link using the thumb wheel to open in a new tab than to copy the link from the address bar, open a new tab and paste the URL in the address bar of the new tab.
In the 1994 a study came out (sorry I can’t remember where or the name) that looked at application navigation. The major thing that I remember from that study is that when users look for navigation items they first look for a specific location, then item text and finally an image.
Because of that study, I always leave the navigation alone other than styling the current location differently. Just like on a tabbed form, you know which tab you’re on because it looks different from the other tabs. I’m on the home page, the home link is styled so that the user can see that it is the current page. (Be sure to use more than color as some are color blind.) Location is the most important thing here, so I don’t want to remove the navigation item. I can see the logic of making the current page not linkable while still leaving it in the site navigation.
I’ve found that there are times users find it is easier to use the site navigation rather than the refresh button. After all, the site navigation is on the page, not the browser isn’t it? There are cases like the Inbox in email or when a page has content that dynamically changes like a stock quote on a portal page to style the current page navigation link differently and to leave the item linkable.
bq. Dynamic breadcrumbs replace the functionality of the browser’s Go-back-more-than-one-page button, and thus strike me as overkill. They also appear to require cookies to work
I don’t have a problem with the fact that they require cookies. They provide a potentially useful feature that augments the standard navigation, rather than replaces it – so someone who doesn’t have cookies isn’t going to be served a substandard page – they just won’t have this “bonus” feature.
And while it does, to some extent, duplicate the back feature of browsers, it does more than that – you can be going backwards and forwards through pages such that a page you visited doesn’t appear anywhere on your back/forwards list. Yes, there is also the history feature that most browsers include, but that isn’t always easy to use.
Thanks for a very interesting article. I must admit, as I was reading through it and flicking back to my site, I realised I was doing a number of things wrong.
My site will be updated fairly shortly!
Good article. A little obvious, but it definitely needs to be said.
You make a point that navigation should show the user where they’ve been, but you don’t show it in your tabbed example of Awesomeness.org. How would you treat that aspect of correct global navigation?
Thanks.
I think if you can cancel out the confusion of an anchor link if you set the text of it into something like:
Scroll down to footer
I believe in self-linking, and I too have 11 years of experience. Who knows if that really means anything though.
In a breadcrumb trail (dynamic or static), I wouldn’t allow the last item (the current page) to be a link. I also wouldn’t make the title of a page a link. If the content was dynamic, I’d add a link labelled ‘Permalink’ (or better ‘Permanent Link’ or ‘Bookmark this page’). If the content was dynamic, and reloading was useful, I’d add a link or button labelled ‘Reload’ or ‘Refresh’.
However, in the main navigation, I firmly believe in self-linking as main navigarion is often in the form of heirarchial menus. In there, every option should *always* be a link. Every other menu behaves like that on my computer. Just because I just copied a piece of text, the ‘Copy’ option in the edit menu isn’t disabled until I select something else. When I have a new document open, I can still create (another) new document.
In a menu, every option should be available. Elsewhere, don’t self-link without it being obvious *why* it’s a self-link.
When users “learn” through trial and error that the section ‘tab’ does not self-link, they would likely assume that the same behaviour applies to subsequent section pages. In that case users might think they have to click to another section in order to return to the top page in the current section.
While creating three modes for the section ‘tab’ is a good idea, I don’t think many typical users would notice a subtle variation between the _selected_ state and the _linkable-selected_ — Having to learn a new third mode might be more confusing than having a page self-link.
My apologies if this method was already covered elsewhere in this discussion … .
The way I achieved not having a link to the current page was to place a label inside each list item of my navigation menu:
…other
My global.css:
#nav li label
{
display:none;
}
On each individual page, I added a style something like:
#nav li#someLink a
{
display:none !important;
}
#nav li#someLink label
{
display:block !important;
}
The !important may not be necessary in all cases. It seemed to be necessary for me since I’m using ASP.NET with Themes.
One problem I can see with this method is that it’s adding
Thoughts?
Brad
An observation – clicking the Home link on the Flickr homepage changes the greeting between “Hi”, “Allo” and “Namaste” – English, French and ? (German?).
I believe “Namaste” is Hindi/Sanskrit.
http://en.wikipedia.org/wiki/Namaste
I believe “Namaste” is Hindi/Sanskrit.
http://en.wikipedia.org/wiki/Namaste
I wrote a script awhile ago to take care of this:
“linktext”:http://www.tjkdesign.com/articles/navigation_links_and_current_location.asp
I think webmasters link to their current page because they think it will improve they’re on-page SEO. I can understand when a website uses a universal navigation bar with a “home” link to the index page, but other than that, I agree that they are annoying.
P.S. I’m so glad I found this site! I am an aspiring designer and it’s exactly what I was looking for!
Already I read user experience article… now this one also good… because I know the importance of the navigation in designer point of view. But this is good for user point of view. So this will help for me.
Thanks…
If the intent to not allow links to the current is to identify the current position within the site, okay. The tab example works fine.
If a site is more complex, as suggested by the author, life is more complicated. A page navigated to from a drop-down menu is a different matter.
A site with a series of dropdown menus — either single- or multi-level — don’t benefit from the logic of page identification. Content, for me, always dictates the structure. If I can identify on the page the location within the site with breadcrumbs or page title (in the url or browser bar or within the page text), I will.
It’s my hope the viewer of my site is keen enough to understand where he or she is or, more importantly, how to find what he or she is looking for without visual cues in the navigation, but I also understand this is not always the case.
As I develop sites for my customers, I offer my advice and my insistence on standards, but ultimately, they pay me so they have the final say. Too often this results in navigation replete with redundant links, inconsistent arrangement or any such horrors.
My thought is if there is an active link to the page I’m on, so be it. It’s more important to me to have a consistency to the navigation. It’s been my experience that users find this more helpful.