Réseau Pharmaceutique Œcuménique (EPN)

4 Site structure

It is now time to define the site’s structure, which is the foundation on which everything else is built. Without it, the site will be a jumbled up, confusing mess.

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 straightforward.

4.1 Metaphor exploration

Three types of metaphors are useful to site design:

Organizational metaphors

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 organization is not usually a good idea – grocery store customers couldn’t care less about a supermarket’s corporate structure.

Functional metaphors

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 and glue to build up a picture.

Visual metaphors

Visual metaphors are based on common graphic elements familiar to most people in a 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.

Finally, 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.

4.2 Set it in stone

Get sign-off for the site architecture and set this in stone (meaning that it cannot be changed later in the design process!) as much as possible.

Many people have a hard time seeing something like the site structure listing and translating it to the way the site will work. Architectural-style blueprints can help. Here is an example: [please refer to the downloadable document]

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. EPN used the ‘Organizational Chart’ feature provided by Microsoft, accessed from within Microsoft PowerPoint.

4.3 Define navigation

Defining the navigation system for the site solves the problems of:

• How will users use the site?
• How will they get from one place to another?
• How do you prevent them from getting lost?

A global navigation system, which appears on every page of the site, 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 homepage.

Local navigation can take a number of forms. It can be a list of topics, such as those found at Yahoo!, it can take the form of a menu of choices, or it might be a list of a few related items.

4.4 Design document: Site structure

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.