12 navigation systems
1. tabsUse this when your site is organized into categories especially product categories. Used most famously by Amazon.com, tabs create a visual reference to folders, allowing users to understand conceptually that they're within one of several parallel areas on the site. When a user clicks on a tab say, the one that says "Music" the corresponding folder moves to the front and the contents of that conceptual "folder" are revealed. This visual metaphor was first used by Apple Computer on the Mac interface (which made liberal use of the file-and-folder metaphor), and it's widely used in software today. It's also widely used and misused on the web. Tabs work best when you have a series of distinct, but parallel, categories on a web site. This is why it's so effective on commerce sites: It's an excellent way to organize different product categories, while revealing the breadth of your offerings. However, tabs are awkward when they become a catch-all for unrelated site sections. Amazon's tab-based navigation system has been widely imitated across the web, on stores as well as other types of sites. 2. left-hand panelUse this as global or local navigation for almost any kind of site. Used first or at least most famously by CNet, the left-hand navigation panel quickly became a staple, if not an uncontested convention, on the web. The reason it took off is because it neatly solves a wide range of navigation issues, and because it scales: As your site expands or its navigation needs change, you can easily add more links or buttons to a left-hand panel (extending the navigation further down the page). The left-hand panel provides a simple, flexible, persistent source of navigation throughout a web site. It can explain the site structure, reveal sections that may have been overlooked, provide a permanent placement for sitewide functionality (such as a search box), and also set aside real estate for small ads. CNN.com uses the left-hand panel to list other content areas, while the travel site Expedia uses it for search tools. 3. page-top nav barUse this as global navigation for almost any kind of site. Nearly every web site makes some use of the page top for navigation. For some it's the primary navigational tool; for others it serves as either global or local navigation, leaving the other to be handled elsewhere on the page. Still others use this space for branding: a chance to simply identify the site while providing a nominal link back to the front door. The gardening store Burpees uses prominent page-top navigation to make its purpose and its product categories clear. 4. breadcrumbsUse this when your site contains a lot of hierarchical information, which users access by following a conceptual path deeper and deeper into the site. Breadcrumbs give visitors a visual representation of where they are in the site and allow them not only to return to the front door (which you could do with a Home button), but also to partially retrace their steps and follow a different branch of the path. The breadcrumbs offer users a list of links separated by colons or slashes that indicate the hierarchical levels they passed on their journey to the current page. A click will bring them back to any level. Breadcrumbs are a staple on directory sites, such as Yahoo!, that offer access to deep, overlapping hierarchies of information. But other sites use this method as well: deep content sites like CNet, matchmaking sites like eBay, and commerce sites like Amazon all make use of this homing mechanism to provide the users with context. Oh, and in case you haven't guessed, the term "breadcrumbs" is a clever little reference to the fairy tale Hansel and Gretel two children who wander into the woods, leaving a trail of breadcrumbs to follow home. Of course, in the story, the breadcrumbs are eaten by birds, leaving H & G to fend for themselves in the witch-filled woods. Come to think of it, that's how a lot of web users feel. Yahoo! uses breadcrumbs to navigate its extensive collection of site listings. 5. folders & filesUse this when your site includes several categories of information and each has subcategories that are relevant to the user (but don't all fit on the screen simultaneously). The folder and file metaphor so widely used on computers today was invented at Xerox Parc in the '70s and first used on the Apple operating system. It's occasionally used on web sites, but technical difficulties have prevented it from becoming more widespread. This approach works best when folders can be quickly "opened" and "closed" with the click of a mouse. But on the web this requires the use of add-on technologies, such as JavaScript or Flash. The growing prevalence and increasing reliability of these technologies makes files and folders an options for more and more sites. Webmonkey uses folders to conceal and then reveal the contents of each section within its library. 6. hub & spokesUse this when you have several sections that need to link back to the home page, but not to each other. This is perhaps the simplest of web navigation methods, but it isn't very robust. It generally relies on a link that says "Home" or a logo/icon that represents the front door. On it's own, it only works for small, simple sites. And in most cases, these sites would be better served by a global nav bar that lets users click around. Why force them to go back through the home page? Where this system is most useful is for sites that have rich, immersive experiences like games or art exhibits where you want to fill the screen and create an environment. In this case, you may want to minimize distractions or superfluous elements, such as a navigation bar. So the scaled-back system fits the bill. The story-telling site Fray uses minimal navigation once a user begins reading a story. At the end of the story, you're offered a single link back to the front door of a section (in this case, "Criminal"). 7. linear pathUse this when you have a narrative story to tell or a transaction to complete which relies on a sequenced order of events. This system is typically used for local, not global, navigation. When a user is reading a story, or taking a quiz, or making a purchase, it's important for him to see things in a particular order. Questions must be answered in sequence, or a story must unfold in a logical order. In these cases, you'll want to offer very simple navigational controls, offering arrows forward and back, and perhaps that's it. The story-telling site Fray lets users focus when they're within a story by offering stripped down, linear navigation from start to finish. Whimsical images often replace the usual arrows. 8. multi-page pathUse this when you have long articles or a lot of search results broken up into multiple pages, and you want to let users click around among them. The multi-page approach was popularized first on search engines and is now widely used on both commerce and content sites to represent pages of options to the user. This system typically works two ways: Users can either click the Forward/Back buttons (or Next/Previous links) to move one page in either direction, or they can click on the number of a particular page and go straight there. It's effective for both showing the scope of the material (how many pages) and showing where the user is within it. Google (like all search engines) divides search results into multiple pages and lets users click through them either by clicking "Next" or clicking on the individual number (or, in the case of Google, clicking on one of the "O"s in the Google logo). Content sites take a similar approach to long articles. They're often broken up into pages that users can click through. 9. pull-down menusUse this only when the content of the pull-down menu is completely obvious, as in a list of countries, months, or years. Usually used as a component of a navigation system, rather than a system itself, the pull-down menu offer users a quick, space-efficient way of choosing between parallel and mutually exclusive items. Because pull-down menus conceal information, they're best used to present a list that would be obvious to users, such as states, countries, months, or years. They're less effective indeed, ineffective when they contain non-obvious choices, such as site sections. (See why pull-down menus are not for navigation, p. 113.) The BBC is very skilled at using risky navigation elements well. These pull-down menus work because users can easily predict what's inside them. The top menu is clearly labeled "Country profiles" and the item that appears "Algeria" is clearly a country. The lower menu is also clearly labeled, "Middle East Weather." But the first alphabetical city, Abu Dhabir, is a bit obscure. So they start the menu with an instruction, "Choose a city," which makes it clear what will be inside (Beirut, Cairo, and so on). 10. the search boxUse this when you have a site of any size with content some users may want to search. There are two kinds of web users: browsers and searchers. Browsers like to move around a site's organization system, getting a feel for how things are organized and navigating to the thing they're looking for through a series of links. They like context. Searchers, on the other hand, go straight for the search box. They like a direct route. Just about every site will have both browsers and searchers in the audience, so you should, of course, make sure your site search works. And simply adding search isn't enough. You should have a search feature that lets you customize specific results so you can learn the top 50 things your users search for and make sure you're providing good meaningful search results for them. (While you're at it, you can make sure it's easy to browse to the same items.) L.L. Bean lets you jump directly to the product you want using the search box. They also do an excellent job customizing search results. 11. image mapsUse this when your site's organization corresponds with an obvious and literal image a geographic map, for example. Image maps are often terribly misused, but they work well when the site's subject matter maps easily and intuitively on to a visual image. Geographical references are an obvious fit, and others product diagrams, medical diagrams, etc. can also work. Lonely Planet offers travel guides covering the entire globe. Users can choose their destination by clicking on a region (or by using the pull-down menus or search box). 12. lists of linksUse this when you have a short list of loosely related items or a long list of closely related items on your site. Listen, there's nothing wrong with keeping it simple. And a list of links is about as simple as you can get. They reveal the exact contents of a site and its sections by...um...listing them. Lists may run across the top of the page, in a column down the page, in chunks across the front door, or anywhere they fit. Most sites use lists of links somewhere within their navigation systems, to show in the simplest way possible what's available and where the users can go. And don't be surprised if your users love them. On FogDog Sports (shown below), they've always been the most popular way to navigate the site. A simple list of links has proven the most popular and easy method for customers to find what they need on FogDog Sports.
|
By category:
EAN: 2147483647
Pages: 195