Web Page Design and Navigation

In this lesson, we will discuss basic web page design and navigation rules.

A website's navigation reveals the overall structure of a website and is a system for linking the various pages within a website. As you begin building your website, you need to carefully consider how you will set up your navigation.

You can think of your navigation system as a map for your visitors to explore your website. It should tell people exactly what is on your site and also make it easy for them to get to any of your pages.

Because visitors from search engines can enter your website through any page, you need to have a consistent web page design and navigation scheme on every page. If you don't have a way for visitors to get to the other sections of your site, they will leave and go to another website that makes it easier to find the information that they are seeking.

Making your web page design and navigation logical

When pages are grouped together and sorted in a logical order, visitors can easily find the information that they need. The easiest way to start organizing your information is to put your related pages into groups, which we discussed in our lesson on organizing a website. These various groups will make up the main sections for your website navigation.

To help you visualize how this works, here is an example of how we could organize a hypothetical website about cat supplies that would be logical to visitors searching for cat supplies and products.

Get ideas on web page design and navigation from other sites

At this point, it may help to visit other sites that target the same market as you. If they have a logical web page design and navigation system, make note of it. You'll also want to take note of how their various sections are named.

The reason for this is because you want to have short descriptive titles for the various sections of your website. These titles need to make it clear what each section is about in the least amount of words as possible so that it will fit onto the standard navigation buttons.

As a general web page design and navigation rule, if you keep your navigation buttons relatively small, your graphic files will download faster for people with slow internet connections.

What are the different types of web site navigation?

Left-hand Navigation:
Because most people start reading a page from the top down and from left to right, having a left-hand navigation scheme is logical. It is also the most widely used navigation layout found on the internet.
Left-hand navigation can be made up of text links or graphic buttons. If you use graphic buttons, you will need to make sure that they have an alt tag so that a description of the button appears when a mouse hovers over it. This is beneficial for older browsers that don't support graphics.
Top Navigation Bar:
The second most widely used navigation system is top navigation. Large websites often have a navigation bar at the top, under the logo. Top bar navigation systems often include drop-down menus that show the pages of each section. A disadvantage of drop-down menus is that some older website browsers don't support the Java Script that is required to read the menus.
You can combine top bar navigation with left-hand navigation by having the main sections listed across the top of the page. With this combined system, when a visitor is within a certain section of the website, the left-hand navigation will show the various pages of that section.
Bottom Navigation:
It is also a good idea to include text links to your main sections at the bottom of each page. This is because some website browsers may not properly display the graphics that are used for navigation buttons or the drop-down menus created by various scripts.

Also, visually impaired visitors who use special software to translate web pages into spoken language may not be able to interpret graphic button and drop-down menus.
Breadcrumb Navigation:
Another web page design and navigation option is to use breadcrumb navigation, which can be compared to leaving a trail of links. Breadcrumbs clearly show the location of the page that a visitor is on within the website structure, and are usually located above the text on the page. Using our hypothetical cat supply store as an example, a visitor on our Purina cat food page would see the following breadcrumb:

home---»cat food---»Purina cat food

Each of these items would be a hyperlink, so that the visitor can go to any of the proceeding sections. Using breadcrumbs should not replace navigation bars or left-side navigation, but can be used in addition to them.

Basic Web Page Design and Navigation Rules

Once you have determined what the different sections of your website will be and how they will be incorporated into your navigation, you may want to keep some of these web page design and navigation rules in mind as you design your site:

Your navigation system should be consistent throughout your website.
Don't try to put every page of your website on your main navigation system. This is what the sections are for.
Every main section should be easily found from each page. This allows visitors to quickly become accustomed to your website structure.
You main navigation should be visible in the top section of your website so that people don't have to scroll down. If the links to all of your sections won't be visible in the top portion of your page, you will need to display the most important sections first.
There should be a link to your home page on every page but your home page. This way a visitor can go back to the home page if they get lost.
Use text links in combination with graphic navigation buttons.
Make sure that your text navigation appears as hyperlinks. Text links should usually appears as blue, underlined text. Using different colors can confuse your visitors.
Make sure that your navigation links display clearly against a solid background color.
Use short descriptive titles for your navigation links and buttons so that your navigation doesn't look cluttered. Use clear simple language when naming your navigation links.
Make sure that your button lengths are all the same size for your left-hand navigation.
If you use graphic navigation buttons, include an alt tags. An alt tag displays a description when you hover your mouse over the button. This is beneficial for the visually impaired that have special browsers that read text for them.

Creating a useable website through web page design and navigation

Navigation is one of the most important elements of creating a useable website. Making sure that it is logical and easy to use for your visitors is the most important website navigation rule.

After you have determined the navigation structure for your website, you can incorporate it into your design. You can also use it to help build your home page. In our next lesson, we will discuss what should be on your home page.

Next: Home Page Design
Previous page: Organizing a website