Don't Break the Menu

0 comments | Posted: 6 November 05 in Tutorials, by Nathan Smith

Orange Juice Fiasco:

Quite some time ago, I had dinner with my girlfriend (now my wife) at a small restaurant in our small town. While I cannot recall what I ordered to eat, I will never forget the beverage: orange juice. You might be wondering, “What was so special about the orange juice?” Nothing, and that’s just the thing.

I placed my order for a main dish and a glass of orange juice, only to be informed that they needed to send someone running to the nearby grocery store to buy some. To me, it seems like if you are going to put something on the menu, then it should be available when the customer is ready to order it. This restaurant is now out of business, by the way.

I use this story to illustrate the confusion that is caused when something that is on a menu is not accessible in the way it has come to be expected. If I go to a diner, I expect that the food and drink will be in-stock. The whole reason you go out to eat is for convenience. If someone has to go get these items from elsewhere when I order it, then it throws off the whole dining experience. This is quite a common occurrence with websites as well.

Web Similarities:

Attack of Flickr

Many a time, I have been clicking along and finding my way around fine on someone’s blog: from News, About, and then to Photos. Suddenly, I am whisked away to a Flickr.com photostream, and gone is the familiar menu I had begun to love. By now, this has happened so frequently that if I see “Photos” on a menu, I just assume that it will take me to Flickr. Yet, I still don’t think it should be this way. This is especially true if you already have actual Flickr photos displayed on your site. It’s overkill.

Desperate for Fan-Mail

Another common occurrence is the “Contact” link that does not take you to a page, as all the other links do, but instead launches your default email application. While having a mailto:name@example link is occasionally helpful, it surely does not belong as part of the navigation system. As a general rule of thumb, if you are going to place an auto-launching email link in your page, it’s best to do so using something that looks like an email address.

Eye-Candy Belly-Ache

Another problem I’ve seen as of late is the XHTML website that uses Flash for navigation. To me, this seems to defeat the point of having XHTML/CSS for layout, which is function and accessibility. Needless to say, if the browser considers all of your navigation to be a “movie” then it will not be read-aloud by screen-readers and is inaccessible to blind users.

Worse yet are sites that are designed entirely in Flash, as this makes even your content inaccessible to screen readers, not to mention taking a ridiculous amount of time to load. It also makes it impossible to bookmark the content section of a site. Most sites with long Flash intros usually do not get very many visitors to the intro page, as people tend to bookmark the section with actual, frequently updated content.

Sure, 2 Advanced is visually impressive, but it is not one I visit very often, because the information available to read is simply not worth waiting for.

Printing Press

Lastly, but certainly not least is the “I know how to make a PDF” aka “I just bought Acrobat” link. You might not have seen many of these floating around on the web, but alot of big institutions are quite fond of them. This is especially true of those that deal mainly in print. While I appreciate the desire to get things pixel-perfect, the print-people must realize that they have made a jump into a new medium. As such, there are certain rules.

One such rule, which might just be a personal soapbox, is don’t link to PDF files directly from your navigation menu, especially if you don’t label it as a PDF. Even then it can be quite confusing to the end-user. I know that Macs have a nice preview program that easily handles them, but for Windows users, it launches Adobe Reader which just about cripples any browser. I have Firefox set to auto-download PDF files, for just this reason.

For instance, when I buy a book, I expect that when I turn to the table of contents and look something up, I expect to see that chapter when I turn to the corresponding page. It would be very disorienting to turn to said page and have content from a different book located there, or to suddenly see completely different typography than the rest of the pages.

In Summary:

Likewise, when using a menu system on the web, you are making an unwritten statement to the user: “The links in this section are for navigating to different parts of this website,” period. When you have a navigation system that breaks these rules, you compromise the trustworthiness of your own website, or at the very least call into question the logic of your layout.

Now, this does not mean that if your site breaks any of the above rules this automatically makes it a bad website. There are plenty of sites out there that I still frequent because of their other redeeming qualities. However, if you want to ensure that your visitors have a pleasant experience, it has to start with the ease of navigation.

Discuss This Topic

Comments closed after 2 weeks.