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