Web Bloopers: 60 Common Web Design Mistakes, and How to Avoid Them (Interactive Technologies)

Blooper 17: Deceptive Duplicate Links

Having multiple competing navigation schemes is only one way for a site to have needless duplication. Many websites suffer from too much or misleading duplication of links. Although certain duplicates are okay or even desirable, gratuitous duplication inflates the perceived complexity of sites, wastes time, and can send users astray.

If two links look different and go to different places, they aren't duplicates; they are distinct. There are three types of duplicate links:

• Stealth duplicates look different but go to the same place.

• False duplicates look alike (or very similar) but go to different places.

• True duplicates look alike (or very similar) and go to the same place.

Stealth and false duplicates are potentially misleading. Except in certain standard cases (discussed later), even true duplicate links can raise questions in users' minds about whether they really go to the same place. Duplicate links of any type also make a site seem bigger and more complex than it really is.

Let's first look at examples of each type of link duplication. These are followed by an exercise to let you experience firsthand the confusion duplicate links can cause.

Stealth Duplicate Links: Look Different, Go to the Same Place

The primary problem of stealth duplicate links is that they imply the existence of additional pages or options that don't exist. Users can waste time exploring them, only to discover that their destinations are the same.

This can be seen in an example of stealth duplicate links from UBid.com (Figure 3.10). Clicking either of the first two links starts an email message addressed to the same place: UBid's Customer Care department.

Perhaps the two links are intended to be distinct someday, but for now they aren't and so are misleading. At the least, users may be confused that following one of these links causes both of them to change to the "already followed" color .

Figure 3.10: www.uBid.com (Dec. 2001)-On the site's Contact page, the two Customer Care links send email to the same address.

Stealth duplicates and other types can be found at Eudora.com, a website hosted by software and telecommunications company Qualcomm for its Eudora email software. The Eudora 5.0 download page has duplicates of several types (Figure 3.11):

• True: "Free Download" on the left and "Download Now Free" at top middle both go to www.eudora.com/products/eudora/download .

• False: "Download Now" at bottom middle goes to www.eudora.com/download , a different page than "Download Now Free" goes to.

• Almost false: "Upgrade Eudora" at top left, which might be expected to be the same as the download links, is not; it goes to www.eudora.com/email/upgrade .

• Stealth: The three links just under "Upgrade Eudora" ”"Email Software," "MacOS," and "Windows" ”all go to the same place: www.eudora.com/email .

Figure 3.11: www.Eudora.com (July 2001)-Duplicate links of several types.

Stealth duplicates are not always bad. Sometimes they serve a useful purpose: increasing the chance that visitors will find something the designer wants them to find. For example, Qualcomm obviously wants to guide visitors to its Eudora email page whether they use a Mac or a Windows PC.

However, stealth duplicate links can be misused: A cynic might rephrase their purpose as "tricking visitors into viewing certain pages." More importantly, there are trade-offs to consider even when stealth duplicates are used in good faith: They raise questions in users' minds ”"Are these the same?" ”and add complexity without adding functionality.

False Duplicate Links: Look Alike, Go to Different Places

Connectix.com provides an example of false duplicate links (Figure 3.12). The two links labeled "Home" go to different pages. The one at the top left goes to the Support home. The one at the lower left goes to the Answer Path home.

Figure 3.12: www.Connectix.com (Jan. 2002)-Two Home links go to different pages. Upper one goes to Support home; lower one goes to Answer Path home.

One might argue that it makes sense that the "Home" link under Answer Path goes to the Answer Path home. However, some people scanning this might not assume that the lower "Home" link is for the Answer Path because the link and heading are in visually distinct areas.

True Duplicate Links: Look Alike, Go to the Same Place

Even true duplicate links can be problematic . Figure 3.13 shows the home page of WisconSUN.org. It's a relatively simple site, with six content areas: About, Learn, News, Fund, Connect, and Contact.

Figure 3.13: www.WisconSUN.org (Jan. 2002)-Excessive duplication ” three copies of every link. Yellow headings are not links.

The repetition on this page is excessive. Some of the repetition is not links, as the yellow paragraph headings are just headings. But most of the repetition is duplication of links: Three copies of each link to the site's six content areas.

It's good to provide text-only versions of graphical links on Web pages, but the links in the middle of the page are not graphical. They are already text and as such don't need text-only equivalents elsewhere on the page. Even if they did, two text-only copies of each link is overkill.

A common way for links to be truly duplicated is to display them in both a navigation bar and the page's central content area. This form of the blooper can be seen on the Contact page of Rational.com, a developer of software-development tools (Figure 3.14). If links are on a navigation bar, they need not be ”and should not be ”duplicated in the content area. The next section describes a case of needless link duplication in an intranet web-application, and describes how the duplication was eliminated.

Figure 3.14: www.Rational.com (Feb. 2002)-Needless link duplication ” If links are on a navigation bar, they should not be duplicated in the content area.

Needless Link Duplication in an Intranet Web Application

A company was developing an intranet Web application for managing networks of Web servers. On the left of every page was a navigation hierarchy of all the components managed by the system: servers, network switches, Web service software, operator consoles, user accounts, among others. Users could expand and contract the hierarchy to see more or less of it. Some items in the hierarchy were categories of components; some were individual components.

The bulk of the browser window was devoted to the content area, positioned to the right of the navigation hierarchy. The content area displayed information about the currently selected item in the hierarchy. Selecting an individual component in the hierarchy displayed its status and settings in the content area, as expected. However, when a category in the hierarchy was selected, the content area listed links to the category's content elements, duplicating the links under the category in the navigation hierarchy (Figure 3.15).

Figure 3.15: Intranet Web application-Original page for executable images (xlmages) category displays links to subcomponents of the category.

The developers justified the duplication this way: "We weren't sure what to put on category pages and didn't want to leave them blank. And we thought some users might prefer to use those links anyway."

We redesigned category pages in the Web application to summarize the status of all components in the category, eliminating the duplicate links (Figure 3.16).

Figure 3.16: Intranet Web aplication-Redesigned category page for xlmages ” summarizes state of xlmages.

This "navigation hierarchy on the left and item details on right" design is a common design pattern for Web applications. When using it, a design rule to follow is, Category pages in the hierarchy summarize the category's state. Pages for individual components show the component's details.

Duplicate Links Make Users Stop to Think

An example of duplicate links not involving navigation bars comes from Microsoft.com (Figure 3.17). The link labels "FAQs & Highlights for Office 98 Macintosh Edition" and "FAQ for Office 98 Macintosh Edition" are almost the same. Visitors have to stop to think about whether these go to the same place. The default assumption is that they don't; otherwise , why have both? Even more similar are the two links labeled "Online Support Requests" ”one in the middle of the page and one near the bottom under "Other Microsoft Support Resources." If it's already in the upper list, why have it also in "Other ... Resources?"

Figure 3.17: www.Microsoft.com (Jan. 2001)-Duplicate and similar links in center of yellow area and bulleted list below.

Why are true duplicate links bad? They aren't misleading. They are bad because, except in certain special cases, most people assume that separate links on a page go to different places. Duplicate links therefore needlessly inflate the perceived complexity of a website. At best, duplicate links force users to think about which of the duplicate links to click, distracting them from their task and taking time (Krug, 2000).

> 2002 The New Yorker Collection from cartoonbank.com. All Rights Reserved.

Exercise: Find the Duplicates

To see for yourself how confusing duplicate links can be to Web users, try to spot duplicate links at Monterey.com, a website of the Monterey, California, Chamber of Commerce (Figure 3.18). It has all three types of duplicate links: true, stealth, and false.

Figure 3.18: www.Monterey.com (Jan. 2002)-See answers in Figure 3.19.

Of course, this is a book, not a website ”you can't follow the links to check your answers. However, that is part of the point: Web users, faced with a page of links, have to decide based on looking which links go where. Once they click on a link, they are taken to another page, which takes time and may distract them from their task. They should be able to predict where links will take them without clicking.

Answers are provided in the following section.

Answers to the Exercise

Monterey.com ”Several links on the site's Help page (and other pages) are true or stealth duplicates (Figure 3.19):

• Two links to Help page (this page): button at top left and yellow link in left navigation column.

• Three links to Site Guide: button at top left, underlined word "LINK" in middle of page, and graphical text "Site Guide" near middle of page.

• Two links to Navigation page: one in the left navigation column and one that looks like a blue heading in the middle of the page.

• Two links to send email to the site's Webmaster: underlined word "Webmaster" and underlined email address following it.

• Two links to FAQ's page: one in the left navigation column and one a blue heading at the bottom of this view of the page.

Figure 3.19: www.Monterey.com (Jan. 2002)-Answers to exercise.

Avoiding the Blooper

As the designer, you are trying to simplify things as much as possible. Duplicate links inflate the perceived size and complexity of a website or Web application. Don't duplicate links just because you can't decide which link design or location is best. Take responsibility for your design. Decide. If in doubt, prototype alternative link schemes and test them on your intended users.

Even though the WisconSUN home page has little on it, its triple duplication and highlighted non-link headings make it look much more complex that it is. See how much simpler it looks when the unnecessary upper text-only links are gone? The main links are on the headings instead of the first word of the explanations , and the headings look a lot like links (Figure 3.20).

Figure 3.20: Correction of blooper at WisconSUN.org -Excessive duplication reduced, links look like links and are on headings.

On Category Pages, Don't Duplicate Navigation Bar Links

In websites or Web applications that have an ever-present navigation bar, you should avoid duplicating navigation bar links in the main body of pages. Category pages lacking content or controls of their own can summarize the category (see the previous section Needless Link Duplication in an Intranet Web Application), perhaps highlighting important events, products, or information.

If navigation bar links are duplicated in the content area, they should be accompanied by more information, such as a brief description or picture.

Text-Only Duplicate Links Are Okay

One specific type of link duplication is allowed or even required: text-only equivalents for graphical links. Put them at the top or bottom of the page in a horizontal row. An example of text-only duplicate links can be found at the University of Florida website (Figure 3.21).

Figure 3.21: eng.ufl.edu (May 2002)-Textual duplicate links at top of all pages on the site. Supports visitors who use text-only browsers or have graphics disabled on their browser.

Home Pages May Have a Few True Duplicates

Most Web-usability experts agree that home pages serve special functions requiring special design rules (Krug, 2000; Nielsen, 1999; Nielsen and Tahir, 2002). A home page may need to highlight or explain certain site content, even though the site's ever-present navigation bar provides links to it.

When duplicating links on the home page, remember the following:

• Use true duplicates only. Make sure that the link labels in the navigation bar and content area match exactly. You don't want users to be misled or distracted by wondering whether links are the same.

• Avoid duplicates on different navigation bars. The duplication that is okay on home pages is between one navigation bar and the central content area. Duplicate links in different navigation bars on the same page are not okay, with the exception of text-only navigation bars. If a page has more than one navigation bar, the different bars should present different types of links (see Blooper 16: Numerous Navigation Schemes).

• Duplicate sparingly. As discussed already, even true duplicate links have disadvantages and thus should be used in moderation .

Grocer Safeway.com's home page has a sensible amount of duplication (Figure 3.22[A]): one pair of true duplicates. Contrast this with the University of California's Cal Performances home page, in which most of the links in the navigation bar are duplicated in the content area (Figure 3.22[B]). Even though all the duplications are exact, this seems excessive. If everything is highlighted, nothing is.

Figure 3.22: Link duplication on home page. A ” www.Safeway.com (Sept. 2002)-Minimal duplication. B ” www.CalPerfs.Berkeley.edu (Mar. 2002)-Highlighting everything.