A very important point to consider while designing a website is proper navigation. You must ensure that potential clients or customers are able to find the information they are looking for without too many clicks. As a quick rule of thumb, visitors to your site should be able to visit all your pages by using, at most, 3 clicks. This is also important when considering search engine optimization (SEO) because search engines will only spider (or index) pages that are 3 clicks deep into your site. Not only does proper navigation allow users to find information they are looking for, but it also allows search engines to spider (or index) the information they are looking for. This is essential if you want high quality search engine traffic directed to your website.
Different types of websites employ different navigation styles, so it is probably best to visit websites similar to your own to see which navigation structure they have chosen. The most common locations for your navigation menu are either on the left side of the page or at the top of the page. When internet users view a website, they do so using what is termed as a “Z scan”. As soon as a page loads, most people scan from the top-left, across to the top-right of the page, then down to the lower-left, and eventually across to the lower-right of the page. So, it makes the most sense to locate your navigation menu in the area where the user is going to first look.
Smaller sites usually only require a static menu on either the side or top of the page. However, website that contains 10 – 15 topics on different pages may require a drop-down menu. These menus may use DHTM, JavaScript, or some other programming language. When the user’s mouse moves over a main topic category, boxes containing subcategories will drop-down, allowing the user to quickly find the information they are looking for. I f this type of menu is used, it is best to also include text-based navigation in another location on the page. Older browser versions may not support drop-down menus, and therefore a small percentage of people may not be able to navigate your website. Even more important though, is the fact that search engines will not be able to navigate and index your site if there is no text based navigation.
Another concern is accessibility by assistive technologies. For example, blind Internet users literally read the code of your page. Therefore, if a navigation menu is image based or uses image maps, alternate text must be used to allow the user to properly navigate the website. To make things easy, no matter what type of navigation I choose for a client’s website, I always include text-based navigation links at the bottom of every page to ensure that they are accessible to all Internet users and search engine spiders.
A Few Important Tips
- Plan your site navigation structure before designing your website to ensure that you are not forgetting any page links. It may be cumbersome to fix every page you have created because you a missing a link or two.
- The navigation menu must be clean-cut and uniform.
- Do not make the user scroll down the page to see the navigation menu.
- If you have too many links, use drop-down menus or create a site map.
- The navigation structure should be flexible enough to allow the inclusion of a additional links at a later date.
- Use short, clear and concise words in your links so your customers know exactly what type of information that page will contain.
- Make sure every page has a link back to your homepage. This can be achieved by providing a “Home” link in the navigation structure, and / or linking your logo image to the homepage.
- For larger sites, breadcrumb trails can be used to let the user know what section of the website they are in. For example, at the top of a certain page, the user would see: “Home / Products / Widgets / Green Widgets”
Paul Coulter owns and operates a custom web design company in Windsor, Ontario, Canada. If you would like to read more web design articles or contact Paul, visit his business's website: Cost Effective Web Design, Windsor ON
