Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html The Basics of Navigation by Sean Timberlake You can have all kinds of great attractions on your site, but if your visitors don't know how to get to them, they'll just collect dust on the server. Worse yet, if visitors find your site's navigation confusing or convoluted, they'll simply give up and head off to explore the rest of the Web, never to return. So, good navigation design is an essential ingredient for any successful Web site. The navigation scheme is the road map of your site. You are here: Establish a home base and always provide a clear path to your destinations, as well as back home. Types of navigation: Hierarchical, Global, Local. Styles of navigation: links, trails, bars, maps and more. Be direct in your labels. 1 of 13 1/26/10 5:10 PM Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html Be consistent across your site. Graphics help illustrate navigation, but also include text links. Creating good navigation automatically with NetObjects Fusion. Site navigation: Sunday drive or superhighway The navigation scheme you set up for your Web site acts as its road map, with clearly marked destinations, roads that intertwine, and even suggested routes. Visitors to your neck of the Net will want to know three things: where they are, where they can go, and how they can get back to where they came from. You are here At all times and on all pages in your site, you must give the visitor a sense of place, of context within the site. Aside from retaining the same look and feel throughout the pages in your site, there are a few other things you'll want to do to establish this. First and foremost, establish a home base. Your site's home page should act as the crossroads, the point of origin for all traffic going into your site. From here, you must set up the on-line equivalent of road signs—the navigation element—to dictate where your visitors can go from here and how to get there. Tour guide: In addition to telling visitors how to get from 2 of 13 1/26/10 5:10 PM Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html here to there, your site's navigation can help guide visitors along a certain route or path. For example, if you were to build a site about travels through Europe, the home page might not only contain links to each country but a series of links to suggest itineraries from France to Italy to Switzerland, then to the de rigueur trendy spa in Latvia. Say what you mean, mean what you say Be direct. Now, I know it's tempting to be cute or clever. But if instead of saying "Home" you refer to "La Grande Maison," you might confuse your poor visitors, leaving them to wander around the site aimlessly. Stick to clear, concise labels. Consistency is also important to the user experience. So your intrepid visitors don't get lost whilst visiting the wilds of Latvia, always make sure you carry your navigation element across all your pages. That way, they can easily hop over to France, or just go back home. Remember, like a road map, you should always make it clear that you can get between points with relative ease and that you can always, easily go back from whence you came. Point the way with pictures This is not a necessity, but pictures can better illustrate what you've got in store for your users. Rather than just a text link that says, "France," it would be much clearer if you added a little icon of the Eiffel Tower or some other picture that says "France." Of course, you should never rely exclusively on images for navigation. If a picture is worth a thousand words, then there must be a thousand ways to interpret an image without 3 of 13 1/26/10 5:10 PM Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html context. Just use them to support your already lucid labels (you did read that part, didn't you?). And, of course, every graphic on your site should contain "ALT" text, so even if your visitors have pictures turned off they can still read and use your navigation. That's one of the reasons why it can be risky to use image maps (a single picture that contains a number of links). Because without the picture turned on, it's impossible to use an image map. It's also important to note that you should always include a text-only version of your navigation, as some people surf with images turned off or even with text-only browsers. You'll often see the text navigation at the bottom of the page. Types of navigation Well, we've covered the what but not the how. You now know the individual elements that go into creating lucid navigation but not how to assemble them. The first step in developing your navigation scheme is to think about how your information is best presented. According to Information Architecture for the World Wide Web , the de facto authority on navigation, there are three basic types of navigation: Hierarchical Hierarchical applies to sites that are information-rich and are best organized as a large tree, much like a library. Global 4 of 13 1/26/10 5:10 PM Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html Global applies to sites where you can easily and logically jump among all points; this is best if you are presenting information in fewer, broader categories. Local Local navigation sits somewhere in between. This applies when you have depth of information within broader areas. The most basic form of navigation is the embedded link. That's just anyplace where you link text within the body of the page— like this. This works great if you want to supplement a concept with more information that's elsewhere on the Web, but it's not so great as a way of getting people into your site. Drilling for info Hierarchical sites, because of the depth and breadth of their content, often use what is commonly referred to as a "bread-crumb trail" approach. That means that as you step from page to page, drilling deeper into more specific topics, the page tells you how you got there, and naturally how to get back. You'll see this most commonly on search engines such as Yahoo. Using our road map metaphor, though, this kind of navigation would look like a radial pattern of roads emanating from a single source and rarely crossing each other. To change directions, you must backtrack to the fork in the road that goes the way you want, and that can mean going all the way home before striking out again. 5 of 13 1/26/10 5:10 PM Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html Global and local sites work best with a navigation element that allows easy cross traffic. Global navigation goes sitewide, whereas local focuses on a specific, topical area of the site. It's the equivalent of a large road map, which in turn may have insets for a close-up of a specific town. Styles of navigation Embedded links: the most basic form of navigation. Bread-crumb trail: if you're organizing large amounts of information. Left/top/pop-up nav bar: Most common, generally usable. Tab navigation: When breaking into a few primary categories. Site map: One-stop shopping for everything on your site. Mix and match navigation schemes for optimal useability. The most common way of achieving this is with the navigation bar. You've seen it before—on the left side of countless sites or maybe at the top—a list of the top-level categories a site has to offer. It's so widely used as to be cliche, but guess what: It works. Because it is so overused, every single person who has spent more than a few minutes on the Web knows how to use this thing. The "nav bar" There's no hard-and-fast rule about how and where to put a 6 of 13 1/26/10 5:10 PM Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html nav bar (industry slang for "navigation bar"). Many sites put it along the left side. Others, such as Microsoft's put it on the top. A few daring souls, such as ABC News, put it on the right side, forcing the eye over to it. There's nothing wrong with putting it on the right, except that it's unexpected. The biggest concern with the nav bar is real estate—simply put, they take up a lot of space that you could use for content. On the side: Since screens are wider than they are tall, it's logical to put navigation on the left or right side—simply because there's more horizontal space. What's more, you don't want your lines of text to run from one edge of the screen to the other—this creates lines that are too long to be read comfortably (60-70 characters is what you want to aim for). To read more about type and readability on the Web, click here. On the top: Putting nav bars on the top keeps them out of the way as long as the bar isn't so big it limits what your visitors see when they first enter a page. I've seen some navigation elements that were so huge they virtually filled the screen and forced the visitor to scroll just to see the start of the content. That's not a good idea. Navigation is necessary, but since it appears on every page, something too big or fancy can get annoying—fast. 7 of 13 1/26/10 5:10 PM Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html If you just have a few categories to point to, try a tab metaphor, like the one found on this "Food for Thought" site. The graphical tabs, which are easily understood by most people, take the reader to clearly defined sections of the site. In a frame: A common way to keep navigation on screen no matter how much a visitor scrolls to read is to create a frame set (using the "frames" feature supported by browsers version 3 and newer) with the nav bar in one frame. This way, when users click from point to point, they don't have to reload the nav bar on each page. The problem with this is that frames can be confusing for site visitors. It's more difficult to print and bookmark a page, and when you do use a bookmark, you may return to a page that lacks navigation (since it was all in another frame). Frames can also cause visitors with older browsers to be unable to see any of the content of your site. If you decide to use frames (and despite their drawbacks, many sites use them) be sure to place text navigation in the body frame, as you never know how people are getting at your information. High tech: Another method, if you're not worried about 8 of 13 1/26/10 5:10 PM Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html alienating visitors with older browsers (and technically inclined), is to use multimedia to conserve space. Some sites use JavaScript to open a pop-up window or reveal deeper levels of information when you mouse over a category in the nav bar. Another example is HotWired's WebMonkey site. If you come to the site using a 4.0 browser, the nav bar mysteriously slides in from the side, and then is easily pushed aside so as not to obstruct your view of the rest of the page. WebMonkey's programming is quite sophisticated, so they check to see what kind of browser you're using, and if you're using an older browser they revert to simpler navigation. Some sites, such as msnbc.com, use ActiveX (a special kind of program), while others use Java (another kind of program) to create more interactive navigation. NetObjects Fusion offers a Java-based program called the site mapper that shows an org-chart map of your site, along with a complete listing of pages). These program-based navigation features can be useful, but they also can be cumbersome—they take longer to download than text or small graphics, and they don't work on 9 of 13 1/26/10 5:10 PM Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html all browsers, so don't rely on them solely. Generally, however, the simpler the better. You want everyone to be able to use your navigation, not just those with the latest browsers. Site maps: One more frequently used method—and the one most held over from old-fashioned print media—is the site map or table of contents. The nice thing here is that it provides your reader with a one-stop location to access anything on the site. The bad thing is you have to get them there in the first place. This should be your supplemental method of navigation, not the primary one. Site maps are usually pages that contain links to all (or most) of the pages on a site. Often these are outline-like text pages, but they also can contain graphic image maps to help people understand the layout of a site. If you create a graphic site map, try to make the graphic as small and fast-loading as you can. To make it compact, use few colors and save it as a GIF file. Shifting into automatic: how NetObjects Fusion does it One of the great things about NetObjects Fusion is that it's the only web site creation program that automatically builds and updates efficient, effective navigation for you. As you create pages in Fusion's Site View, the program automatically builds pages and navigation bars, complete with buttons that change color to show the site visitor what section they're in. If you rearrange the site the navigation on each page is 10 of 13 1/26/10 5:10 PM Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html updated and regenerated—automatically and instantly. If you rename a page, the navigation buttons change all necessary pages—automatically. Delete a page, and the page is, of course, removed from the navigation bars. Navigation is always accurate and up-to-date, without you having to lift a finger. Great for Intranets and sites that change frequently. Both graphic and text-based NavBars are completely automatic. Tedium eliminated—Never worry about naming or links. Powerful and unique – no other program has this feature. All together now Of course, no one of these navigation schemes will work for every occasion. Sometimes the best thing to do is to mix and match them to achieve a more intuitive navigation. For example, the search engine Snap not only uses the bread-crumb trail for hierarchical drilling, but also a tab 11 of 13 1/26/10 5:10 PM Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html metaphor at the top for global access to home, local, and personalized pages. On some pages, you will even find horizontal nav bars that point to deeper levels locally or are specifically relevant to the area you are in. There's no one right way to create navigation. What's important is that you think carefully about the navigation on your site so that it's clear, comprehensive and easy to follow. Links: Snap Web Design and Graphics Guide WDVL: Navigation WebReview: Navigation and Useability Guide Web Page Design for Designers: Navigation Web Sites That Work CNET Builder.com: Web Useability Secrets About the Author Sean Timberlake is the Lead Producer for the Computing & Internet topic on the Snap search engine, a joint venture between NBC and CNET. He has written numerous reviews and features both forCNET and for Snap. Left-side nav bars are his penultimate pet peeve. Illustration: Ingo Fast´s Technology for www.artville.com 12 of 13 1/26/10 5:10 PM Navigation Basics - How to build better web site navigation from efuse.com http://efuse.com/Design/navigation.html [Home] [Start Here] [Plan] [Design] [Build] [Grow] [FuseLetter] [New] SITE MAP - Contact us - Legal Info www.efuse.com ©2000, NetObjects Sign up for our free FuseLetter! 13 of 13 Try NetObjects Fusion for free Buy NetObjects Fusion 4 for $49 Buy FusionMX for $99 Learn about NetObjects Training Classes 1/26/10 5:10 PM
© Copyright 2024