Organizing a Larger SiteFor complex sites, sophisticated layout and graphics can help organize and improve the looks of your site when used consistently throughout all of your pages. To see how you can make aesthetics and organization work hand-in-hand, let's look at a site that needs to present a large volume of information to several different audiences. Figure 22.5 shows the main page for my personal web site at http://www.michaelmorrison.com/. I know that this seems like shameless self-promotion, but my site is actually a good example of a reasonably sophisticated site in terms of layout and organization. My site includes individual pages for more than 40 computer books, as well as magazine articles, downloadable code and games, news feeds, a blog, discussion forums, and much more. It would be impossible to include all of that information on my site without a well-planned overall web site design that is efficient and consistent. Figure 22.5. The links on the left side of my personal web site lead to a surprising wealth of information.The first page a visitor sees should always begin by explaining what the site is about and provide enough introductory information to "hook" the intended audience. In my case, I include a quick news blurb followed by the latest blog entries on the main page. This keeps the main page fresh with content that changes frequently, thereby encouraging visitors to return to the site regularly. Granted, not every visitor is interested in knowing what the weather is like where I live, but then again, it's okay to have fun with your site and include some content just to liven things up a bit.
My site shown in Figure 22.5 and Figure 22.6 is organized into seven main categories (not counting Home or Administrator), accessible through the menu link icons that appear on the left side of each page. It's important to notice that these icons were chosen to quickly give visitors access to resources that meet their needs. Always organize the main links on your site according to the questions or desires of your visitors, not necessarily the structure of the information itself. For example, you can navigate to a specific discussion forum directly from the detail page on one of my books, as well as view all the forums at once by clicking Forums on the main menu. This redundancy is important because it allows visitors multiple navigation paths to arrive at information without wading through material they aren't interested in. Figure 22.6. You get this page when you click Forums in the screen shown in Figure 22.5.Figure 22.6 is the page you would see if you clicked Forums in the screen shown in Figure 22.5. The graphics and color theme are consistent with the home page, and the menu along the left edge of the page remains consistent with the main menu (the figure shows the page scrolled a bit to reveal more of the forums). Basically the entire framework of the page is the same on all pages of the site, with the main content area in the middle being the only part of each page that changes significantly. Visitors never have to back out of a dead-end page or feel as if they've gotten lost within a messy hierarchy of unorganized pages.
Getting back to general site design, keep in mind the following fact: Studies have repeatedly shown that people become confused and annoyed when presented with more than seven choices at a time, and people feel most comfortable with five or fewer choices. Therefore, you should avoid presenting more than five links (either in a list or as graphical icons) next to one another if at all possible, and definitely avoid presenting more than seven at once. When you need to present more than seven links in a navigation list, break them into multiple lists with a separate heading for each five to seven items. It will also help your readers navigate your site without confusion if you avoid putting any page more than two (or at most three) links away from the home page, and always send readers back to a main category page (or the home page) after they've read a subsidiary page. In other words, try to design somewhat of a flat link structure in which most pages are no more than one or two links deep as compared to the home page. You don't want visitors to have to rely heavily on their browser's Back button to navigate through your site.
|