Internet Marketing - Matt Bailey [134]
Further, the heading of the page is Activities. However, in both the breadcrumb navigation and in the URL bar (which reads http://www.gobreck.com/page.php?pname=summer/activities/), Summer is the key navigation term. This is a primary example of the navigation not being supported by the surrounding information. In addition, the usage of white text on a light gray-green background for the breadcrumb navigation creates a very low-contrast element, which nearly hides it from vision. The breadcrumb is a major part of the navigation structure and should always be clearly visible.
When evaluating all the navigational tools available on the page, there is a lack of consistency:
URL: http://www.gobreck.com/page.php?pname=summer/activities is displayed on a page that seems to be about activities as a whole, not just summer ones.
Page title: The page title—Breckenridge, Colorado | The Official Web Site for Breckenridge Colorado—is too general, especially when the content is about sporting and outdoor activities available in Breckenridge.
Page heading: Activities.
Subnavigation content heading: None.
Breadcrumb navigation path: > Home > Summer Activities.
The last page in this site example site is a click deeper from the Activities page. By clicking the actual Summer page link from the left navigation bar, something different happens (see Figure 12-8). New visual elements are added to the subnavigation. At this deeper level into site’s structure, introducing a new visual cue in the navigation will only serve to confuse the visitor. In addition, the format of the visual cues does not aid the visitor, because the active page is the Summer Activities page, but in the subnavigation, the label for this active page is gray-green text on the green background, another low-contrast presentation. The active page needs to have an active state label (bolder and more contrasting) that shows it as being the most important label in the hierarchy of the navigation, not the least important. Making elements low contrast takes away from their importance.
Figure 12-8: Breckenridge, Colorado, summer activities page
Again, the breadcrumb navigation provides a confusing path presented in low contrast: > Home > Summer > Activities Summer. With the URL reflecting a similar structure, it is clear that these two elements are somehow tied together in the site structure and are simply reflecting the direction of the content that has been entered through the content management system. A few corrections in both the content and the site structure could make a major difference in the ability of visitors to navigate the site.
Case Study: Clear Navigation
The second city on the tour is Rapid City, South Dakota. Another tourism destination, it also employs very graphical elements along with a similar type of information such as events and activities. However, the naming convention here provides a more active approach to the navigation labels (see Figure 12-9). The navigation and the words in the navigation are much larger than on the Breckenridge site, allowing for easy viewing and creating a level of importance, because the font size is larger compared to other elements on the page. The heading in the center of the page is the largest size of text, so in the page hierarchy, this is seen as the most important content, “Unpack in Rapid City. Unwind in the Black Hills.” The image of the buffalo creates a striking impression of what you might see in Rapid City. Above the main navigation are other choices that are much more specific to the B2B travel and events industry, but the design does not overshadow the primary consumer-focused nature of the primary navigation. The text size is smaller; it blends with the design and provides clear utility for that specific audience.
Figure 12-9: Rapid City, South Dakota, home page
As the visitor navigates further into the website, the usage of both the breadcrumb trail and the subnavigation provides an accompaniment to the content and information on the website (see Figure 12-10). The heading of the subnavigation