Creating an Effective Web Site - Part II  pwp home  >   Reference Library  >   Optimizing  >   Effective Web Site Part 1  >  Effective Web Site Part 2

Part 1 of this two-part installment, we looked at laying the foundation for an effective website by making design decisions about consistent elements to create a special look and feel across all your pages. This culminates in the creation of a page template, as well as conscious deviations from this template for 'special pages.' In this installment, we will look at choosing a structure for the site and creating a 'storyboard' to design and manage.

All sites are composed of "nodes" or pages, containers for related chunks of information or experience, and links, which establish the relationships between nodes. What structure will support your goals and user needs best: one content-rich page, perhaps supplemented with external links, a feedback form, etc.; a linear, book-like sequence; a hierarchical or clustered organization; a random collection? What about special elements: need a map? a catalog? a tutorial?

Let's look at some alternative site structures:

LINEAR: like a book, the main introductory page is followed sequentially by page 1, 2, 3, etc. Navigation links should allow users to go back, next, and home. Still make each page stand-alone for random surfers. Have a 'kicker page' at the end.

HIERARCHICAL: Here, a main introductory page serves as an index to lead users down different paths, say topic 1, 2, and 3. Each of those topic pages may lead to sub-pages with more and more detail. A user follows interesting paths as deep or shallow as they want before returning to the index. Within topics, pages can be arranged hierarchically, linearly, or in clusters with no order. Navigation aids should provide a way back and next within the topic, up to the main topic page, and further up to the home index. All paths lead to a 'kicker page.' The hierarchical structure is like a film: The plot is your message; the zoom level of a page is how close to details it is: a long shot provides an overview or basic information, a close-up provides specific details. A variation: offer users 2 sites in one: say a 'lite' path with more generalized, easy-to-digest information. and a 'heavy' path with more technical information., for instance.

RANDOM: The main introduction page links to other pages, usually on the same very general theme, but arranged in no order. Users hop around anywhere that interests them. Help them navigate with maps, menus, and home page links.

Now, the fun part: create a "storyboard" of your site, an overall plan showing structure, sequence and connections. I use big Post-it notes stuck up on a poster board, but pages taped to the wall can work just as well, though not as portably. Put the function and general theme of each node on its Post-it. Now use yarn to connect the nodes to show links, including external links to outside resources. This format lets you see how the structure flows, and move nodes and links around, adding, removing, and combining. Now, using your page template, sketch out each page roughly on its Post-it, showing the consistent elements, where the content will go, graphic layout, etc. Framed sites take a little more work; if more than one frame will change with a single click, make sure you show that with your yarn connections.

Remember: each node should have a good reason for being there. Whatever the structure, provide useful content on each page so users don't have to navigate thin pages to get to useful stuff. Your storyboard may make unnecessary pages more obvious. And always provide a way for users to know where am I? Not just the page title, but its place in your site structure. Navigation bars, maps, logo and title size all can indicate the level of the page and how it relates to others. And always provide a way out.

Using this storyboard technique helps move your site from a hodge-podge of pages to an effective, consistent experience for your visitors.