Site Layout and Navigation

I think that site navigation and layout came naturally to me, so it has been difficult for me to teach other people

just what the principles were.

Site layout is not PAGE layout – the organization of information on a single

page – it is the organization of all the pages of information through the site. Site organization is achieved

through page topical focus, and navigation.

Navigation is how we access the pages, and how the means of accessing them is organized. Navigation

becomes part of the individual page layout, and part of how your information is organized on each page.

I did say in the intro that these topics overlapped and that sometimes it was a bit muddled! Now that I have

thoroughly confused you, let's see if I can make it a bit clearer.

A website is not like a book – a book has a table of contents, and then it progresses in a linear fashion

through each chapter.

Imagine that the book had a table of contents on every page, and that the book cover stayed visible across the

top of the book, while you progressed from chapter to chapter. Once you start changing the way a book works,

you also have to change some of the ways that the information is organized.

When you write a book, you make an outline first. You write down the chapters you want to write, and if any of

your topics break down into sub-topics, you might have sections in the book, and chapters within those sections.

In a book, you still have to make them linear, but in a website, you can make them multi-dimensional.

From the home page of the site, a visitor should be able to access all of the top level (most important) categories

of content in your site.

It does not matter whether it is a store, or an infosite, or a virtual office for services.

If you offer five categories of service, they'd better all be accessible from the home page, along with

other expected information (contact, about, and policies).

This means it is very easy to run out of space if

you have a limited navigation design to your site.

You can diagram out your site structure like a family tree.

The home page goes to all of these pages, and

these pages go to the next layer of pages, etc. Once you have it diagrammed out, you have to figure out a neat

and tidy way to put the links to the pages into a functional structure that is easy for the site visitor to figure out.

Fortunately, there are some standard ways of doing this. Probably the most popular is a three column

site, with the option for up to four navigation areas:

1.

A horizontal bar

– this can be near the top (over or under the header), or at the bottom of the page, or

both. Remember, top of the page says, “I know you want this information, so I am putting it where you

can easily find it.” Bottom of the page says, “We didn't think this was as important, but we knew you'd

want it, so we put it where you'd eventually find it.” (unless you have the same links top AND bottom, in

which case it is just an extra courtesy to have it at the bottom). This is a common place to put SITE

related links (as opposed to INFORMATION related links. Such links include Home, About, Contact,

Email, Policies, Submit an Item, Support, Guarantee Policies, etc. Information that has to be there, but

which is not part of the informational content or product or service offerings.

2.

The left hand navigation

– If you use left navigation, you ALWAYS use it for the direct site content –

that means your product catalog, service listing, topical information, etc. Organize it from most important,

to least important, top to bottom, or in alphabetical order. Make it make sense. If this is the only nav bar

you use, then put Home at the top, and all of your Site related links at the bottom of the list.

3.

Right hand navigation

– This is for “afterthought information” unless it is your only nav bar. If you do

not have a left nav bar, then use this one the same as a single left bar. If you do have a left bar, then use

it for secondary information. Links with photos to specials, related site links, secondary information which

does not fit on the left bar but which you want to have accessible from every page, etc.

4.

Nested Nav Box

– You can add a secondary nested navigation box for sub-category navigation, either

at the top of every page, beside the right navigation box, or just as plain text links at the top or bottom of

the page. You can also add them as indented links under the appropriate link in the primary navigation

bar.

 

Now, there are other ways to do navigation, and there is no real right or wrong rules about which type is best.

There IS a rule that helps you know whether you got it right though!

No Mystery Meat Navigation

(this is the term used for mystifying navigation by the owner of Websites

that Suck).

This means two things:

1.

Make it clear where your navigation links are.

Do not hide them under obscure photos, or

hieroglyphs. Make sure they are clearly labeled.

2.

Do not use obscure names for them.

Now, sometimes on a “fun” site, you can get creative with link

naming, but for the most part, with a serious business site, get to the point, be lucid and clear about just

what is behind the link! If it is for wide shoes, say “wide shoes”.

When you need to group certain links together to make them more logical, you can put a text header above a

group of them – they can be contained in a box, or not, according to your design preference. This works well for

sites with a limited number of top level categories, with few enough sub-topics to easily list all on the home page.

There are a few other rules about navigation:

1.

Use the same standard throughout your site.

If your site has subsections with topics that are fairly

different, that each have a different design, it is ok to have a separate navigation standard for each

interior section, but otherwise, stick to a single navigation scheme throughout the site. Do NOT make

your audience figure out where things are more than once.

2.

Be creative if you want to, but do not sacrifice intuitiveness.

It is better that your visitors can easily

figure it out. Unoriginal and functional beats creative and confusing any day.

3.

Generally search engines do not like more than about 100 links total per page.

50 links in a series

of related items in a single column is about the maximum you want to have in one place. More than that,

break them up, sub-categorize, or reorganize.

4.

Never create a page with a dead-end.

Make sure there is a way to get back to where they were before.

It is polite to make sure they can also get to the next thing that is likely to interest them.

Neat, well ordered navigation, with logical link names will help you with search engine optimization also

– search engines pay attention to link names, and they can help you get better traffic. Good site layout that puts

things where they are easy to find, means that search engines can find them easily too.

Site layout and navigation work together to make your site either easy or difficult for visitors to find what

they want. Poorly done, and it will confuse them and drive them way in frustration. Done well, it invites

them in and helps them feel you know your business.