Taking Your Talent to the Web | 5
Taking Your Talent to the Web
Scrolling and Clicking Along
Some "experts" will inform you that users don't click. They also will inform you that users don't scroll. If users never clicked or scrolled, nobody would actually be using the Web. Of course users click. (How else would they link from page to page?) Of course users scroll. (How else would they, uh, scroll?)
Nobody clicks more than they have to-hence the so-called "Three-Click Rule," described later. And nobody scrolls for fun and profit. Visit an amateur homepage and see how excessive scrolling drags its nails across the blackboard of the user's experience.
The previous section, "Hypertext or Hapless Text," discussed text chunking and offered methods to keep scrolling to a minimum, but this does not mean that every web page should be limited to one or two paragraphs of text. Particularly when presenting in-depth articles online, text chunking has its limits. Users would probably rather scroll through five longish pages of text than click through 25 short screens that present the same information. Develop a case-by-case, site-by-site sense for these nuances, and you will find your skills in demand.
Every newspaper is designed so that the most important headlines, photographs, and stories appear "above the fold" (where the paper naturally folds in half). As shown in Chapter 2, vital information is best served in this vital space above the fold. When links to the site's most important content appear within the first 380 pixels of vertical space, even visitors saddled with small monitors can find what they seek without scrolling. Once enmeshed in a story that engages their interest, visitors will scroll down a few screens to continue reading.
How many screens of text will readers scroll before wearying of scrolling and seeking the blessed release of clicking to the next page? Three. Just kidding. Only a pseudo-scientist would pretend to know. As web designers, we use our best judgment on each site. That, after all, is what we're getting paid for.
One reason frames are popular is that they allow web designers to keep the interface onscreen in a consistent location, even when the user is scrolling up or down like a madman. For instance, a horizontal menu bar at the top (www.microsoft.com) or bottom (www.the-adstore.com) of the screen will stay in place no matter how long the page may run and no matter how much scrolling the user performs. Frames are on their way out (in W3C parlance, they have been "deprecated"), but you can achieve the same effects with CSS, a web standard.
Inexperienced designers sometimes create pages that require the user to scroll horizontally. This is almost always unwise. Except at certain "art gallery" sites, users will almost never scroll horizontally. Such interfaces are inconvenient and often appear to be mistakes rather than deliberate design decisions.
To understand why horizontal scrolling is an evil spawned from the festering loins of the incubus, imagine that you have to ... turn the page to finish reading this ... sentence and then fold the page back ... to read the next line of ... text, which bleeds...backwards across the gatefold again, forcing you to ... turn the page, and then turn ... it back again in order to begin reading the next line.
No print designer would lay out book pages that way, but inexperienced web designers do so frequently, whether from misguided creative impulses or because they've made assumptions about their visitors' monitor sizes. This is another reason that Liquid Design (detailed in Chapter 2) comes highly recommended; it always fits neatly into any user's monitor. It's also the reason that clients, designers, and IT departments that set "monitor baselines" of 800 x 600 are blockheads. If even 5% of the audience is expected to scroll horizontally simply to read marketing copy, the client or web agency is effectively sending millions of potential customers to a competitor's site.
STOCK OPTIONS (PROVIDING ALTERNATIVES)
Users employ a variety of means to access the Web, including modern browsers, older browsers, nongraphical browsers, audio browsers, and non-traditional devices such as cell phones and PDAs. If the goal of a site is to accommodate as many visitors as possible, then it is critical to provide alternative forms of navigation.
Imagine that you have designed a lovely, frames-based site and that your navigational menu exists in its own frame. A visitor using a text browser enters the site. He cannot see frames because his browser does not support them. You, however, have thoughtfully included a <NOFRAMES> tag in your HTML frameset. Inside the <NOFRAMES> tag you cut and paste the main content from the home page, along with an HTML-based text menu. The visitor can now use your content, even though he cannot see your frames-based layout. (Again, we remind you that frames are on their way out anyway.)
Options and alternatives increase the odds that someone will actually use what you've designed. Larger web agencies employ quality assurance (QA) staffs who spend all day hunting for online porn. Better QA staffers search for flaws in your design by testing it in a wide variety of old and new browsers on various platforms. Do not hate these site testers-they are your friends. Build alternatives into your navigational scheme, and you will win their admiration and more, importantly, that of your site's audience. The mechanics of including alternate forms of navigation will be covered in Chapter 9, "Visual Tools."
HIERARCHY AND THE SO-CALLED THREE CLICK RULE
To accommodate the need for rapid access to information, a web designer creates layouts that immediately reassure the visitor that she has "come to the right place." Brand-appropriate design accomplishes some of this purpose. A clear hierarchical structure does the rest.
It's widely agreed, even by people who are not idiots, that web users are driven by a desire for fast gratification. If they can't find what they're looking for within three clicks, they might move on to somebody else's site. Hence the so-called "Three-Click Rule," which, as you might expect, states that users should ideally be able to reach their intended destination within three mouse clicks.
With the average site offering hundreds if not thousands of items and options, the Three-Click Rule sounds preposterous. But it is actually fairly easy to achieve if you start by constructing user scenarios before you begin to design the site.
What will people who use this site want to do? Where will they want to go? Based on those scenarios, the site is structured into main areas of content. These are then organized into no more than five main areas. (See the next section, "The So-Called Rule of Five.") Submenus in each of the five main areas get the user close enough that he or she is at least reassured by the third click, even if it takes a fourth click to get to the final, desired page.
Let's play it out. You are designing a site for people who live with house cats. In the scenario portion of development, the team agrees that cat owners might want to read about Mister Tibbles' genetic heritage. In the top-level hierarchy, you create an item called Breeds. When Aunt Martha clicks Breeds, the site offers Long-Hair, Short-Hair, Tabby, and Exotic options. A second click takes her to Short-Hair, a third to Mister Tibbles' particular breed.
Like all so-called "laws" of web design, the Three-Click Rule is a suggestion, not an ironclad rule. It is, though, a suggestion based on the way people use the Web, and, particularly for informational and product sites, you will find that it works more often than not. If nothing else, the rule can help you create sites with intuitive, logical hierarchical structures-and that ain't bad.
Created: May 07, 2001
Revised: May 07, 2001