Intro Part 1 Part 2 Part 3
If you've followed the first three lessons, by now you have
a good handle on your site's goals, who the audience will be, and what kinds of content
and functionality you'll need. It is now time to define the site's structure, which is the
foundation on which you build everything else.
Think of the site structure as a skeleton that holds the
body together. Without it, your site will be a jumbled up, confusing mess - kind of like
an amoeba. Do you want an unorganized, hard-to-use, crappy site? No! You want an evolved,
highly structured, and easy-to-use site that can walk upright on its own two legs.
After creating a good site structure, everything else will
fall into place. It can't help but do so! A well-designed structure makes it easy to
define a navigation system, and the two together make designing page layouts and templates
a snap. This is the last step before you can actually get into building things.
This next step, which is called "metaphor
exploration," can help refine your vision of the site's structure, but it's important
to remember that this step is only an exercise. It will give you many good ideas, but they
may be impractical, at best. Don't let that discourage you, though - it can be a lot of
It's useful to explore various metaphors in trying to
determine the site's structure. A good metaphor can go a long way in helping users
understand how to use and navigate the site. However, no metaphor is perfect, so don't
feel that you have to adhere rigidly to just one. You could take the best parts of several
metaphors and roll them into one (or you might not find any useful metaphors at all).
Three types of metaphors are useful to site design:
Organizational metaphors rely on the existing structure of
a group, system, or organization. For example, if you are creating a site to sell
groceries, your metaphor could be a supermarket, where products are grouped logically by
type (canned vegetables, dairy products, cereal, snacks, household items, etc.). Beware
that copying the organizational hierarchy of your client company is usually not a good
idea - grocery customers couldn't care less about a supermarket's corporate structure.
Functional metaphors relate tasks you can do on the site
with tasks you can do in another environment. Photoshop, a graphics program, relies on a
lot of functional metaphors: You can figuratively "cut," "copy," and
"paste" graphics on a computer - as though you were using real-world scissors
Visual metaphors are based on common graphic elements
familiar to most people in our culture. If you are designing a music site that allows
users to play songs, you might want to use the traditional "start,"
"stop," and "pause" icons found on CD players everywhere.
To begin exploring metaphors, gather your people and
brainstorm ideas. Review and evaluate each metaphor. Try not to discourage any suggestions
you do not like, at least not right away. A metaphor's punch might not be obvious right
away. Try to map out the major sections of the site by connecting elements from the
content inventory to each metaphor.
After what was probably a lively and entertaining
experience, you must choose a metaphor or a rationale for the site's structure. Remember,
no metaphor is perfect. The overall site might not be explainable as a metaphor, but
perhaps the navigation system (or smaller subsets of the site) can be.
Set It in Stone
Now that you have a rationale for the site structure,
you'll want to set it in stone. You can start off by creating a text-based, hierarchical
map of the site, called the "site structure listing."
The major sections you decided upon earlier are the
"roots" of the site structure listing. Fit them to your rationale or metaphor.
Next, map out the organization of each section with items from the content inventory. As
you go deeper into the site, indent the lower levels. You will repeat this process several
times. Over time, focus on smaller parts of the site. You should end up with a list
looking like this:
Next you will want to visualize this
list. Many people have a hard time seeing something like the site structure listing and
translating it to the way the site will work. Architectural blueprints can help. Here is
Architectural blueprints are visual representations of the
site structure. They are diagrams showing how elements of the site are grouped and how
they link or relate to one another.
You'll need to make up a legend that defines how on- and
off-site links, page components, pages, and groups of pages are represented in the
blueprints. You might want to distinguish among parts of the site that perform a function
or transaction, parts of the site that are generated dynamically, and pages merely
comprised of text. If your site is large, you may have to make several architectural
blueprints, starting with a generalized overview of the site and working toward diagrams
with a finer and finer grain.
How will users use the site? How will they get from one
place to another? How do you prevent them from getting lost? Defining the navigation
system for the site solves these problems.
Take a look at the site structure listing. What are the
major sections? These are excellent candidates for the global navigation system,
which appears on every page of the site and enables users to quickly jump between
sections. If at all possible, try to limit the number of global navigation elements to
between five and seven. Another good idea is to incorporate the branding of your site -
the company logo - into the global navigation as part of the link back to the site's
Local navigation can take a number of
forms. It can be a list of topics, such as those found at Yahoo
and GeoCities. It can take the form of a menu of
choices such as the GeoCities members area.
Or, it might be a list of a few related items, such as this lesson's page titles that you
see farther down this page.
It is essential that you document the global navigation
system and as many of the local navigation systems as you can. This can be as simple as
compiling a list of elements that make up each system.
For example, Webmonkey has a global navigation system that
can be documented as a list: "The global navigation device contains links to all the
major sections of Webmonkey: design, HTML, dynamic HTML, etc." A local navigation
definition for Webmonkey might be: "For a multi-part article, a list of links to each
section appears at the end of each page. Use the title of a section as a link to that
Document: Site Structure
Documentation time! Create chapter 4 in your design document called "Site
Structure." Write a summary or metaphorical explanation about the driving rationale
behind the site structure. Add the site structure listing. If the site structure listing
is too long, add a shortened form and include the rest as an appendix. Compile the
architectural blueprints and add them to the design document. Document the global and
local navigation schemes. As always, publish these results so that everyone can see them.
Next, Part 5 :
Intro Part 1 Part 2 Part 3 Part 5