Web Sites Ethiopia

Once you’ve worked out how to display individual links (e.g., as icons), you need to determine how the navigation as a whole will be displayed. The structure of a site is intimately tied to its presentation.

In fact, the perceived structure, established by the way navigation is displayed, can be significantly more important to the usability of the site than the actual underlying structure.

Presentation
Visual metaphors help organize the information and make the options more memorable. While most navigation will be presented as lists of text labels or icons, links may also be organized in maps, diagrams, or other pictures.

For example, an approach that seems to pop up periodically is a room metaphor, where links are associated with objects in a three-dimensional scene, such as a room with a “help desk.”

However, unless your domain is architecture or furniture, a 3D room is most likely to be a stretch that confuses the users rather than helping them. Visual metaphors should be used when they clarify the content but avoided when they conflict with or confuse the interpretation of the content.

If you use them at all, find metaphors that are strongly related to your subject domain. When no obvious metaphor is available, avoid them altogether and use a simple list of links.

Navbar Layout
Some of the basics of navigation layout are presented here. The main issues are coping with limited screen real estate (i.e., the amount of space available on a given display) and clearly indicating the relationships between multiple navigation bars.

Screen Real Estate
Dominating the problem of fitting information into limited space on the screen is the fact that English words are longer horizontally than vertically. Actually, English is a fairly dense language, and other European languages typically require even more horizontal space. (Some languages such as Japanese and Chinese require less horizontal space, on average, and more vertical space. They also allow convenient vertical layout of words when needed.)

The primary impact of this is that while horizontal navbars require very little vertical space, they can’t hold a lot of items. Multiline horizontal navbars are possible, and even common, but they can be confusing because the second line may be interpreted as a separate list or a subnav.

Because horizontal navbars can fit very few items, they will necessarily vary in shape (i.e., vertical space) on different pages, creating design inconsistencies. In addition, if you need to add more options at a later time, you’ll have to introduce a new layout when the list gets too long.

A vertical navbar doesn’t suffer from this maintenance problem as much, but instead limits the length of individual link labels (thus putting pressure on you to create less meaningful labels). Vertical navbars also steal horizontal space that would otherwise be available to the body text.

One solution is to use drop-down menus to present navigation options. This saves screen space but is somewhat more difficult for users. We recommend it only for lists of shortcuts, not as a substitute for the primary navigation.

The limits of screen real estate have driven many sites to implement cascading menus in DHTML. Compatibility issues are a factor here, but if carefully tested, it’s possible to design this to work with the most common platforms.

Because so many interaction styles are possible, it’s important to test that users are comfortable with your implementation. If you decide to go the route keep the menus simple and straightforward imitating the behavior of standard desktop menus.

Avoid multilevel menus (where one submenu leads to another level of submenus), which are more cognitively complex and more difficult for people to select with a mouse. People vary greatly in their motor ability to accurately point at links, and complex cascading menus can be among the most difficult to accurately manipulate.
There are still other ways to present navigation elements.

Subnav Design
Several different navigation bars may be on a screen simultaneously, including top level categories, multiple levels of subnav, breadcrumbs, and utilities. Users must determine which is which, and your responsibility is to make this obvious. If users see two lists of links, how are they to know what each represents? There may be two lists of links at the same level, a main nav and a subnav many levels deeper, a main nav and a breadcrumb trail, or one of several other alternatives.

You can indicate the relationship between a navbar and its subnav in several ways. You can put the subnav below and to the right of the main navbar, make the subnav smaller, or draw a line from the category in the main navbar that the subnav represents.

It’s also possible to enclose the subnav within a frame encompassed by the main navbar, or to use typography to indicate the primacy of the main navbar over the subnav – that is, to indicate the relationship by changes in font size, capitalization, indentation, color, or contrast. For instance, the main navbar can be in all caps, the first level down in title case, and the second level down in lowercase. Through illustrate several different ways to design subnavigation.

Grouping Navigation Items
When your site is organized in a shallow structure (i.e., few levels of depth), you may have lots of links at the same level, which can be more easily scanned if they are grouped into related items.

These groups help make a more sensible page, but they need to be carefully presented to avoid two problems: (1) a group may be mistaken for a subnav if it’s not presented as being at the same level, and (2) people quickly become accustomed to using only one group and may be blind-sighted to the presence of the other group. For an example of a complex site with multiple navigation groups.

Isolating the Navbar
The navigation bar can also be isolated from the content of pages by putting it in a separate window or frame. On the plus side, an isolated navbar can make site maintenance easier, may slightly improve the speed of the site, and can improve the apparent stability of the navbar.

On the down side, separate windows can create difficulties in window management, especially on small screens. They also make it more difficult (though not impossible) for the programmer to customize breadcrumbs and provide indicators of the current page.

Report This Post