Practical usability tip #19: turn off current page links using CSS
19 November 2004
It made it in at number 10 for Jakob last year, so it must be a matter of importance: don't have a link to the current page. He tells you why, so I'll tell you how.
When you're dealing with a lazy programmer, they'll be loathe to dynamically change navigation items in the HTML because that means they have to take a nice static template and then actually code something – figure out what page they're on, put in some conditional statements to figure out what's an anchor and what's not, and then loop through some structures. It's all much easier if you just put a body class for each page.
Of course, then you run afoul of directive 10, because links remain clickable even if they're highlighted as the current page. But that's only a problem if users think that they're clickable. While introducing some visual differentiation for current page links reduces the likelihood of a user clicking on them, they still know that they're clickable and might well go ahead and do it. (Who knows why? they're users!)
One of the strongest feedback mechanisms for deducing clickability on web pages is the finger. You get the hand-with-pointing-finger icon over anything that's hot. Through the marvel of CSS you can remove the finger, keep the arrow, and the user is none the wiser that they can click. (The status bar might give it away, but I'll let you deal with that one.)
body.highlightClass #menuItem a:hover
Easy. Of course, this is no real replacement for removing the link from the HTML, but you're a lazy slob, so why do you care?
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout