Blooper 51: Wrapped Links: How Many?

 <  Day Day Up  >  

Blooper 51: Wrapped Links: How Many?

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 (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.

click to expand
Figure 7.24: (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.

click to expand
Figure 7.25: (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. 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.

click to expand
Figure 7.26: (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 (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 and 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]

click to expand
Figure 7.27: A ” (Feb. 2002); B ” (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 (Figure 7.28). However, bulleted items may not fit the graphic style of a particular website.

Figure 7.28: (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  >  

Web Bloopers. 60 Common Web Design Mistakes and How to Avoid Them
Web Bloopers: 60 Common Web Design Mistakes, and How to Avoid Them (Interactive Technologies)
ISBN: 1558608400
EAN: 2147483647
Year: 2002
Pages: 128
Authors: Jeff Johnson

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: