by Eric Ladd
Many of the issues that go into designing a single Web page also go into the design of an entire Web site, but some site design considerations are unique. This probably doesn't surprise you because a Web site is more than just a collection of Web pages; rather, it is a communications tool crafted with very specific objectives in mind.
A book this size could be written on all of the issues that go
into the design of a quality Web site. This chapter summarizes
only the major concepts and elements of a good design. By looking
at other sites and doing design yourself, you will build up your
own good design sense and the skills you need to implement a first-rate
Web presence.
| TIP |
Check out the UseNet newsgroup comp.infosystems.www.author to learn about design concepts, approaches, and philosophies used by other Web designers around the world |
Just as with Web page design, Web site design should be driven by audience considerations. It doesn't matter how powerful a server you have, how skilled a Java programmer you are, or how flashy your graphics are if your message is lost on the end user. If there's just one concept you take away from this chapter, let it be that you keep your audience uppermost in your mind during the design process.
Audience characteristics can fall into many categories. Because most sites have to be designed to provide maximum audience appeal, this chapter looks at two broad, yet important, categories:
Only a mindreader can know how all of your users think, but you can usually make some valid generalizations that can guide you during the design process. As you assess different cognitive characteristics of your audience, think about how you can use them to achieve the following design objectives:
The equipment your audience has access to is another key characteristic you have to assess. Thankfully, HTML is platform-independent, so the type of machines your audience is using should be largely irrelevant. As long as they can run some type of browser program, they should be able to view your pages.
There are other technology concerns that do influence design decisions. These include
| TIP |
Many sites provide a notice to users on the home page that inform them of combinations of browser software and plug-ins the site is best viewed with (see Figure 2.4). Many of these notices also include links to pages where you can download the software. This is a helpful service that can maximize a user's experience while visiting your site. |
| TIP |
Set up separate links to large multimedia items and indicate the file size parenthetically next to the link (see Figure 2.5). This lets users decide whether they want to download the file or not. |
By now, you may have spent so much time assessing audience factors that you have forgotten your reasons for wanting to create a Web site. User considerations are of paramount importance, but you should not lose sight of your own motivations during the design process.
While planning your site, you hopefully composed a mission statement or list of objectives that articulates why you want to create a Web site. This statement or list is another factor that should contribute to the site's design. There's no reason to create a site that doesn't accomplish what you want it to.
Use your mission statement or objective list to ground yourself
during the design process. Keep checking your design against your
reasons for designing the site in the first place. By balancing
end-user considerations with your own objectives, you'll produce
a site that has broad appeal and that helps you attain your communications
goals.
| TIP |
Post your mission statement or objective list in a public place on a whiteboard or on newsprint so that you and your design team (if you have one) can always be reminded of why you're doing what you're doing. |
Audience characteristics and your own objectives for doing a site are the "human factors" that go into Web site design. As you begin to focus on the site itself, you'll discover that two other factors are vying for a visitor's attention: the information you're presenting and the site's graphical look. Just as you had to strike a balance between audience characteristics and your objectives, you need to do the same for these site-related factors as well.
Two approaches for structuring content have emerged during the Web's short history. They are the drill-down or layered structure and the flat structure.
Most early Web sites made use of the drill-down structure. Drill-down means that the information in the site is layered several levels beneath the home page of the site and that users have to drill down through those layers to see it. The idea is much like having to navigate down through several folders and subfolders to find a desired file in Windows 95 or Macintosh (or down through several directories and subdirectories to find a desired file in DOS or a UNIX system). Yahoo uses this structure on its site (see Figure 2.6). The drilling-down occurs as you move from general to specific topics.
Figure 2.6 : It's a long way down the Yahoo hierarchy to the calculus jokes!
The drill-down approach provided a systematic way to structure
content on early sites, but users quickly grew tired having to
plow through so many levels to get the information they wanted
and then having to navigate back up through the levels to move
on to another part of the site. User feedback about so much layering
led designers to consider different techniques. The flat structure
emerged from these deliberations.
| NOTE |
One advantage of the drill-down approach for site administrators is that they can interpret the number of levels a visitor drills down through as a measure of his or her interest in the site's content. |
The flat structure isn't so much of its own structure as it is a lessening of the drill-down approach. Every site will probably have one or two levels of drill-down (from the home page to any subordinate page, for example), but you can seek to minimize the number of layers so that there are fewer barriers between users and the information they want. There are two ways to do this:
A sharp graphical look is important to your site as well. Oftentimes, it is the graphics that hook a visitor and get them to stop and read your content. Additionally, a consistent look provides a unique identity for the site and puts the "feel" in "look and feel."
The rule of thumb you should remember when developing a look and feel is that it should enhance the delivery of your message without overpowering it. A well-done look and feel initially draws in users and then fades into the background as they move around within the site. If you throw in too much glitz, you run the risk of detracting from what you really want to get across.
The next four sections share some other design ideologies to keep in mind while developing a look and feel for your site.
The fact that browsers can display images doesn't justify heaping a whole bunch of them onto all of your pages to create a high-impact look. Don't forget that some users have text-only browsers and others have slow connections. These people will not have the ability or the patience to view a site that relies heavily on a lot of graphics for its look.
Try to keep the number of graphics you use to a minimum. Graphics
for logos and navigation are almost essential, but give careful
consideration to the images you put in your pages beyond that.
Make sure that they add value to the site by enhancing the presentation
of your content.
| TIP |
Once you decide on a set of images to use, continue to use the same images throughout the site. This helps promote a consistent look and, once the images are stored in users' caches, they'll spend less time waiting for pages to download. |
A good background should stay exactly there, in the background. If a background is so obtrusive that it interferes with presentation of content in the foreground, you're less likely to get your points across.
Many sites these days have gone to a plain white background. While this may seem rather ordinary, it supports a clean and professional look that many users appreciate and it keeps download times to a minimum (see Figure 2.8).
Figure 2.8 : Hewlett-Packard's plain white background is common on many corporate sites.
HTML supports the use of other colors as backgrounds. If you choose a color other than white, you need to make sure that there is sufficient contrast between the background color and all elements in the foreground. For example, if you change the background color to black, you need to also change the color of your body text. If you don't, you'll have black text on a black background and your content will be invisible!
Images can also be used in the background (see Figure 2.9). Background images are read in and tiled to fill the entire browser window. Again, the critical thing is that the background image does not intrude upon the content in the foreground. Additionally, you'll want to design your image so that it tiles seamlessly. Being able to see the boundaries where the tiling occurs can distract users from the information you want them to see.
HTML provides control over other page colors, too. Controlling
background and body text color was mentioned in the previous section.
You also get control over the color of three different types of
hypertext links: unvisited, visited, and active (a link is active
only for the instant that the user clicks it). Colors for all
three types should be chosen so that they provide good contrast
with the background color or image. Beyond that, it is a good
visitor service to color visited links a different color from
unvisited links because this provides a visual cue to users as
to where they've been in the site.
| TIP |
Hypertext link colors are a nice way to work in your company's color scheme, if you're designing for a corporate site. Painting link colors in this way subtly promotes corporate identity throughout the site. |
Many designers choose to represent major sections of a site with icons, small images that are meant to convey what type of content is found in each section. The site in Figure 2.10 makes good use of icons including books for the Publications and Documents section and a speaker's podium for the Speeches section.
Figure 2.10 : Icons connote the content or functionality in key parts of your site.
The critical test that icons must pass is the intuitiveness test. Because you're using a small image to communicate a possibly complicated idea, you need to make sure that users can make a fairly quick association between the image and the idea. The best way to do this is to test the icons with potential users. Get some people together who know nothing about the site you're designing and show them your icons. As they see each icon, ask them to write down what Web site information or functionality might be associated with it. After you've gathered their responses, share the icons with them again and ask for their feedback on whether they think the icon truly represents what you want it to. By combining user responses from the first viewing with feedback from the second viewing, you should be able to make a good assessment of how intuitive your icons are.
Expectation is another powerful mental process you can harness. Anticipating and meeting users' expectations will impress them and make it more likely that they'll come back to your site.
Over time, Web users have come to rely on certain functionality being present on most Web sites. The next several sections catalog these features so that you can consider building them into the design for your site.
A site-wide table of contents lays out everything available on the site, usually as hypertext links so that users can click and go where they want (see Figure 2.11). Depending on the size of your site, it may take some time to compile and code a comprehensive table of contents, but remember that users will appreciate the quick access to all parts of your site.
Figure 2.11 : Intel's table of contents uses indenting to indicate subordinate levels of pages.
Indexing your site to make it searchable is a great way to make any part of your site available without a lot of drill-down. Figure 2.12 shows you Bell Atlantic's search page. Many such pages are as simple as the one input field you see in the figure.
Outfitting your site with a search engine may be easier than you think. Some search engine programs like ICE are publicly available and fairly painless to install.
Comprehensive navigation options should be available to users on every page. At the very least, you need to provide links to every major content section of your site. Additionally, you should think about providing links to important functional areas of the site like the table of contents and the search engine discussed in the preceding sections.
You don't have to pack all of these navigation options into one place, though. One approach used on a lot of sites is to put links to major sections at the top of a page and links to the functional areas at the bottom (see Figures 2.13 and 2.14).
Figure 2.14 : And you can jump to one of the site's functional areas from the bottom of the page.
People who visit your site frequently will appreciate a What's New section (see Figure 2.15) so that they can quickly find out what has changed since their last visit. This spares them having to go through the whole site to discover new content.
Figure 2.15 : Apple Computer organizes its What's New section by date.
You can maintain your What's New section manually or you can have it generated on the fly by your Web server by using a publicly available script. These scripts check the files on your site for their last changed dates and displays a list of files that have been altered within a specified period of time. The pages generated by these scripts don't tend to be very descriptive, so it's best to maintain your What's New section manually if you have the resources.
Sign in, please! Guestbooks provide a record of visitors to the site. Signing the guestbook is almost always voluntary, but there are usually links to the guestbook page from the home page that encourage visitors to sign.
A guestbook uses HTML forms (see Figure 2.16) to gather information about the visitor and then archives the information on the server. Try to keep your guestbook form short. Users who are willing to sign may change their minds if they see that they have to fill out an extensive form to do it.
Figure 2.16 : Sign in on Joe Boxer's site and your information is posted in their guest log.
You should always be gathering feedback on your site so that you can build upon and improve it. Putting a feedback mechanism on your site is a great way to collect opinions from people as they visit.
Feedback mechanisms can take two different forms. A simple way to support user feedback is to place an e-mail hypertext link on your pages. By clicking the link, users open a mail window in their browsers where they can compose and send a feedback message to you.
The second approach is to create an HTML form that asks specific questions (see Figure 2.17). This requires a bit more effort than setting up an e-mail link, but it does provide the advantage of gathering responses to a standard set of questions.
A mailing list gateway allows users to subscribe to mailing lists that will keep them up to date on changes to the site or on some other topic of interest. Figure 2.18 shows the mailing list subscription page from Vince Gill's High Lonesome Sound site.
Threaded discussion groups are very much like having UseNet newsgroups
right on your site. Users can participate in discussions about
the site or topics relevant to content on the site by posting
their ideas and opinions or by responding to posts by others.
Chapter 40 provides details on how to set up threaded discussion
groups on your site.
| CAUTION |
You may want to consider making your threaded discussion groups moderated to avoid flamewars. Flamewars are passionate exchanges between users that are typically disparaging and frequently even vulgar. Moderating your discussion groups lets you filter out inflammatory posts and prevent flamewars before they happen. The downside of this is that moderating a newsgroup often requires a lot of time and resources. |
Chat channels let users interact in real time. Some sites support
a general chat channel where users can discuss the site or topics
that relate to site content. Another application of chat channels
is to provide a question-and-answer session with a subject matter
expert or celebrity.
| TIP |
Most chat servers have a feature that lets you record a chat session. Reviewing the transcripts of a chat is a terrific way to gather feedback and other ideas for improving your site. |
As browsers become better able to display multimedia content inline, you'll see more and more of it on Web sites. The biggest impediment continues to be bandwidth. Most multimedia files are quite large and may take several minutes to download.
You have many options when it comes to providing multimedia content, including
Most multimedia files require a helper application or plug-in to view them, so be sure to notify users about what viewer programs they need to download before they get to pages with multimedia content.
Audio Audio clips are especially popular on music sites where they allow a visitor to preview parts of an album before buying (see Figure 2.19). Audio files come in several formats including .Wav, .Au, and .Aiff for sound bytes and .Mid for music.
Streamed audio is different from other audio formats in that the sound is played as information is received by the browser rather than after the entire file is downloaded. Progressive Network's RealAudio (.Ra) is the leading streamed audio format. You can learn more about RealAudio by directing your browser to http://www.realaudio.com/.
Video Computer video files also come in several formats. The most popular are MPEG (.Mpg), QuickTime from Apple (.Qt), and Video for Windows from Microsoft (.Avi, short for Audio Video Interleave). Computer video files are also huge, usually on the order of 1M of information or more for a video clip that lasts only a few seconds. Combine this with limited bandwidth and you can see why Web video hasn't attained the prominence that other multimedia forms have.
Nonetheless, progress is being made on the Web video front. Streaming can allow video to be displayed as it is received, though this technique is still in a formative stage. Microsoft made a bold move by making ActiveMovie technology available for Internet Explorer 3. ActiveMovie eliminates the need for video helper applications by enabling Internet Explorer to display MPEG, QuickTime, and Video for Windows files inline.
Macromedia Director Movies and Shockwave Macromedia Director is an authoring tool for composing multimedia presentations or movies. A movie draws on text, graphics, audio, and video information to create interactive applications that can be run on Macintosh and Windows platforms or be delivered over the Internet (see Figure 2.20).
Figure 2.20 : Independence Day's Web site features Shockwave-powered multimedia presentations.
Director movies are viewed in a browser using Shockwave, a plug-in freely available from Macromedia. Since Director movie files are typically quite large, Macromedia also provides a utility called AfterBurner, which compresses the movie file and optimizes it for transfer over the Internet. Chapter 29, "Shocking Your Web Site," provides more details on Macromedia Director and the Shockwave plug-in.
VRML VRML (rhymes with "thermal") originally stood for Virtual Reality Markup Language. It was later changed to Virtual Reality Modeling Language because VRML code isn't really markup. It is a three-dimensional analog to HTML that allows you to render interactive 3-D environments in real time over the Web. VRML worlds are viewed with a VRML browser or with a Web browser with a VRML plug-in.
Part XIII, "The Virtual Reality Modeling Language," provides extensive coverage of VRML, including chapters on creating VRML objects, VRML worlds, and moving VRML worlds. You can also consult Que's Special Edition Using VRML for more information.
Once you've completed your design work and have a first cut of your site developed, you should consider testing the design and looking for ways to improve it before final roll-out. These last three sections give you some different tests to try.
Taking the site for a test drive with some potential users is
a great way to gather ideas for making it better. To do this,
round up some people who have some degree of Web-surfing experience
but who have not seen the site. Turn them loose on the site and
encourage them to look for things that they would change. You
can even give them a feedback form to fill out with a standard
set of questions and an open-ended question for other thoughts
they may have.
| TIP |
If you do pilot your site with a group of users, watch them as they do it! You'll be amazed at what you can learn from facial expressions and body language! |
As you developed the site, you probably used just one browser. Once you're done, you owe it to your audience to view the site in other browsers, including at least one non-graphical browser. Record any corrections needed and go back to your HTML files and look for ways to address the problems you find.
You may have to send people home to sign on from there to accomplish this one, but it's well worth the effort. Have them check the pages on the site and time how long it takes for each to download. One popular rule of thumb suggests that it shouldn't take more than 15 seconds for each page to download. Identify pages that take longer than this and look for ways to scale back the amount of information.