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.
In the article the question ‘Where have I been? (Past)’ is used. while the other two questions(where am I? and where can I go?) have been addressed, this question is largely ignored – other than ‘don’t link to the current page’.
Should one implement a history remembering script? How critical is this?
The only site that have done something like this that I know of is PPK’s http://www.quirksmode.org/. The best thing that I have is the browsers ‘visited’ link color.
Is it enough or is something more necessary?
Thanks for the interesting read. Navigation and information architecture – always a great topic.
Even though I see your point about not linking to the page your on, I think there are situations where your “never-ever”-rule needs to be relativized: That is dynamic content.
I think it is a valid appoach to allow the user to refresh the site by clicking the link of the active navigation element again.
It can be very annoying to be forced to leave and return to the page in order to refresh the content – espacially if the site uses frames and F5 doesn’t work properly. But even if F5 is an option: If time is a relevant concept of your website, shouldn’t refreshing be a concept of your site’s navigation?
Tim
bq. It can be very annoying to be forced to leave and return to the page in order to refresh the content — espacially if the site uses frames and F5 doesn’t work properly
I am constantly refreshing pages with links to themselves, especially in online stores because I know exactly where to go to click. Sites like news.google.com or news sites that are updated are often refreshed multiple times to check for new news.
On the other hand, functionality like the “refresh” button on Newstoday is really really useful and I think a quite valid “link to itself” to refresh a frame. Maybe that would be a better way of loading dynamic content again and again.
The one thing I miss is the use of breadcrumbs. When you use them it is always clear to a user where he is. I strongly reccommend breadcrumbs for almost every site.
http://industries.phloe.net/
(bloody enter button)
…as I was about to say; the concepts of the article matches exactly what I arrived at when trying to come up with my very own minimalistic navigation concept – but the example is really bad. 4 tabs hardly makes for any type of breadcrumb (past) – and it doesn’t make for a very universal navigational system – no support for heirarchy.
My own attempt at navigation can be seen in effect here:
http://industries.phloe.net/
…sure you won’t be able to have a gazillion sublinks for each page as it runs in a single line – but hey; it’s better than tabs 😉
Are links that go to the page you’re on really such a bad thing? Let’s see what happens when the user clicks them. The page reloads, and they realise they are where they were before. Big deal! Nothing terrible has happened.
As for Flickr, and sites which have a permanent Home graphic on every page, users have come to expect this to be in place, no matter what the page. To have it suddenly not work is surely more confusing. They may then assume it doesn’t work on all pages. I agree it’s technically wrong, but users aren’t stupid.
I do find links to the current page useful sometimes. More often than I find them to be harmful (if it is possible), so I am sceptical about this “never link to the page you are on” rule.
This isn’t the first place I’ve seen it claimed that links pointing to the current page will confuse users. I’d like to see the evidence that supports this assertion.
If you click the “A List Apart” logo, it goes to the home page – even if you’re already there. If you click the “Where Am I?” title of the article, on the article’s page, it reloads the page. Yet you, me, and everybody else reading this seems to have found their way around this site without going into a tailspin of confusion.
As the article points out, Flickr won a Webby for its navigation despite committing this supposed sin. Maybe that’s because real users don’t actually care whether you link to the current page in the navigation or not.
Issue with linking to the current page is in my opinion quite similar to links without underlines. Everyone is just so used to these things. Users might even get upset if the link to the current page does not work – is there something wrong with the link – they might ask.
I used to be disturbed by that kind of behavior, but over the time I have grown used to it, even to expect it. I believe, that not linking to current page is the *right* thing to do, but it would be nice to see a research done on this subject.
bq. 3 Were i have been !
There are any other way, beyond the :visited?!
I thing any another way of doing this will confuse user.
bq. Never, ever link to the page you’re on
You said it most emphatically, in capitals even.
Yet, at the top of the page, what do we see? A link to the page we are already on…
bq. Are links that go to the page you’re on really such a bad thing? Let’s see what happens when the user clicks them. The page reloads, and they realise they are where they were before. Big deal! Nothing terrible has happened.
If you’re not at the top of the page when you click the link, it might not be obvious that the same page has loaded, because the screen content has changed.
OK so *you* might find it obvious, as a skilled web user, but a lot of people won’t. Think of all the people out there who double-click on hyperlinks and type complete URLs into Google – these are people who really struggle to interact effectively with a computer. And some of them *will* be confused by clicking on a link and being taken back to where they were already.
bq. There are any other way, beyond the :visited?! I thing any another way of doing this will confuse user.
“Teachernet”:http://www.teachernet.gov.uk/ tracks pages you have visited during that session and lists them (with breadcrumb trail) at the bottom of the page.
I’m not convinced how necessary this is, but it is certainly a way to let visitors quickly jump back to pages they have already looked at, even if there would otherwise be no direct navigation to that page.
bq. Just look at that link to the home page on the home page.
It may be just me, but I can’t find a single link on the home page pointing direct to http://(www.)flickr.com. Perhaps they took your advice and removed it.
In some cases leaving links to the current page is reasonable, if the decision is made to give a measure of consistency to the navigation. Having the navigation look/react consistently should certainly be a consideration.
Personally, I like the links to always exist, but being involved in web design I’m probably not representative of the majority of users. Perhaps the best solution is to leave the href in, but give the user (as in your examples) a clear indication of their location within the site structure.
I am wondering if this is based on the opinion of the author or is this based on actual usability research? Paging Dr. Nielsen…
First, good read. I always enjoy ALA articles by fellow web professionals. I agree with the founding princile of having the ‘past’,’present’ and ‘future’ available or answerable on every page. However, is the whole ‘don’t link to yourself’ point necessary?
My reasoning is simple…
Users are smart enough to know that if you click the ‘/news/’ section button, it brings them to the “News” index page. While, I think it’s a good idea to have the link change colors or visiably different, is it truely necessary to also slap the users hand and tell them “No!” if they want to click the link again?
Also, we’re only talking about one page, the main/home page of a section. To write more complex code, to remove a link for only main/home pages of sections in the navigation bar just seems to be a lot of overkill, expecially when I do not believe there is any adverse effects to the user experiance, allowing them to click on the link again.
In fact, I would argue the opposite, if you remove the link and the user is moving their mouse across the navigation ‘buttons’ and suddenly their little hand doesn’t appear over a ‘button’ that *just* worked, it might cause some feelings of discomfort in the fact that it’s not doing what it *just* did seconds ago.
Then again, it’s important to change the link, visually, so if you’ve code that part, you should have the logic to just remove the link as well, if a designer feels it is more relavent.
However, what I feel was missed with the point of ‘do not link to yourself’ is not the *same* link, linking to yourself, but *different* links linking to the same page. How annoying is it to click a link ‘Product Catalog’ on one page and then click another link in the same navigation called ‘Easy Product Selector’ to find yourself at the ‘Product Catalog’ page? In terms of global navigation, there should never be more than one link that goes to a single page.
Cheers,
John
bq. 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.
To achieve the effect of removing a link without actually having to rewrite CMS code, you can just style the link to make it _appear_ as if it’s plain text. Assuming your page has id’s assigned to the appropriate elements, you could style the link something like this:
body#home li#homepage a{cursor:default;color:black;text-decoration:none;}
bq. If you’re not at the top of the page when you click the link, it might not be obvious that the same page has loaded, because the screen content has changed.
bq. OK so you might find it obvious, as a skilled web user, but a lot of people won’t … some of them will be confused by clicking on a link and being taken back to where they were already.
There’s two different topics here.
# Good Design
# Being taken back to the *same page* by the *same link* on said page.
First, there are some users out there, that no matter what, you cannot design a page for them without making it look something you’ll find on MySpace. Second, a properly designed site would not have a link to itself that is at the botto of a page, that would just be a little pointless. Though, I can think of links that might be in the footer, such as site maps and privacy policies. That might be a situation where this would occur. However, these are not normally considered ‘primary’ content a user comes to a site to find.
As I argued above, even users who are uncontrolably bad at understanding website functions have enough sense to know that if one ‘element’ reacts to a particular action, that doing that particular action on the same element should cause the same result. Thus, users would not find it unexpected or confusing to end up on the same page by clicking the same link. In fact, that’s what they *want* to happen and taking that away, and particularly on just one page for one item, can be both over kill on programming and a possible user experiance fault.
I would be interested in some study research regarding this idea though.
Cheers,
John
Personally, when I go to a website and the page links to itself I don’t really mind nor does anyone I have ever talked to. I think it is better to keep the same navigation throughout the site. Like the author suggested in this article where you take away a link that would confuse the user even more.
I think the best way to tell the user where they are is just include the title the same as the link they just clicked.
A while back, I created a website with a menu that disabled any self links. I got my non-techie wife to test it out and she actually complained that there were no self linking links on the menu. I think she’s been trained by the majority of websites that use self linking. To her it’s more user friendly with self linking.
It seems that many, if not most, people here share my sentiments on ‘self linking’.
To me it is most important to maintain a consistency of function in navigation schemes. By removing functionality, i.e. stopping a link doing something you break the consistency of your scheme.
I read the ‘don’t link a page to itself’ rule at alertbox and found myself greatly at odds with it. Agreed, there should be a clear indication of where you are in a site. Use breadcrumbs and styling. But breaking consistency of function seems counter-intuitive.
The main, emotive topic of this particular discussion is one that started out as perhaps with a grain of truth but it has since snowballed into a ‘fact’. I’d argue that it’s a real fact at all.
There will always be some users confused by some aspect of web usage. Even rats can learn cause and effect (press button x and this happens, button y and something else happens). Most users (granted, not all users) will catch on pretty sharpish.
Consider your television set.
When you are watching Channel 5, does the ‘5’ button become disabled? Can you reselect the channel?
Have you ever heard of this being a cognitive challenge?
No doubt it is for some TV viewers, but do they need to be catered for by overcomplicating things for everyone else?
Perhaps that sounds a little harsh, but I hope the point comes across.
One of the posters posted the following link: http://industries.phloe.net/
While it does show what he was saying it misses one key thing. In order to go from say Info to Links… I have to go back to Home first. 2 clicks where it should be 1. It really breaks up your navigation and is different from what users experience hence there is some confusion.
Thanks for the article. I also miss the “Where have I been” part, since this is covered in the introduction, but not in the examples given. A clear concept on this would be a good idea.
I also don’t agree on the “don’t link to the page you are on” thing. I’m so used to click on the logo for the home page that I would be confused if it does not link to the home page – even if I am on the home page.
But I realized that on one of my pages I have a color inconsistency with the menu, so the article was helpful for me. Thanks again.
I think it is ok to link with the same page as long as you let the users know that they are on that page already, like the use of the visited, or change of colors, etc. Because there really are times when they just want to refresh the page. Plus, like one other guy said, it is just overkill to focus on something as little as linking to the same page when you got a bunch of rules to code.
On my site, I have implemented something of a compromise.
I have my navigation set up so that if you are on a section’s index page, it sets the title of the navigation to “You are Here.” This allows people who are expecting a link to have some reason why it is not available; that there is no reason to click there currently.
Similarly, if someone is deep into a category–let’s say Services–the title becomes “Services Home,” rather than “Services.” This lets the user know that while they are in the services category, they not at the services index page.
To answer the question “Where am I?”, there should be a link to the home page on the home page–as long as it’s shown in an active state. This also provides a consistent location for the “Home” button as the user navigates the site.
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.
Does anyone have any methods or links to share??
I think a bigger problem with linking and usability is linking to the same page using different titles.
The last point about what to include in global navigation is good food for thought 🙂
I personally don’t like navigation that disables self links. It makes me think that something is broken. I like it when the navigation changes like the A List Apart navigation, to show that you are in that section or page, but with a working link. I like with the Television metaphor. The Television set tells you that you are on channel 5 but you can still select channel 5. Of course these are my personal opinions.
I would like to know if anyone has done a recent usability study that shows that self links confuse users.
Hi Megan,
To see how I implemented a consistent navigation scheme, check out my site, “Katz Web Design”:http://www.katzwebdesign.net
Greetings fellow web designers! Thanks for all the thoughtful responses. Alas, I have no studies, other than my 11 years of interactive design experience, to back up what should be this patently obvious observation: Linking to the page you’re on confuses users.
Maybe it doesn’t confuse YOU because you do this every day. So if you’re making a site that’s only for you and those like you, by all means, do whatever you want.
But if you’re making a site that you want to reach a larger group, you have to remember that you are not your audience. And, lest we get caught up in a “users are stupid” debate, of course they are not. Web designers, on the other hand….
I challenge each and every one of the posters here to sit down with a less sophisticated user and watch them interact with the web. It could be a parent or a friend. Watch the focus on their face as their mind grapples with the very idea of hypertext. (The idea of clicking something to go to a new page was new to all of us at one time.)
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.
This is a textbook Bad Experience. Let’s stop rationalizing what’s convenient in code, and what we’ve gotten used to just because we do it every day, and start looking out for our actual users.
There are very few hard and fast rules in my internal web design handbook, but this is at the top of my no-no list.
Never, ever link to the page you’re on. Your users will thank you for it.
bq. I have no studies, other than my 11 years of interactive design experience, to back up what should be this patently obvious observation
That’s quite an arrogant statement.
I have 11 years of interactive experience as well and I have to go with the 2/3s to 3/4s of the people here who disagree with your assessment. The problem with self-linking causing confusion is the same with linking in general… and that’s when a disconnect exists between the link description or button text and the content of that linked page.
Using your Flickr example, the problem there isn’t the home button, but rather that the page the home button links to looks nothing like a homepage for Flickr.com (if you’re a registered user). Since the homepage is so personalized and looks like a user profile page or something from the “You” section, users will likely click on the home button more than once expecting far broader content to appear. I know that that confused me the first time I used Flickr.
While changing the look of the home button or making it disappear on the homepage might stop some users from clicking on it a second time, that does nothing to address the fact that they’re taking a look at the content and assuming they’re on the wrong page.
Personally I think linking to the current page is perfectly acceptable to keep the whole navigation bar consistent (no gaps) as long as the current page is highlighted, users should not get confused.
I, like many of the posters, would definitely like to see some studies done on this. I would also like to see some real examples of a heavily trafficked site that has actually failed (meaning that a large number of users could not navigate to a major portion of a website) due to a failure of your test. Also, when does it become the responsibility of the user to acquire a basic level of understanding of the many types of web navigation. I know my grandmother would have trouble with any navigation system, but is this the designer’s fault or does my grandmother need to educate herself a little more and not expect to get it right off the bat.
Having links on a page that point to the current page is one of Jakob Nielsen’s “Ten Most Violated Homepage Design Guidelines”:http://www.useit.com/alertbox/20031110.html
Also, it was listed as a “Web Blooper of the Month”:http://www.uiwizards.com/wBloop8.html in July 2002.
Both guidelines are based on the authors’ extensive user testing experience, but neither one provides statistics.
There’s more discussion in the “CHI-WEB archives”:http://listserv.acm.org/scripts/wa.exe?A2=ind0511a&L=chi-web&F=&S=&P=391 and in “two”:http://www.accessifyforum.com/viewtopic.php?t=3990 “discussions”:http://www.accessifyforum.com/viewtopic.php?t=4032 in the Accessify Forums.
Kirk: Thanks for the helpful links! This officially marks the first time Jakob Nielsen and I have agreed on anything. Hold me, I’m scared.
Here’s one more: In 1999, Cheskin did a study on “Building Trust in Digital Environments”:http://www.cheskin.com/view_articles.php?id=17 . One of their conclusions was that navigation was a major way people determine the trustworthiness of the site. Navigation what was clear created trust — navigation that was confusing destroyed it.
But look, studies are only so helpful. In my experience, people generally ask for studies when they disagree and are looking for something to back it up. It’s okay to disagree, but just because there isn’t a directly applicable study doesn’t make my essay wrong. It just means we’re early adopters. The academics will catch up eventually.
And Mike: Sorry if my last comment came out sounding arrogant. I was just trying to say I’ve got a fair bit of experience here, but of course everyone here probably does. I’m pretty sure there’s a study somewhere showing how easily tone can be misinterpreted in digital communication.
bq. In my experience, people generally ask for studies when they disagree and are looking for something to back it up.
Yes, I agree, but you make it sound as if this is a bad thing. Studies can provide evidence.
bq. It’s okay to disagree, but just because there isn’t a directly applicable study doesn’t make my essay wrong. It just means we’re early adopters. The academics will catch up eventually.
When you imply to your readers that your adopted method is right (by way of saying that widely used systems are wrong), then, for me your essay fails it’s main objective. If you were to present your experience in a way that showed how you have researched (with some type of experiment) this logic and have found it more successful to end users, then that would be different.
I feel like the goal with article was to prove everyone else wrong rather than showing the logic behind a method you feel is right.
Most of the logic in your argument is sound. I think a great way you could have gotten this across would have been to compare a site as successful as Flickr to one as equally as successful you felt got it right. That type of study sells itself.
bq. In my experience, people generally ask for studies when they disagree and are looking for something to back it up.
Yes, I agree, but you make it sound as if this is a bad thing. Studies can provide evidence.
bq. It’s okay to disagree, but just because there isn’t a directly applicable study doesn’t make my essay wrong. It just means we’re early adopters. The academics will catch up eventually.
When you imply to your readers that your adopted method is right (by way of saying that widely used systems are wrong), then, for me your essay fails it’s main objective. If you were to present your experience in a way that showed how you have researched (with some type of experiment) this logic and have found it more successful to end users, then that would be different.
I feel like the goal with article was to prove everyone else wrong rather than showing the logic behind a method you feel is right.
Most of the logic in your argument is sound. I think a great way you could have gotten this across would have been to compare a site as successful as Flickr to one as equally as successful you felt got it right. That type of study sells itself.
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!). Also if your print styles add textual URLs then this information is needed.
Kirk, I’m glad someone linked to those articles. ‘Pages That Link to Themselves’ also made Jakob Nielsen’s “Top Ten Web Design Mistakes of 2003”:http://www.useit.com/alertbox/20031222.html .
I’m surprised so many people have questioned this rule. (It was a bit poor not linking to supporting material though.)
I simply can’t see a valid benefit of self-links in most cases. It’s less work, sure. But that’s laziness. The self-link as a refresh button is an acceptable exception when labled as such (Jacob states this).
Combine self-linking pages with visited links that don’t change colour and you’re begging your visitors to go in circles.
The idea that breadcrumbs, page titles and other navigation elements will prevent people from being confused assumes those elements are always visible and that the visitor will consider them before clicking. What if the user has scrolled half-way down the page?
I consider best-practice to be: if you’re on the page, leave the link’s text in the navigation* and change its appearance to make it clear it’s not a link. Exactly what the author suggested.
* Removing the item altogether is confusing because you can no longer see where you are just by looking at the navigation.
P.S. Regarding the TV metaphor. Yes, when I press the button to select a channel, that button remains depressed. I’ve never tried to change the channel to the one I’m currently on.
Once again I am foiled by ALA’s sneaky formatting (that doesn’t show up in the preview!).
The bold line, ‘and change…,’ should *not* have been bold. I had placed an asterisk. The following paragraph, ‘Removing the item…,’ is the note that goes with it.
“people generally ask for studies when they disagree and are looking for something to back it up.”
Really? Well I think the onus should be on the person making the original assertion to do the backing up. You claim that the navigation on, for example, A List Apart confuses users. It doesn’t confuse me, or you, or anybody else reading this. In the absence of a study, I challenge you to name one person who is confused by it.
Just because Neilsen said it once and various people have repeated it since doesn’t make it true. Users are less easy to confuse than you think.
That’s not to say that a self-link couldn’t be confusing or irritating. If it’s not clearly identified as the currently selected option (as it is in the ALA design) then your assertion may (it seems to me) have some merit. That’s a long way short of saying no nay never to all self-links under all circumstances.
Sure, maybe it’s lazy to use a static SSI file rather than coding out the self link in each page, but I’d prefer to think of it as deploying time more effectively on things that really matter.
Like, erm, reading ALA…
Let’s try this the other way. In my article, I talk about the link ON the Flickr homepage TO the Flickr homepage. (Alas, it only appears for those logged in. If you don’t have an account, just imagine a big blue “Home” link that links to the homepage that links to the page you’re already on.) I asked: What could that link possibly do besides confuse the user?
I challenge anyone to name one positive reason to include that link? And “for consistency across all pages” is not a good answer, because you could (and should) solve that problem by leaving the “Home” text exactly where it is, just without the href on it. I’m asking specifically about the link itself.
Feel free to include any relevant studies.
Anyone? Bueller? Bueller?
“For consistency across all pages” is a good answer. Yes, you can solve the presentational affect of styling the link without the use of an anchor element, but the href attribute has a behavioral effect in that it functionally does something. Removing the behavior that the user expects is counter productive (similar to the back-button problem that people have found with AJAX applications).
And I’d have to agree with everyone else who asserts that it is on the onset of the person making the claim that is counter to the norm to prove while they are wrong. As it stands, this issue is at best a matter of opinion.
bq. I am wondering if this is based on the opinion of the author or is this based on actual usability research?
I have seen too many people click on an active link to the current page – sometimes repeatedly – and get confused by the result. I’ve been guilty of it myself at times!
The worst example I’ve seen in action was the BBC news website over WAP – a huge list of menus, including an active link to the current page – it took several pageviews before we twigged we hadn’t got to any content…
On the topic of “Self-linking” home pages. What if the home page has content that changes over time and the user does not want to trust their Refresh button. (Oh, say for something that POSTED to the home page, like log-in) I think self-linking can be ok, if the purpose is to get a fresh copy of the current page, but it should be relatively obvious that this is what will happen. Also, sometimes, I’m not certain I’m on the home page and having it take me to there when I’m already there just teaches me that.
My breadcrumb problem is with database driven sites. Taking my spell database as an example, you can find a D&D spell in one of many ways. You can look it up alphabetically, by class, by some attribute, or even using a search page. How do I represent this in the breadcrumbs? The spell may link to another spell or game rule. Is the spell you came from something that should remain in the crumbs, or should it replace the one you just came from? Should I use the same parent page, or find some insane way to track where each click came from and somehow remember multiple threads a user is doing. (Two windows open at the same time with the same cookie looking up two different spells in two completely different ways?)
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.
IMarv
bq. When you are watching Channel 5, does the “˜5′ button become disabled? Can you reselect the channel?
If there is an indication on the TV that you are watching Channel 5 then maybe it’s best that the channel doesn’t change. Why would you want to change channel to the one you are already on?
I suspect that with most TVs, it would not be practicable to disable the ‘select current channel’ option, especially as for most systems, you need to type in a 2- or 3-digit number.
I still fail to see any useful purpose served by following a link to the current page that is not better served by the refresh button (which won’t lose your place on the page, and will be more likely to fetch a fresh copy).
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.