Blooper 51: Wrapped Links: How Many?

< Day Day Up >

When a textual link on the Web consists of more than one word, it may be wrapped to two or more lines. Whether it is wrapped depends on the width of the browser window, the width of the link's containing area of the page, the text font size , and other factors.

Wrapped links create ambiguity and confusion ”how many separate links are there? ”and are difficult to scan quickly. In general, they should be avoided but can work if the ambiguity is minimized by proper graphic design.

Unfortunately, many Web designers don't realize how much wrapped links harm the usability of a website and so make no effort to avoid them or minimize their impact.

A good illustration of the ambiguity of multiline links is provided by Agilent.com (Figure 7.24). By scrutinizing this "clump" of text carefully , site visitors might be able to figure out that it contains two links, each beginning with the company name : "Agilent." However, that puts far too much of a burden on site users. It should be designed so it is clear at a glance where links begin and end.

Figure 7.24: www.Agilent.com (Feb. 2001) ”Question ” How many links are in this "paragraph"? Answer ” two. Each starts with "Agilent."

A somewhat different example of confusing multiline links comes from the website of United Airlines. On the frequent-flier customer page is a list of links, some of which are wrapped (Figure 7.25). Because the line spacing is the same between items and within them, customers might not be sure how many links there are unless they notice the capitalization.

Figure 7.25: www.United.com (Mar. 2002) ”Ambiguous multiline wrapped links.

When links are in horizontal rows rather than vertical lists, links at the ends of lines may wrap to the next line, causing a slightly different sort of ambiguity. RadioShack.com provides an example (Figure 7.26): Five of the links in this list of product categories are split across lines. Careful visual analysis is required here to determine what the links are.

Figure 7.26: www.RadioShack.com (Feb. 2002). Some multiword links are wrapped at ends of lines, causing ambiguity about the number of links.

Avoiding the Blooper

The most straightforward way to avoid the blooper is to simply not let links wrap. Vertical lists of links can be placed in containing areas that are wide enough that no link wraps.

Of course, a design rule that textual links should not wrap conflicts with another important Web design rule: that text should be as fluid as possible to accommodate different- sized browser windows and different font choices by users. Fixing a page's layout so firmly that no multiword links ever wrap would result in inflexible layout and font size, which are themselves bloopers (see Chapter 8, Blooper 54: Tiny Text, and Blooper 56: Centering Everything). There is no general solution to this conflict. Designers must simply attempt to minimize the incidence of all the conflicting bloopers through sensible page layout and reasonable default font sizes.

In specific cases, solutions are available. For example, the wrapping of links at RadioShack.com (see Figure 7.26) could be avoided through the use of nonbreaking spaces between words in multiword links. However, nonbreaking spaces don't help when there is only one link per line, as in the Agilent example.

When multiline links are unavoidable, the ambiguity they cause can be reduced or even eliminated through spacing and bulleting. Screen excerpts from Albany.co.uk and IBM.com show that if line spacing between links is greater than that within links, ambiguity about the number of links can be eliminated (Figure 7.27). The IBM example shows that the spacing between links need not be much greater than that within links to result in a noticeable improvement. ^[3]

Figure 7.27: A ” www.Albany.co.uk (Feb. 2002); B ” www.IBM.com (Jan. 2002) ”Multiline wrapped links with reduced ambiguity due to greater interitem spacing.

Bulleting links is even better than spacing for reducing ambiguity, as is shown by an excerpt from bookseller BarnesAndNoble.com (Figure 7.28). However, bulleted items may not fit the graphic style of a particular website.

Figure 7.28: www.BarnesAndNoble.com (Jan. 2002). Bulleted links can reduce ambiguity when some links wrap onto multiple lines.

^[3] However, the IBM example is not good in all respects: White text on a light-blue background is very hard to read.

< Day Day Up >