Navigation

Navigation refers to the method used to find Information within a website. A navigation page is used primarily to help users locate and link to destination pages.

Quick Checklist:

§ Does the structure fit the purpose?
§ Is the navigation scheme clear?
§ Where are you?
§ How do you find what you want?
§ Are there a reasonable number of nav-bar choices?
§ Do link names match page names?
§ Are links clearly marked?
§ Is there a clearly marked link back to the homepage?
§ Is there an option to search for information?
§ Is there a site map?
§ Does every page have a standard identity/branding?
§ Does the user have control over navigation?
§ Current location within the site is shown clearly.
§ Link to the site's main page is clearly identified.
§ Major/important parts of the site are directly accessible from the main page.
§ Navigation links change to show the active page.
§ Site map is provided for a large, complex site.
§ Tabbed navigation displays as part of the active page.
§ Easy-to-use Search function is provided for larger sites.
§ Visitors can find information easily.
§ Navigation is clear and consistent throughout the site.
§ Back button always takes visitors back to the preceding page.
§ If site navigation is in form of images, text-based navigation is also available on the page.
§ If Javascript is used for navigation, text links are also available on the page

Horizontal and Vertical Web Site Navigation Menu/Bar – Which one to use?

A web site navigation bar/menu is a very important aspect of a web site. It actually decides the page design and layout. I suggest few basics principles in deciding whether to use a horizontal navigation bar or a vertical web site navigation menu system.

1) If the number of main links on the web site is less than 10 and they fit horizontally on a screen resolution of 800x600 pixels, use a horizontal menu. Since the navigation menu is horizontal, and is followed by the main textual and graphical contents of the web page, it gives you a chance to place graphics and other web page design elements on either side.
2) If the number of main links on the web site and more than 15, then put all these in a vertical navigation bar on the left side.
3) The contents (text or graphics) of the web site also dictate which navigation system use. If most pages have a lot of content, then prefer to go in for a left-side vertical navigation menu system.
4) If the site has to employ dynamic JavaScript drop down menus, use horizontal web site navigation because here the dynamic menu actually drops down rather than be displayed on the side of a vertical web site navigation menu.
5) Vertical web site navigation menus are also easy to update. If a site has 10 main links in a left-side vertical navigation system and the client decides (after about 6 months) that they want to add 5 more, we can simply expand the vertical menu without disrupting the design template. However, in case of a horizontal menu system, it would change the design template because the 10+5 = 15 links would surely flow to 2 lines creating two rows of links.
The above are simply opinions and you might not concur… but I suggest that you look at the site contents (the actual contents of web pages) and the number of main links you want before you decide which web site navigation system to use.

Navigation points that needs to be taken care

1) Provide feedback to let users know where they are in the website.

Feedback provides users with the information they need to understand where they are within the website, and for proceeding to the next activity.
Examples of feedback include providing path and hierarchy information (i.e., ‘breadcrumbs’), matching link text to the destination page’s heading, and creating URLs that relate to the user’s location on the site. Other forms of feedback include changing the color of a link that has been clicked (suggesting that destination has been visited), and using other visual cues to indicate the active portion of the screen.

2) On long pages, provide a ’list of contents’ with links that take users to the corresponding content farther down the page.

For long pages with several distinct sections that are not visible from the first screen, add a short, clickable list of the sections (sometimes called ’anchor’ or ’within-page’ links) at the top of the page. ‘Anchor links’ can serve two purposes: they provide an outline of the page so users can quickly determine if it contains the desired information, and they allow users to quickly navigate to specific information. Since ‘anchor links’ enable a direct link to content below the first screenful, they are also useful for getting users to specific information quickly when they arrive from a completely different page.

3) Do not create or direct users into pages that have no navigational options.
Many Web pages contain links that open new browser windows. When these browser windows open, the Back button is disabled (in essence, the new browser window knows nothing of the user’s past navigation, and thus is disabled). If the new window opens full-screen, users may not realize that they have been redirected to another window, and may become frustrated because they cannot press Back to return to the previous page. If such links are incorporated into a website, the newly opened window should contain a prominent action control that will close the window and return the user to the original browser window.
In addition, designers should not create Web pages that disable the browser’s Back button. Disabling the Back button can result in confusion and frustration for users, and drastically inhibits their navigation.

4) Clearly differentiate navigation elements from one another, but group and place them in a consistent and easy to find place on each page.
Create a common, website-wide navigational scheme to help users learn and understand the structure of your website. Use the same navigation scheme on all pages by consistently locating tabs, headings, lists, search, site map, etc. Locate critical navigation elements in places that will suggest clickability (e.g., lists of words in the left or right panels are generally assumed to be links). Make navigational elements different enough from one another so that users will be able to understand the difference in their meaning and destination. Grouping reduces the amount of time that users need to locate and identify navigation elements.

5) Ensure that tab labels are clearly descriptive of their function or destination.
a) Users like tabs when they have labels that are descriptive enough to allow error-free selections. When tab labels cannot be made clear because of the lack of space, do not use tabs.

b) Ensure that navigation tabs are located at the top of the page, and look like clickable versions of real-world tabs.
Users can be confused about the use of tabs when they do not look like real- world tabs. Real-world tabs are those that resemble the ones found in a file drawer. One study showed that users are more likely to find and click appropriately on tabs that look like real-world tabs.

6) Use site maps for websites that have many pages.
Site maps provide an overview of the website. They may display the hierarchy of the website, may be designed to resemble a traditional table of contents, or may be a simple index.
Some studies suggest that site maps do not necessarily improve users’ mental representations of a website. Also, one study reported that if a site map does not reflect users’ (or the domain’s) conceptual structure, then the utility of the map is lessened.

7) Frames are controversial because they can lead to confusing, almost un-navigable sites. Frames are probably the most effective when one frame is used as a menu frame, and another, larger frame is used to house content. Pages that have three – or more, heaven forfend! – Frames tend to leave the user wondering where he or she is supposed to click next.
It’s possible to create borderless frames (frameborder=”0”) and to disable resizing of the frame (noresize) and with no scroll bars (scrolling=”no”). This can lead to a very attractive effect which can also be very intuitive; however, you can also make it impossible for users to find what they’re looking for. For instance, if you disallow scrolling, and the user’s browser window and font selections make it so that an entire menu doesn’t fit on screen, the user will have no way to select the menu options that don’t fit.

Thus, if you decide to use frames and turn off scrolling, resizing, and borders, you’ll want to make sure that the page works for most users from most environments.
If you do choose to use frames, don’t forget to use “text only” navigation on the bottom on the content pages as well, just in case

8) Don’t design for the computer on your desk.
Design your pages to work with a variety of window sizes and browsers. If you make it beautiful for your screen, don’t assume it’s automatically beautiful on other people’s screens.

9) Provide links to navigation aids such as content, index, site map, and home page from every page in the site.


10) Counters. There are a number of services that offer counters, odometer-like inline images that show how many visitors your site has had. Including a counter on a page is usually a sign of a beginning or amateur site. Use Web log analysis tools to find out your usage patterns. If you publish this information, do so discreetly, not on every page via counters.


11) Use ’sequential’ menus for simple forward-moving tasks, and use ’simultaneous’ menus for tasks that would otherwise require numerous uses of the Back button.
Most websites use familiar ‘sequential’ menus that require items
to be selected from a series of menus in some predetermined order. After each selection is made, another menu opens. The final choice is constrained by the sum total of all previous choices.
Simultaneous menus display choices from multiple levels in the menu hierarchy, providing users with the ability to make choices from the menu in any order. Simultaneous menus are often presented in frames, and are best employed in situations where users would have to make extensive use of the Back button if presented with a sequential menu.

Sequential menus
These are the menus we typically use in websites. By clicking an option in the menu, it may cause another menu to appear on another page. This is done until the final object is shown. For example, by clicking on 'North America' rather than Europe, Asia or Australia, the next menu on the next page will show Canada, Mexico and the United States. By clicking on 'United States' the next menu on the next page will show all 50 states, etc. To change one of the menu selections requires clicking on the 'Back' button to return to an earlier menu.

Simultaneous menus
All menus are on the same page, generally in the same frame. All selections are made in the menus in one frame and the final response shows in the second frame on the same page. For example, selecting an item from an 'Age' menu, a 'Type of Cancer' menu and a 'Location' menu in one frame, provides the historical cancer mortality rate in the other frame. Changes can be made to the menus, and the final answer, without using the 'Back' button.

(Click on Image to Enlarge)

Sequential menus and Simultaneous menus

12) Provide ’glosses’ to help users select correct links.
’Glosses’ are short phrases of information that pop-up when a user places his or her mouse pointer close to a link. It provides a Preview to information behind a link. Users prefer the preview information to be located close to the link, but not placed such that it disturbs the primary text. However, designers should not rely on the ’gloss’ to compensate for poorly labeled links.

13) Users should be able to get from anywhere in the site to anywhere else without having to go back to the home page or dig through several other pages.

14) Make sure that your navigational links are named in a way that is straightforward and easy to understand. Links like “Home”, “About Us”, and “Contact Us” are fairly universal. Avoid navigation link names like “Cool Stuff”, “Other Things”, and “Click me”.

15) Remember to include a “text only” version of your navigation someplace on every web page (you often see a text version of site navigation on the bottom of web pages) for those few people who surf the internet with images turned off or who own (yes they
exist) “text only” browsers.

16) A home page should fit on one screen. Avoid the requirement to scroll.

17) On a page where reading is necessary, do not use flashing or motion because this can interfere with reading.

18) Place major section/category links horizontally, near the top of every page.
Most sites will place these links beneath the logo in the top left corner. If this doesn't immediately make sense, think about how you read a page of text: from top left to bottom right. Also, limit your major categories to a maximum of about eight. Give them too many choices, and your users won't make a choice at all.

19) Provide a search box for your visitors.
All users are different, and some will undoubtedly prefer to find the information they seek via a search box rather than your neatly placed, intuitive text links. A search box is an essential feature of any website.

20) Offer more than one route to the information.
Never ever force your user down a route you think they should follow. Each user is an individual and whilst we all use websites in similar ways, many will have their own preferences when it comes to moving through a website. There is nothing worse than having to follow link after link to try and get to the information you want, when all that was required was a link that took you there directly. There is no harm whatsoever in offering the same information on many areas of your site. For example, you may want to list your clients in a special section of its own. What’s the harm of also including your clients in the About My Company section? Why not display a list of your best-known clients on your homepage with links for further information? If you’re mentioning a client in amongst some copy, why not place a link there too?

21) The ‘3 clicks’ rule.
As a general rule of thumb, any information on your web site should be no more than three clicks away. Any further than that and users simply won’t make the effort to find it. So, at the very most, a navigation system should consist of a main menu, a sub-menu and a sub-sub-menu. Any more than that and users get lost. Remember, they just want to get in, get out, and move on.

22) Show them the way home.
Always, always provide a clearly marked way to get back to your homepage. Users expect this to be near the top left of your web page and it is traditional to make sure your logo also acts as a link back. Again, don’t play around too much with their expectations, they will simply get frustrated.

23) Prominently flag up your Contact page.
Something often overlooked is a clearly identified Contact Us page. It is often the main reason why someone visits your website, to see where you are and how they can get in touch. It also adds credibility to your business – they can see that you really do exist. Often though, contact details are mysteriously hidden on a website, and can only be found if you can be bothered looking for them.

24) Back to the top navigation link
If there is a lot of content to be displayed, the web page becomes very long, involving a lot of vertical scrolling. In such cases, it would be better if the content is divided and placed on separate pages. However, if that is not feasible (for whatever reasons), you should remember that by the time the visitor reaches the bottom of that long page, the navigation menu would be hidden from view. If that happens, it is good web design practice to display a "Top", "Back to the Top" or equivalent link at the bottom so that the visitor can be taken directly to the top section of the page where the navigation system resides. You can create such a link by using the HTML anchor tag

25) If your site uses Flash, provide also an HTML version for users who prefer a less fancy, faster site.

26) Provide simple text navigation links at the bottom of long pages, so users don’t need to scroll back up.

27) If your site is too big, provide Search capabilities. Include a search box in the upper right corner of your homepage, and a link to a Search page from your interior pages. Set your search box to search your site, not to search the web.
28) Create a custom error page that displays a simple site map with links to the main sections of your site. That way, you will not lose visitors that have followed a bad link to your site or who have misspelled your URL.


More Info:
Types of Navigation:

Text links in a web site navigation bar
The navigation bar can consist solely of text links. If the links are placed horizontally, they form the web site navigation bar [as I call it]. The links can also be placed vertically one after the other on the left side of a web page. The top horizontal row and the left side are two common places where you find the web site navigation system.

Navigation menu and images
You would have come across web sites in which the navigation menu consists of a series of images which are linked to different pages. Web designers usually add little JavaScript code to such image based navigation menu systems so that images change on mouse-over. This acts as a sort of visual guide – to let the visitors know which page they would go to if they clicked on the image. To learn JavaScript, you can go through the JavaScript tutorial. To know how to change images on mouse-over, you can read JavaScript image rollovers.
Image based navigation systems can also consist of image maps, in which one large image is employed. Different sections of this image link to different web pages. To know about image maps, go to the Advanced HTML Tutorial - Client side Image maps.

JavaScript Drop down dynamic menu systems
Dynamic drop down menu systems developed in JavaScript are very common nowadays. The reason for their popularity is the relaive ease of creation and maintenance. Also cross-browser visually appealing drop downs can now be created with the help of programs.
Creating dynamic JavaScript based drop down menus for web sites.

Flash based web site navigation menu
A web site navigation system can also be developed wholly or partly in Flash. There are three advantages of creating a Flash based navigation bar. Firstly, you can take use cool animation features of flash and provide your visitors a richer web experience. Thus, instead of simple image changes on mouse-over, the links on your Flash menu system can gradually fade-in and out or can play sounds on mouse-over. Secondly, it is easy to maintain the web site because you don't need to change each web page if the navigation system has to be modified. The Flash navigation system is a single flash file. Replacing this file will change the navigation menu on all pages! Thirdly, with a little ActionScript you can create beautiful dynamic drop down navigation menus.
Two disadvantages that I can think of are the requirements of the Flash plugin to view the flash file and secondly, search engine indexing. Google has started indexing Flash files but does it follow links included in Flash remains a question.

Navigation using Java
Just like images and Flash, web site navigation systems can also be developed in Java applets but this is not very popular.