Main Page Content
Web Site Architecture 101
Have you ever wanted a quick way to determine the architecture or navigation scheme for a site you're working on? Here's how, in three easy steps.
1. Top Level
Start with the top level of the site, which is usually several pages, including the home page. (You do want to include a home page, right? most sites do, because it's so reassuring to the site visitor.)
Next, consider the main menu or main navigation scheme or main site index or whatever you want to call it. Usually implemented as a "nav bar" across the top or down the left.
Think about all the nav bars you've seen on the web, and ask yourself this: was "home" grayed out when you were on the home page? (Here "grayed out" means inoperative, recognizably so: grayed out text, no underline, washed out image, different coloured font, whatever.) As you clicked around the site using the links in the nav bar, was the link for whichever page you were on grayed out? If so, why do you think it was done that way? Consistency? If not, why do you think it was not done that way? Was it a conscious decision on the part of the designer ("Why have a grayed out link that can't take you to the page you're actually on?") or was it done to avoid having to find a way to code the nav bar to gray out or disable that part of itself that it's currently on?
Okay, so that's the main challenge for the top level: before thinking about which pages belong at the top level, decide whether the top level navigation scheme should include grayed out links, and also whether to have a "home" page. Again, most people do include a home page, but once you understand that the home page is actually just another page among several pages at the top level, then it's easy to design the top level navigation.
2. Second Level
At the second level in a site architecture are the pages you navigate to by going "down from" the top level pages.
For example, a top level page called "facilities" would have second level pages which go into more detail about each of the facilities, a top level page called "accommodation" would have second level pages for different accommodation choices, and so on.
Here's the neat part: if your site is only two levels deep, every page on the site is no more than three clicks away:
- go up one level if necessary
- choose top level page to see what's in it if necessary
- click on link to desired second level page if necessary
Each of those "if necessary" clicks can be sidestepped. The idea is, any page should be accessible in no more than three clicks and fewer if possible.
Anyhow, when you want to get to another page in the same second level you're already in, it should only be one click away. This assumes there is a second level navigation scheme; if there isn't, then you'd have to go up one level to see it, right?
For instance, if you are anywhere inside the accommodation second level, you should be able to see links to all the other accommodation pages.
Having a second level navigation scheme is crucial so that you don't have to go up to the top level just to see the other choices in the same second level you're in.
[ Aside: you know that little box in directory listings like in Windows Explorer, where there's a little plus (+) sign that you click on, and it turns into a negative (-) sign, and the directory folder opens up and shows you what's in it? Isn't opening/closing those things a pain in the ass when you're first looking for a file? Why can't Windows Explorer open up all the folders below the one whose plus sign you just clicked on? Thank goodness the folders at least stay open. Can you imagine how hard it would be if you couldn't open another folder without first closing the one you're in? That's like going up and then back down. Doesn't it almost feel as hard to use the navigation schemes on some web sites? Hmmm, why don't most sites have the entire site map visible, or at least the portions that you've already visited, like folders you've already opened? Surely the site designers know that on the internet the site visitor has to wait while each click sends a page request to a computer that is thirty-seven internet hops away... I mean, those optical backbones are jiminy cricket fast, but still...
By opening all the folders in Windows Explorer you can eventually see everything, even if you end up having to scroll. This is essentially like a site map arranged in a directory structure, and in fact it's an excellent navigational metaphor for a site map. You can even get javascript and DHTML routines that'll generate this kind of navigation scheme for you... ]
Okay, so that's the main challenge for the second level: before thinking about which pages belong at the second level, decide how to implement second level navigation, whether the second level scheme includes grayed out links for the page you're on, whether the second level scheme also includes links to all the top level pages (highly recommended, otherwise you'll have to go up and then over, if you know what I mean).
You could also think about whether to have a third level or not, and what kind of navigational scheme it should have, and then a fourth level, and so on, but if you can get away with keeping it at two levels, than you can comfortably implement the no more than three clicks rule.
Your next step is to balance the number of pages at each level.
3. Balancing the Levels
Let's say you have twenty pages in your first mock-up of the site.
You can arrange twenty pages into levels in several ways:
- all on one level, where each page would have a nav bar containing all twenty top level pages
- each on a separate level, i.e. a vertical structure, where every page has one link up and one link down; can also be considered a linear structure, with links called prev and next, like a slide presentation
[ Aside: have you ever seen a technology manager use a strange laptop to give a slide presentation, lose his place, and start to hit the space bar, enter key, arrow buttons on the infrared clicker? pretty funny, eh? and it's only a linear system... ]
- some number of pages at each level
Luckily, there aren't too many choices when you have twenty pages and you want to arrange them into only two levels, so here they are:
| pages at top level | site architecture ( p = page ) |
|---|---|
| one | p |
| two | p p |
| three | p p p |
| four | p p p p |
| five | p p p p p |
| six | p p p p p p |
| seven | p p p p p p p |
| and so on up to twenty | second levels have zero, one or two pages |
My preferred scheme is to have the same average number of second level pages as the number of top level pages. This gives the web site architecture a sense of "balance."
So for a twenty page web site, the top level should have four or five pages at most.
To find this magic number, just take the square root of the total number of pages, and then apply some common sense to keep the top level from having too many pages.
For instance, if your web site has 500 pages, you really don't want your top level to have 22 or 23 pages. Perhaps you want no more than eight pages at the top level for any size web site, and let the average number of pages increase at lower levels.
So now you are ready to "balance" your web site architecture to achieve an optimal navigational experience.
Stay tuned for Web Site Architecture 102 which will discuss where the nav bars should go: across the top? down the left? are other options too scary?
Good luck!
