WEB DESIGN -- The Navigation System

Where is it ? ? ? ?

Trying to find information on the web can become a challenge. First you sift through thousands of sites with your favorite search engine. Eventually you arrive at the site that you think has the information that you want, but the search begins again. Where is the information on the website? There are (probably) pop-ups when you enter the site, as you browse around, and maybe even again when you leave. It doesn’t take long before you are completely frustrated. It is important to think about two things when designing our site:
- our visitors have probably been to other sites before visiting ours
- how will they find the content they seek on our site.

All I am going to say in this newsletter about the first item is this, design your site to load quickly without a bunch of pop-ups, flash intros or doorway pages. The people coming to your site want to find your content, not a bunch of other stuff. Enough said…

Building a good navigation scheme for your site is essential. But it does take some careful thought. So let’s get too it.

Use Paper

Yup, start building your website on a sheet of paper. Do not start by sitting down at the computer! It is much easier and more fluid to use a good old sheet of paper and pencil. It is easy to make changes and change things as you go. If you have paper larger than 8 ½ x 11, use it. If not use multiple sheets.

Start by drawing a small circle in the middle. This is your home page. It has info about the church, service times and a few other things. Now think about the other information that you will have on your site. Draw a circle for each of the pieces of content that you will have. Then draw a line to link the new page to your main page. If you have pages the come off of pages other than the main page, then link them appropriately. Soon you will see your website and it’s navigation scheme taking shape.

Don’t worry if you aren’t going to have all of these pages done when you first release your site. It’s ok to start small, but you want to have a big plan that will encompass everything that you will eventually have on your site.

Once you have sketched out how all your pages relate to each other, you will want to use a separate sheet of paper for each page. Give it a title and heading and a rough idea of the content on the page. Is it text, an image, links, etc? You don’t have to be too specific, but specific enough that you know what is on the page and generally how it is going to look.

Where Do I Click?

One important decision that will be made about now is what type of navigation will you use (image map, text links, buttons) and where will the navigation goes (top of the page or left of the page are the most common). Note that the top and left of a page tend to load first, which is a good thing for navigation.

Do not skip this step! This is very important, because it will be the same on every page. I know, that sounds boring, but navigation should be boring. Remember, the people visiting your site are interested in your content (they are looking for something). They are NOT interested in your navigation scheme. They certainly are not interested in trying to figure out a different navigation scheme on every page. So keep it simple and keep it consistent.

This will also play into how your pages are laid out. If you are putting text links down the left side of every page, this obviously will have some impact on what your pages look like.

Where Did That Link Go?

Be careful with the colors of your links. If you are using text links, they change color if you have already visited a page. Make sure the background behind the link has plenty of contrast ratio regardless of the link's color changes. Some sites use rollovers (links or buttons that change color when the mouse moves over them) be sure that the color will be visible all the time. Remember that many people have some form of color blindness and even more people have old monitors, or poorly setup colors on their monitors – so high contrast is a must.

Also, if you are using a graphical navigation scheme there are some additional considerations. One is page load speed. Make those navigational graphics small or better still use text! You should also provide alternate text links for the graphics. Some people have graphics turned off and they will never see your beautiful graphics. Blind people may be using a screen reader and they won’t be able to find the links on your page either. See Site Accessibility for more information on this topic. Search engine spiders won’t be able to find your links either, if they are graphical with no text behind them.

Check Your Work

Paper is good, but you need to check and make sure your navigation system works in the real world. Test every link on every page. You don’t want any 404 (page not found) errors. And you certainly want to make sure you can get to every page from every other page in your site. All too often, all the links work (when you run the link checker), but some of them go to the wrong destination.

Not only do you want to check your links, try to get your friends to check out your site – preferably while you watch. You can learn a great deal by watching what they do. Often we are too close to our designs to be objective. I once had someone send me a page to look at. I couldn’t figure out how to move around on the site. The links where hidden off the main page (I had to scroll down to see them) and hidden in a graphic that didn’t look like navigation buttons. This didn’t seem optimal to me, but the person who sent it to me didn’t see any problem. Get opinions from others, you don’t have to necessarily do everything they suggest. But give their suggestions careful consideration.

Design your navigation structure with the visitor in mind. Eliminate any obstacles that will annoy and frustrate them, causing them to leave and never wish to return. If you make it easy for them to find the information they seek, you will gain many happy  return visitors.

Content Contributor: David Buxton