Web Bloopers: 60 Common Web Design Mistakes, and How to Avoid Them (Interactive Technologies)
| < Day Day Up > |
Blooper 19: Lost in Space: Current Page Not Indicated
Have you ever tried to get around in an unfamiliar town or neighborhood but found yourself stymied by a lack of street signs? When it's difficult to tell where you are, it's easy to get lost. Even if you don't actually get lost, you feel lost. That's how Web users feel when they visit websites that don't show clearly what page they are on.
The current page can be indicated by either marking its item in the navigation bar or by putting a page title prominently on the page. Well-designed sites do one or both of these. Many websites either don't do either or try to do one or both but don't make the markers or titles prominent enough. Let's look at some examples.
Navigation Bar Not Marked , No Page Title
ValcoElectronics.com doesn't mark the current page on the navigation bar or provide page titles (Figure 3.29). The page shown is the Catalog page, but there is no way to know that from what's on the page. For example, this page could easily be a home page.
Sometimes Web pages lack identification because of poor enforcement of sitewide policies. For example, most pages at RealEstate.com are identified, but the site's "Find an Agent" page has a banner ad in the page title's position (Figure 3.30). If temporarily distracted from your computer after arriving here, you might not remember if you were at "Find an Agent," "Find an Appraiser," or "Find a Broker."
Navigation Bar Not Marked, Page Title Not Prominent Enough
Like Valco, the California Department of Motor Vehicles' website does not mark the current page on its navigation bar (Figure 3.31). It does show a page title (such as "Driver License Information"), but its color and small size make it hard to see. The page title's wording also doesn't exactly match any of the items in the navigation bar. The total effect is that it is hard to recognize which page you are on.
The California DMV could do some or all of the following to improve navigation at its website:
-
Make the page title, "Driver License Information," larger than the section title, "Department of Motor Vehicles."
-
Move the page title up higher.
-
Change the page title so that it is dark text on a white background. The text could be in any of several prominent colors, excluding blue, the link color.
-
Make page titles match their navigation bar item, by changing either the title or the navigation bar item.
Alternative "Solutions" that Don't Work
Some may argue that there are other ways to indicate the current page besides marking it on the navigation bar and displaying a prominent page title. They're right; there are other ways, but they don't work. Here are two of the more popular alternatives:
-
Page title in browser title bar: Use the HTML <TITLE> tag to put a page title into the browser's title bar. This by itself isn't enough. People rarely notice what's in the browser title bar. If you do only this, site visitors will think you don't identify your pages. There are reasons site should set titles for the browser, but keeping users informed of their location is not one of them.
-
Watermark title in page background: Give each page a distinctive background pattern, with the page title appearing as a faint watermark, perhaps in fake 3D. People don't notice watermark backgrounds; they focus on the foreground: the page's content.
Avoiding the Blooper
As I said in introducing this blooper, the current page can be indicated in one of two ways:
-
Navigation bar. Marking the current page's item in the site's navigation bar.
-
Page title. Placing a page title prominently near the top of the page content.
Well-designed sites use one or both of these on every page. Here are some examples.
Prominent Page Title
A few pages at RealEstate.com lack titles (see Figure 3.30), but most have them. The site doesn't mark its navigation bar to indicate the current page, but its page titles are prominent enough that few users would be confused about where they are (Figure 3.32).
Navigation Bar Marked
Pentagram.com is a site that indicates the current page on the navigation bar only (Figure 3.33). Even without separate page titles, the marked navigation bar clearly indicates the current page.
Navigation Bar Marked Plus Prominent Page Title
Obviously, if indicating the current page by marking the navigation bar is helpful and showing page titles prominently is helpful, doing both would be absolutely clear.
As an example, examine a page from the 2002 ACM Conference on Computer-Human Interaction, ACM.org/CHI2002 (Figure 3.34). This site actually has two page titles on each page: one in the navigation trail [2] (" home > location") at the top of the page content area and one just below that.
Use Alternative Indicators Together with the Standard Ones
The two alternative page-indication methods that users don't notice ”page titles in the browser's title bar and watermark backgrounds ”should always be supplemented by one or both of the successful methods . However, even though few users notice, all Web pages should always set a title for the browser's title bar. Otherwise, the page will be nameless when bookmarked. Watermark backgrounds can enhance the visual appeal of a site as long as the background is very subtle and doesn't interfere with the legibility of foreground text (see Chapter 8, Blooper 55: Camouflaged Text).
[2] Often called a "bread-crumb path ."
| < Day Day Up > |