Practical Web Design - Fundamentals of Web Design

Unusable Back Buttons

The Back button on the browser is the second most used navigational tool after the hyperlink. Nielsen calls it "the lifeline of the Web user" and points out, correctly enough, that "users happily know that they can try anything on the Web and always be saved by a click or two on Back to return them to familiar territory." However, some Web designers yank the Back button away from us. Either they have all of their pages open in new windows, they employ an "immediate redirect" that effectively cripples the Back button by sending the surfer back to a page that bounces them forward again (very, very annoying), or they prevent caching so that using the Back button forces a new download from the server.

Nielsen really doesn't like links that force a page to open in a new window; I'm not so adamant on the issue. There are times when it's appropriate and desirable for a link to open a page in a new window, though personally, I prefer to make my own choice by right-clicking a link and choosing the "Open in New Window" option when I want it in a new display. It is true that littering a surfer's machine with one new browser window after another can confuse and annoy a surfer, especially a novice, and can make it difficult for the inexperienced surfer to navigate their way back along their trail, especially one who is viewing your site in Full Screen mode. Multiple browser windows also eat up system resources, and can even crash a surfer's machine. And don't forget that folks who use Mozilla, Opera, and any number of Internet Explorer add-ons have their own "tabbed" navigation bars that let them view multiple pages in a single window.

The best advice I can offer is to think long and hard about why you're having your links open in new windows. If you can't come up with a good reason, then stick to having your links come up in the same window, and let the surfer decide how they want to view your linked pages.

Long Download Times

Still a tremendous problem on many sites. Originally the cause was large graphics, or large numbers of smaller graphics, that prevented a page from displaying. Later on the problem manifested itself in complex table structures (particularly the page that is contained completely within a single huge table, requiring the whole thing to load before anything displays), sound files, Java applets, and other Web features that slowed a page's loading time. Slow servers are also a common culprit.

Whatever the reason, most surfers won't wait more than a few seconds for something to come up. They don't care to wait for that cool Java effect or for your host's slow server to do its thing; if something doesn't come up almost immediately, they're clicking out to find something that does come up. This is doubly true for the legion of Web users that are stuck using dial-up connections.

Fancy Menu Options

The DHTML and JavaScript menus that "extrude" or pop-up from a single link when mouseovered can be very striking and effective, but if they block the view of your page's content, then they become as much of a hindrance as a purposeful addition. Be careful where you position them, and test them thoroughly on different browsers (and remember, older browsers may not render these properly, so don't rely on these as your only navigational choice).

Complex URLs

This used to be a problem in the wild and woolly days of the Web. Today many users hardly pay any attention to URLs, letting their browser handle the task of remembering a bookmarked site and relying on features such as IE's AutoComplete to deal with long URLs. Most sites also have some kind of navigation support as well, so remembering a long URL isn't the chore it used to be. Still, shorter is better.

Orphaned Pages

These are pages that don't have navigational links in their content -- once you're there, you can't get out without using your "Back" button, assuming the page didn't open up in a fresh window, or worse, you're forced to type a fresh URL. Again, not nearly the problem it used to be, as most experienced surfers know how to lop off the end of a problem URL to get back to the home page. But again, it annoys experienced users and absolutely befuddles novices. Remember how dependent the less experienced user is on the "Back" button (see above) as well as on big, friendly buttons that take them back to your home page with a single click. Besides, "orphaned" pages are just bad design.

Non-Standard Link Colors

Okay, sometimes we get sick of the usual color scheme of blue-red-purple for hyperlinks. The thing to remember is that it's a standard that everyone recognizes. If you're going to change your site's link color scheme, go ahead, but remember, your scheme should be as easily recognizable and usable as the standard. Most Web designers aren't enamored of the traditional underlining of links, and understandably so -- it looks untidy, it can be disruptive while reading through large blocks of text, and, well, we just don't like 'em. It is, however, worth remembering that color-blind surfers often like underlined links, as do surfers who prefer text-only displays. It's also notable that underlining words that aren't links confuses many surfers. But get rid of the underlining if you like (it's the first CSS effect most of us learn).

Do remember, though, that links need to stand out somehow, and having them in a different color is usually the best bet. Few surfers set their browsers to ignore your link color choices in favor of their own, so most of us are at the mercy of your color choices. Be kind. Give us something distinctive that doesn't intrude. Also keep in mind that for the vast majority of surfers, a text block in blue means that it's a hyperlink; don't fool us by coloring non-linked text blue.

A few personal observations: I don't particularly like "mouseover" links that go to boldface (for example) when I hover my cursor over them. They make the text jump. However, when they're carefully designed, they can work very well. I really don't like links that are the same color as the rest of the text; I want to know a link is a link by looking at it. And I've grown tired of the links that are highlighted with a yellow (or red, or green, or whatever) box. Maybe it's just me, but I get tired of reading a page that looks like one of my college texts after I've taken the highlighter pen to it.

Non-Standard use of GUI Features

This includes the "radio" buttons that don't require the clicking of an OK button to take effect, the dropdown menus that sometimes require a Go button to function and sometimes don't, and so forth. There's no hard-and-fast rule to follow here, but keep in mind that consistency equals ease of use. In most cases, people like things to work in the fashion that they've grown to expect. Don't have your GUI features work differently than the accepted standards just because you can; make sure that your features work in an easily understandable fashion.

Sites that are Unclear as to their Purpose

What's your site about? Is it trying to sell me a car, giving me advice on fixing my computer, promoting your political viewpoint, or showing off your cats? Whatever it is, let the site visitor know immediately what your site is there to do. If they have to wonder what they're doing on your site and what your site is there to offer, chances are they won't stick around long enough to hunt down the answer. For commercial sites in particular, a one-sentence "tagline" that catches the first-time viewer's attention off the bat is an essential.

"Splash" Pages

These are the initial pages that typically load a single graphic or text block that require the visitor to "click through" to get to the main page. Personally, I can deal with splash screens if they're used in moderation and with style and grace, but the effect can become tiresome very quickly. Repeat visitors don't want to click through the splash screen time and time again; while some (not all) first-time visitors may not want to click through the doorway page to get to the content. And many visitors who come to your site through a search engine may miss the splash page altogether.

Nielsen calls splash pages "a sure sign of bad Web design;" I don't take such an absolute view, but they are usually an example of "too much sizzle and not enough steak." Probably the best caveat from my experience is the fact that when I visit a site that uses a splash page, I don't bookmark that page, but the "main" page behind the splash screen. And splash pages that use big, often slow-loading Flash displays are doubly troublesome. Navarro and Khan remind us that for a business, the splash page should act as "the storefront to your Website." It should invite the visitor inside, not chase them off.

Pages with No URL

Script-driven sites make it difficult to bookmark specific pages, instead requiring the repeat user to go to the home page and "start from scratch" every time they want to drill into the site's subpages. While there are instances where this is a necessity, it can put surfers off of returning to your site.

Misleading or Badly-Titled Bookmarks or Favorites

The standard for bookmarking is for a page to use the title from the META "Title" tag as the bookmark description. If a title is tremendously long and crammed with buzzwords and sales chatter, then the person who bookmarks the page won't recognize the page from the title and will have to rename it to something they find useful. And sometimes other pages "hijack" linked pages with their own titles when bookmarked -- a no-no in every sense of the word. If your title begins with "The" or "Welcome to...," then your page gets bookmarked under "T" or "W" with all the other pages that begin the same way. Your title should be short, descriptive, and useful in someone's bookmark listing.

Linking to Non-HTML Pages Without Warning

It's fine to link to a .TXT, .DOC, or .PDF file, but please let me know what I'm about to link into. If I don't have Acrobat Reader or a .DOC-friendly word processor installed, then I can't use the document to which you're sending me. And such a document loading into my browser may cause unlooked-for behaviors that can be confusing or even scary for a novice user. There's no problem linking to these documents, but warnings should always be provided. It's also courteous to offer links to the software that users may need, particularly in the case of Acrobat Reader.

Making it Hard to Contact the Site Owner

This is especially important for commercial sites. Every single page should have whatever contact information is appropriate: email addresses, names and postal addresses, telephone numbers, fax numbers, whatever. Don't just have a clickable graphic that says "email me!;" have the contact information plainly written in text. Someone who saves your page to disk or prints your page may not be able to click the graphic to find out the email address. The site's main URL should also be readily available on every page.