Category list

Chapter 10. Presenting Page Elements

When the " Three-Click Rule" Wreaks Havoc

322 Should You Design for Scrolling?

Four Rules of Scrolling

329 Guiding Users, Step by Step

Tip: Beware of Magic Numbers

333 Keep Like with Like

Sloppy Formatting of Forms
Look at Me!

344 Satisfy Your Users' Expectations

347 Using White Space

A company has only a browser- size canvas on which to present its message on the Web. People garner their impressions of a Web site based on what they see at a glance, and there's no guarantee that that will be everything on the first screeneven items that are bold and flashing. Web users have learned through experience to expect certain items in certain areas and to ignore others. Understanding users' behavior and expectations can help you create layouts that satisfy them and make it more likely that they'll get your message.

Web designers must convey abundant information about a company or organization in a very limited space. Emphasizing the information that is of the highest priority to users is critical to attracting their interest. Conducting user testing will help you understand your audience so that you can match your site's design to its needs.

Common page layout mistakes include:

Page not structured in prioritized order
Interactions overly complex and don't offer guidance
Related areas not grouped in close proximity
Elements not properly aligned to create order
Elements not placed where people expect
Too many elements on page

Following usability guidelines for presenting page elements can help you avoid these mistakes.

When the "Three-Click Rule" Wreaks Havoc

The three-click rule espoused by some people states that any information on a Web site should be reachable from the homepage in three clicks or less. However, this has never been one of our usability guidelines.

In fact, we found that users' ability to find products on an e-commerce site increased by 600 percent after the design was changed so that products were four clicks from the homepage instead of three. Even with one more click, the revised design was faster and more manageable because users didn't have to spend as much time thinking about where to click.

The three-click rule seems intuitivea good way to respect users' timewhich is probably why it has achieved the status of usability folklore. However, it doesn't hold up in testing for one simple reason: What makes users give up is the total amount of trouble you put them through. Yes, each click is extra trouble, so longer paths are worse than shorter paths, all else being equal . But all else isn't equal because having to think more about each click and having a greater risk of clicking the wrong link creates trouble in itselfusually much more trouble than a simple extra click on an obvious link. Attempts to force a large Web site to fit with the three-click rule usually result in obscure and overloaded navigation systems.

Should You Design for Scrolling?

As we discussed in our dissection of user scrolling habits in Chapter 2, most users don't scroll most of the time. That's partly because most pages are not worth scrolling. And you can bet that users definitely won't scroll unless the first screen makes it clear that they're in the right place and it's worthwhile to read on.

Users tend to look smack in the middle of the page. If need be, they will also look to the left or the top to check out the navigation. They will rarely look all the way out in the right margin to check the scroll bar, especially if they don't think they will be using it. (This also explains why users rarely discover that a new window has been opened, even though in systems such as Microsoft Windows, this is clearly indicated by another tab in the taskbar.) People also tend not to look at the very bottom of the screen unless they think they have a reason to do so. They assume that items at the bottom of long pages are unimportant, so they don't scroll down very far.

You might argue that people should notice the browser scroll barit's right there! But remember, to effectively process information, people cannot pay attention to everything on the screen. They adopt strategies to help them separate useful from useless information, and home in on areas that give the strongest information scent, ignoring the rest. The less you put on the page, the more likely they are to see it.

Though the browser scroll bar says otherwise , the exaggerated white space at the bottom of the screen creates an "illusion of completeness"a term coined by our colleague Bruce "Tog" Tognazzini to refer to page designs that appear to be complete even though there is more invisible information available. Most people won't even notice that there are three more screens of information on this page.

www.grand-canyon.edu

In general, it's safe to design for limited scrolling as long as you show the most important information first. But some Web sites have taken cautionary advice about scrolling to the opposite extreme and made their pages non-scrollable. This can be damaging , leading to pages with only navigation and no content. Better to provide the right visual cues and context to make users see the value of scrolling. The placement of critical elements on the page can dictate whether people scroll or not.

The placement of critical elements on the page can dictate whether people scroll or not.

Four Rules of Scrolling

If people expect something to be in a particular place, they will not look for that item elsewhere or scroll to find it
If there's white space at the bottom of the viewable area of the screen, people usually assume that's the end of the page and don't scroll any farther, even when their browser scroll bar indicates otherwise
People interpret ad-like elements that appear immediately above the fold as the end of a page because ads are commonly placed in peripheral areas of the page
Placing indicators such as headers or content that can be seen just above the bottom of the screen strongly suggests that there's more content below

(Facing page, top) The white space and the graphics that are lined up horizontally across the screen make it appear as if it's the bottom of the page even though there's more important information below. People looking for the Corporate Info link might miss it because it's hidden underneath the viewable area, creating the illusion of completeness.

www. pepsi .com

(Facing page, bottom) Where would you go to find the calendar of events? There are multiple links to buy tickets but nothing about a full list of upcoming shows. The information does exist, but it takes four screens of scrolling to get there. Here the problem is not the illusion of completeness, because there's clearly more on this page. The problem is that the information below the fold doesn't seem relevant. If you're interested in taking your visiting aunt to a Mozart concert next week, you aren't looking to learn about the five-star subscription plan, which appears to be the type of information that will be found farther down the page.

www.artcenter.org

Corporate Overview on this site is not really an overview. The extremely long page doesn't optimize the use of hyperlinks . Don't give your audience a wall of text. Partitioning content into hierarchical pages is a more effective way of presenting detailed information.

www.pixar.com

After we took the screen shot in the previous figure, Pixar redesigned its Corporate Overview page. The new design is an improvement, but the copy could still use some editing, and the lack of formatting makes scanning difficult. To the site's credit, however, major sections have been truncated by navigational links, making the information appear more manageable.

There are situations when longer pages are better than short, fragmented ones; it's advantageous then to have highly related information together. Having a continuous article appear on one page makes the information feel more cohesive and mitigates unnecessary work. Scrolling requires less effort than clicking Next, Next, Next. Of course, you want to layer extremely long detailed content to utilize hyperlinks. This is what the Web is good for.

The Next link at the bottom of the bottom of the screen doesn't tell people what you'll get by selecting it. Does the article continue or does the page move on to the next article? The table of contents at the top right hand corner of the screen can help people navigate to specific sections of this article, but it's placed in the peripheral area of the page, away from where people look.

www.pcmag.com

Avoid cramming content into small scrolling areas. Requiring people to scroll in a tiny space is like forcing them to read through a peephole . Maximize the size of the scrollable area to reduce eye fatigue and make reading more enjoyable, especially if there's a lot of content. Another danger of having small scroll areas is that the scroll bar has the tendency to zip through too quickly, causing people to miss important information.

A small scrolling area like the one shown here makes reading uncomfortable. People in our test even tried to increase the size of the site to see more content.