Web Design Ethiopia

Navigation bars are so common that we simplify can’t avoid the shorthand of calling them navbars.

The navbar provides the primary mechanism for users to browse your site, and the appearance of the navbar establishes a framework for users to understand how the site is organized.

The navbar doesn’t have to be a comprehensive view of the underlying way the site is linked together.

The navbar provides a useful summary of the overall organization. In fact, the site can have many convenient links that aren’t represented in the navbar. Setting up shortcuts is critical to effective navigation.

Deciding Which Links To Show
Exactly which links should you show in a navbar? Too many links add clutter and confusion.

Too few links make navigation paths longer and slow down navigation. In addition, too few links will miss the opportunity to indicate to users how the site is structured and where they are within that structure.

Typically people need to get to the following places from any particular page: the home page, any subpages underneath this page, and the page at the top of the current section. Depending on their task, people also need to access the next and previous pages in a sequence.

When browsing quickly through sections of the site, accessing sibling pages, at the same level as the current page, helps users understand the scope of the site or to comprehensively search a site.

To go up in the hierarchy to any level of generality, you need access to any page above the current page, in the sequence of ancestors.

To have a visible reminder of the scope of the site, you need access to any of the top-level categories, and any of several types of helper pages, such as Contact, Site Map, or Shopping Cart, as well as any other page on the site.

Listed here are some of the most common navigation styles to satisfy these varied needs, but other navigation styles will undoubtedly evolve to satisfy the various tradeoffs.

Minimal Navigation
In its most minimal form, a site map or home page can link to all the pages of the site, and each page needs only one link, the link back Home:

(In this and the following examples, we present links in underlined gray that you would likely have visited in order to get to a page with this navigation, and present unvisited links in underlined black.)

In most cases, you can save a little time in browsing a hierarchical site by providing the list of links to subpages of your current page. Thus, when you get to the Products page, you’d want to see the subnav like this:

Products: Furniture Appliances Electronics Home Décor

This minimalist approach, especially without Next and Previous buttons, provides for a navigation scheme that is very low maintenance.

To add a page or remove a page, you simply add or remove the single link to it from the category it’s contained in.

The navigation is short, succinct, and easy for the user to comprehend. On the down side, the navigation doesn’t clearly indicate how the site is organized, and it’s significantly more time-consuming to click through to your destination than other approaches.

Breadcrumbs
Breadcurmbs show the hierarchy of pages in the most direct path from the home page to the current page. This is a succinct representation of the site structure and your current location within the structure.

You are here: Home > Products > Appliances > Toasters > QuickCrisp Deluxe
or
Home ? Products ? Appliances ? Toasters ? QuickCrisp Deluxe (You are here)

Some users may confuse this list with a traditional navbar, where each of the options is at the same level. The use of the greater-than symbol (>) or arrow (?) is intended to help them understand that the breadcrumbs indicate an ordered relationship, and the “You are here” seems to help.

Breadcrumbs make it easy to browse to any level of the hierarchy quickly and intuitively the set of links represents a good guess at where the user is most likely to want to go from here.

That is, the user is much more likely, when looking at a toaster, to want to look at other toasters or other appliances than to want to skip over to the Furniture section of the site.

In an alternate implementation of breadcrumbs, it’s possible with database-driven sites to list the actual path that a user took to the current location rather than the idealized hierarchy represented in traditional breadcrumbs.

This may provide more relevant options to the user, but loses the ability to indicate the structure of the site.

Top Level Categories
Providing a list of top level categories helps define the scope of the site to the user and makes access to the primary information quick.

About Us Products Locations Contact US
Toasters: QuickCrisp Classic QuickCrisp Deluxe NoBurn Safety Toaster

The subnav is shown for the current page, but intermediate categories are omitted, which keeps the navigation concise but makes navigation to those intermediate categories difficult.

By providing breadcrumbs along with the top-level categories, you can largely address this problem. This works well for shallow sites of one or two levels of navigation, but for sites with greater depth, the absence of intermediate navigation can be confusing.

(Note that while Home is technically above the other categories in the hierarchy, it’s a common convention to list it at the same level as the other top-level categories.)

Expanding Outlines
One of the most common navigation styles is to show a list of options, and to expand each topic, like an outline, as each category is selected:

This approach helps the user create a good mental map of the site organization. The vertical layout also lends itself well to vertical navbars on the left side of a page, and this enables items to be added and removed without having to redesign the layout of the page. The approach also works reasonably well in a horizontal approach, which you may see in text links at the bottom of a page.

The outline style is the closest alternative to simply showing all the links on the site and thus allows the fastest navigation of the options presented. This ability is to get quickly to any piece of content rather than forcing users through tedious paths is called direct access or random access.

The main problem with the outline view is that the list becomes unwieldy as the number of options gets large.

While it scales well to three levels of navigation, at four or more levels, it can become confusing and no longer space-efficient. In addition, while this organization is easy to provide in a database-driven site, it can be a monster to maintain if you are coding the site by hand, since changes in the structure require a lot of pages to be modified and tested.

Progress Bars
When pages fall into a natural linear sequence, a list of the pages with Previous and Next pages is a common convention:

1 2 3 4 5 6 7 8 9 | Previous Next
This is especially common for search engine results or for multipage articles and can work for multistep processes and any kind of ordered list.

Notice how the indication of visited links helps strengthen the paradigm by making it clear how far you’ve gone through the sequence and clearly indicating if you’ve skipped around.

Very Large Sites
None of the approaches described so far works terribly well for particularly large sites. On large sites, you need to carefully analyze the tradeoffs of all the information needs involved.

A typical approach is as follows: include a breadcrumb trail, utility pages (Contact Us and Site Map), the primary nav (top-level categories), and a subnav listing subpages of the current page.

You are here: Home > Products > Appliances > Toasters |Contact Us| |Site Map|
About Us – Locations

Toasters: QuickCrisp Classic  QuickCrisp Deluxe NoBurn Safety Toaster

As opposed to the outline approach, this avoids clutter, but it is takes a little more time for the user to decipher, as each navigation bar must be interpreted.

Standalone subsites
As sites become very large, one strategy is to create standalone subsites, where you include a link back to the main home (or a breadcrumb trail in the following example).

The subsite is presented as if it were a site unto its own, with its own home page and dedicated navigation, thus reducing the apparent complexity for users. This works well if, as in this example, the user’s main interest is really in Toasters.

You are here: Home > Products > Appliances > Toasters |Contact Us| |Site Map
Toaster Home – QuickCrisp Classic – QuickCrisp Deluxe – NoBurn Safety Toaster

In this example we’ve removed the boldface from the “You are here” in order to place the visual focus on “Toaster Home,” so that it really feels like its own site.

Here you can also see why we distinguished utility pages from the top-level categories, as we did in the previous example. When the top-level categories go away, we still need access to some of the most common utility links like Contact Us and Site Map.

Redundant Navbars
Providing a text navbar at the bottom of pages provides useful redundancy. If your main navigation is a set of graphic links, the graphics may not be accessible to users whose images are turned off or those using screen readers.

Also, if a page is long, it’s convenient to find navigation at the bottom of the page so that scrolling to the top of the page isn’t necessary just to navigate.

However, if pages are short or of varying lengths, this redundant text nav can be unnecessary clutter and actually confusing to users, who assume that if they see two navbar on the same screen, there must be a meaningful difference between them to minimize this problem, make sure there are no unnecessary inconsistence between the two versions of the nav.

If the pages are always short and the main nav is presented as HTML text, then there is really no need for redundant nav.

Rescuing Lost Users
When the standard navbar isn’t succeeding for users, it’s nice to have alternative ways of finding things. We’ll discuss giving users a Search option in more detail later. Other facilities for rescuing users who are lost include the following (these mostly correspond to utility pages, mentioned earlier).

Site Maps
Site maps aren’t necessarily intended to show every link on the site, though if well-structured, they work well showing as much as possible. Site maps help reinforce a good mental map of the site and give the user an opportunity to evaluate the scope of the site.

Complete indexes need to anticipate the range of synonyms that may be used and should use term rotation, a standard technique in book indexes where multiword terms can be looked up by any meaningful word in the term.

Thus, in addition to listing “usability evaluation” in an index, you need to list “evaluation, usability.”

Help Systems
While help systems can provide a number of types of information, a simple introduction in the help system can explain complex navigation bars, suggest search strategies, and provide tips for finding common topics.

Contact Information
Many users who despair of finding what they’re looking for will happily send a question to customer support or a site administrator.

 If you’re prepared to handle these requests promptly and helpfully, this is a great way to help out those in serious difficulties. If you track these questions, you can also identify which aspects of the site require improvement.

Live Customer Support
The technologies for live customer support are still somewhat in their infancy and may confuse the user further, but if you can organize it simply, this enables you to solve users’ problems in realtime (of course, this means you have to have someone on staff to take these calls when they come in).

Chat services enable text discussions with your users, and facilities to synch your browser with users help you understand the context of their questions. Live video connections can be even more compelling.

“Callback” services allow the user to enter a phone number and get an immediate return call. This works best, of course, when the user isn’t tying up the only phone line with an internet connection.

Just-in-Time Links
One of the most effective ways to help users find information is to anticipate where they’ll want to link to from any spot and provide those most-likely links.

For instance, if I’m registering for a conference, I’ll also want information about travel and accommodations.

If this information isn’t in the same section, a cross-link is crucial. At the bottoms of pages, include links that cue the user exactly where to go when they get done reading.
 

Report This Post