Thinking of a web site
as an architectural design is actually a good analogy.
It must have a structure expressed as continuity in the
layout scheme. It must be functional in the value of the
things that it offers the visitor. It should be pleasing in
the form of its design and detail. And it should be easy for
a first time visitor to find their way around. When finished,
your web site can be comparable to a skid row warehouse or to
an architectural jewel such as "Falling Water" by
Frank Lloyd Wright.
In a previous article I discussed how quickly a web page
should load. The easy aspect about writing an article on load
speed is that the objective is generally obvious, to load
your pages as fast as possible. Discussing navigation is more
subjective. The motherhood and apple pie objective is easy,
"make your site navigation simple and intuitive".
What does that really mean? One person's intuitive navigation
is another person's spaghetti network.
No matter how good an artist you are, designing a navigation
scheme is not an artistic endeavor. It should be cold, functional
and so simple and intuitive that your visitors never realize
that it is an integral component of your web site. In fact,
a good website navigation
scheme will probably never elicit a compliment from a visitor.
("Hey, I just visited your web site, the navigation was
great"). A bad scheme will. ("I tried visiting your
site but I could not find anything so I left")
You cannot design a decent web site without first designing
the navigation system that your visitors will use to find
their way around. A web site's navigation scheme is the 'human'
component upon which it will work or fail.
I first became involved in computer graphics and animation
as a post-graduate architecture student. I was taught
that the first thing an Architect does when designing a new
building is to create a balloon design. This is a very rough
sketch that shows the relationship between the various functional
areas of a building and how people move and relate to those
areas. A web site design should start in exactly the same
Before worrying about the appearance, nifty graphics or
promotional text on your site, you should first consider what
the most important functional areas are that you wish your
visitors to experience. Draw rough balloons on a piece of
paper to represent these functions and then draw lines between
them to represent how people are going to move between them.
Should it be a direct path or do you want them to pass through
another functional area first? Move the balloons around until
you have each main function sensibly positioned with efficient
paths between them.
Another University I am familiar with did not put any paths
between the buildings at its new campus when it was first
built. Instead they left grass between them for the first
year or two. Then they built the paths wherever the grass
was worn out by foot traffic. Although you cannot avoid creating
links when you create your site, you should be aware of where
your visitors wish to go and ensure that they can quickly
and easily be able to do so. Use a good stats analysis program
to find out. Once you know where your visitors are going,
you can improve your navigation by placing links at appropriate
Graphics can add a lot to a web page but text usually generates
more links. Whenever you write about any topic, product or
service on another web page, include a link within the text.
Don't expect the reader to look for it. If your graphic links
are not absolutely clear, add text so that your visitors don't
need to guess where they go.
Once your visitor has figured out your navigation scheme,
don't change it. Repeat the same navigation on each page.
Use the same text in the same color at the same location.
As I said before, this is really not the place to express
your artistic skills.
Finally, a visitor will have a hard time knowing where to
go if they don't know where they are. Clearly identify each
page in a fashion that your visitor can quickly locate and
identify. This can be in the form of a large page title or
a small tag. The key is to make it obvious and consistent
from page to page.