CSS Fast Nav: Because (perception of) speed matters!

April 9, 2010, 9:04 pm · 7 comments · Filed under: CSS, JavaScript, Web Development

There must be 80 million tutorials for turning unordered lists into pretty navigation using CSS. This is not #80,000,001. Here, I focus on one detail that often gets overlooked: how to give the user the perception that her click had an immediate effect. In this post, I borrow a little inspiration from Apple.com and show you how to give your site fast nav.

Jump to article

I am not a designer. I told the client that. And yet, I still found myself spending my week putting design around their simple marketing website. Not being a designer, I drew, um…inspiration from the masters of UX.

Click around the top nav on the Apple website. You’ll see a hover effect on the nav items, but also, when you click, it looks like the item gets pressed in.

That’s good. It makes you feel like your click did something. But, notice how the nav item goes back to the “at rest” state while you’re waiting for the next page? The illusion of speed is broken. We can do better!

Now, click around my demo page. (View source, too, because I’m not going to go through the whole thing line-by-line and explain it. Most of it should be pretty straightforward. Feel free to ask questions about it in the comments if you find anything frightening.)

In case you missed it, here’s a link to the demo page.

Again, you should see a hover state when you mouseover the nav items. And, you should see the nav item look depressed when you click on one (don’t worry, we’ll get him some counseling or something). The difference between my nav and Apple’s is that mine sticks in that pressed-in state until the new page loads.

That’s the point I want to focus in on, like a frickin’ laser. It’s how to make your nav feel really fast. It’s not actually any faster, mind you. It just feels faster. Faster—whether real or perceived—makes users happier.

The trick? Make that nav stick. Frickin’ laser!

Update (10 Apr 2010): At Sergey Chernyshev’s request, I’ve added a demo page without CSS Fast Nav for comparison purposes. Not as spiffy, don’t you agree?

Rocket scientists (I am not making this up) have found that human speed perception is contrast dependent. The following is excerpted from the above-linked research abstract (which is all I read of it…I’m no rocket scientist):

A moving grating is judged slower than an otherwise identical grating of higher contrast moving at the same speed. However, the uncertainty in this type of speed judgment is largely independent of the contrast ratio. … [T]his effect appears robust to changes in spatial frequency, temporal frequency, and even absolute contrast.

What does this mean? Does it mean a zebra will appear faster than a horse going the same speed? I have no idea.

In any case, back to the subject at hand, most CSS nav has the following 3 states:

• Selected - for the current page
• Hovered - for whichever item is currently under the user’s mouse
• At rest - for everything else

HTML for nav these days typically looks like the following:

<!-- HTML 5 -->
<nav>
  <ul>
     <li><a class="selected" href="#">Home</a>
     <li><a href="#">FAQs</a>
     <li><a href="#">About</a>
     <li><a href="#">Contact</a>
  </ul>
</nav>

And, the CSS might start with something like this:

/* CSS */
ul {
   list-style: none;
}

li {
   display: block;
   float: left;
}

li a {
   display: inline-block;
   background: #999;
   color: black;
}

li a:hover {
   background: #666;
   color: #ccc;
}

li a.selected {
   background: #333;
   color: white;
}

Fast Nav™ adds the following 4^th state (no, “Fast Nav” is not actually trademarked, that was just for effect):

• Active - for an item that has been clicked

To get that 4^th state, the obvious thing to do would be to add the following declaration to our CSS:

/* CSS */
li a:active {
   background: #333;
   color: white;
}

That’s not actually enough. The problem is that the request for the new page doesn’t fire until the user has released her mouse. So, there is invariably a noticeable lag after the nav has gone back to the “at rest” state and before the next page loads.

Not to worry! We can add a little JavaScript to get the behavior we want. What we’ll do is, when the user clicks on a nav item, set it to our selected state by adding the “selected” class name. This will “lock” the nav item in the active state in perpetuity or until the next page loads, whichever comes first (if you’ve surfed the web over dialup lately, you know what I mean).

Here’s some code to do that:

(document.querySelector('nav > ul'))
   .addEventListener('click', function (evt) {
   evt.target.className = 'selected';
}, false);

That’s the code I use in the demo, but you should know it only works in recent, standards-compliant browsers (Safari, Chrome, Firefox, Opera). If you stubbornly insist on catering to the other 54% of web users, the jQuery equivalent might be something like this:

$('nav > ul').live('click', function (evt) {
   $(this).addClass('selected');
});

So, there you have it, CSS Fast Nav. I know what you’re thinking, “That was a helluva lot of words to tell me just to set the nav item to selected when the user clicks.” Sorry if I wasted your time. I guess I just got excited.

Short URL to this article:
Tweet this article!

7 comments

that’s pretty neat, good stuff Andrew, thanks for sharing!

★ Posted by: Stoyan · April 9, 2010, 11:25 pm

Pretty groovy! Reminds me of those old radio buttons (those on actual radios..).
Maybe CSS4 will add a pseudo selector for this, so it works without JS. ;-)

★ Posted by: Daniel · April 9, 2010, 11:54 pm

You almost had me … for a moment… with this → “Fast Nav™” :P

Btw, i used the Fast Nav™ on a client’s website last year - the menubar for which is a lot like Apple’s.

I have always felt that tiny visual feedback, although sounds trivial and useless, is important while we interact on the web. I have noticed it has direct impact on our moods. :)

Thanks for the cool article. And, your site is beautiful. Loved its design. :)

★ Posted by: Kamal · April 10, 2010, 4:14 am

That is subtle but cool. I had to visit Apple as a reference but got it right away. Clever Andy.

★ Posted by: Kevin Potis · April 10, 2010, 9:20 am

It works great! We need more of these psychological magics! ;)

I think it’ll be great to see the “standard” version of the same site in comparison so people can feel the difference for themselves.

Sergey

★ Posted by: Sergey Chernyshev · April 10, 2010, 10:36 am

Thanks, everyone, for your comments.

@Sergey, good idea! I’ve added a link to a non-fast version of the demo page.

★ Posted by: Andrew Hedges · April 10, 2010, 11:09 am

Yep, it works very well in comparison.

I’m planning to add this little trick to ShowSlow’s menus (I switched away from YUI tabs which did it for me, but were sort-of pointless just providing menu interface)

★ Posted by: Sergey Chernyshev · May 17, 2010, 10:41 am

Comments close automatically after 90 days.
Still have something to say? Drop me a line!

Possibly related posts

• How-to recover from checksum mismatch errors in SVN January 25, 2009
• Dude. Mikeyy can’t even spell his own name. April 12, 2009
• Stupid WebKit Tricks July 19, 2009
• Animating your iPhone web application May 29, 2009
• Defeat comment spam? Yes we can! December 26, 2008

Home · Blog · Folio · Resume · Widgets · Coding experiments · The Kids Page · Contact