Internet Marketing - Matt Bailey [136]
Figure 12-13: NPR “drop-in” navigation
This is a wonderful usability technique, because it exposes information as it is requested by the visitor, rather than taking up valuable page space with links that may not be used or needed by other visitors. The rest of the page is pushed down so that the navigation does not cover up the content but instead displaces it from the top. From a technical perspective, these links are in the code and can be found and followed by the search engines, but to the visitor, they are not presented until requested.
As the Programs tab is selected, the subnavigation element is revealed to show the content separated into groups, accompanied by the relevant links. If I were going to the site specifically to find more information about the show Car Talk, I would click Programs and easily find the Car Talk link listed under Entertainment. The global navigation becomes a very functional tool that expands as necessary to allow for a traditional view of content, but it does not supersede the content of the page.
Thursday: Lead with Links, Labels, and Alternative Navigation Techniques
The sites that are developing navigation tools beyond the traditional main navigation bar are employing layouts that allow for more information to be shown on the page but in a way that utilizes space more efficiently and is not overwhelming. By employing the knowledge attained from the card sort and tree test exercises, site owners can develop content associations to create groupings of similar content, presented as links, that speak more directly to visitor needs and to create clear labels that allow those visitors to find their information faster.
Links and Labels
One of my favorite sites for showing grouping, labeling, and linking is Wine.com (see Figure 12-14). With the rotating main image providing clear calls to action, the information surrounding the image is classified into specific groups: Shop for Wine, Send a Gift, Wine Clubs, Wine Accessories, 90+ Rated Under $20, 2009 Bordeaux Futures, and Wedding Gifts. Within each of those groups, there are at least three links of specific content.
Figure 12-14: Wine.com: lots of direction to lots of information
The grouped classification of these groups of links, along with a clear group label, provides an easy visual path through the information. The group labels are clear enough to view quickly and then return to explore topics further. The main navigation at the top of the page becomes nearly obsolete by the amount of topical information displayed on the page.
As a visitor goes further into the site, the content is broken down further, becoming more granular but also increasing the amount of information packed into a relatively small visual space (see Figure 12-15).
The classification of wine is a tricky process, because people tend to shop for wines in various ways. Besides the basic red and white differentiation, people like to see choices but tend to be easily overwhelmed when they see those choices. By breaking up the amazing amount of information and inventory into practical groupings of links, the information becomes much more tangible and can be easily scanned and processed by a visitor.
Figure 12-15: Wine.com: more groupings in deeper pages
Again, on the Wine Shop page, there are major content groups with clear labels: most popular links, price, type, style, region, ratings, best deals, and more. These topics are clear based on the bold text and the font size, which establishes a topical hierarchy. There are nearly 200 links on the page, but the organization, presentation, and clear topical labels allow the visitor to quickly make sense of the amount of available information.
Alternative Navigation Techniques
For sites with a lot of product content, providing filters has become a space-saving method for allowing visitors to navigate to specific content. Both Lands’ End and Brooks Brothers provide tools for filtering through the ties, rather than simply browsing through hundreds of