Before sending their latest, sleekest models into mass production and signing up aging musicians for advertising campaigns, auto makers spend extraordinary amounts of time and money repeatedly pulverizing their new creations. They hurl the cars into steel walls, race them over bone-jarring terrain, and leave them baking for hours at supernova temperatures. The companies know that it’s safer-and cheaper-to discover potentially fatal flaws and malfunctions before they offer their products to the public.
This is a lesson that Web developers would do well to learn. Although a poorly conceived Web site will probably not spontaneously catch fire, it may nonetheless cause serious heartburn for the luckless designers who must rebuild the flawed site from scratch.
Making changes to a Web site once it’s finished can be a costly and painful experience. But you can avoid this scenario by first creating and testing a
of your site-a scaled-down working model of the finished product. A prototype lets you get a first look at what users will see as they click through your site, and it can expose unforeseen flaws in your structure and navigation. This gives you a chance to fix glitches
they send your site-and your reputation-up in flames.
Best of all, building a Web-site prototype can be quick and easy.
A Web-site prototype is a bare-bones, clickable model of your site. Although it’s just a collection of simple, hyperlinked documents, you can use it to set up and test your site’s content organization and ease of navigation.
Building a working model of your Web site-even though you could spend that time building the actual site-is worth the effort. Your Web site’s launch is not the time to find out that users get hopelessly lost in a maze of dead-end hyperlinks and confusing paths. By laying down a site’s groundwork early, you save yourself forehead-slapping moments and angry user e-mails later on.
The best time to start the prototyping process is the moment after you decide you’re going to build a Web site. Although there are several effective software tools that can help you prototype your site (see ”
A Helping Hand
“), you can actually complete the entire process with nothing more complicated than a pen, a pad of paper, and a basic HTML editor.
Step1: Organize Your Content
Before you start building your test site, you should spend some time and mental energy deciding how your final site will be structured. Knowing that you want a site devoted to the grooming habits of monkeys, and actually presenting the information in the best way, are two very different things. But no matter how hefty-or strange-your Web site is, you can simplify the organization process with the following three-pronged strategy:
Draft a Site Tree
Your first challenge is to draft a broad organizational scheme for your site’s contents. You need to find logical ways to group your information, so readers can quickly find what they need. For this, you’ll want to create a
a diagram of how your site’s pages are linked together. A site tree, also referred to as a site map, starts with a single Web page (typically the home page) and branches out to show every page to which it links. The process is then repeated for each of the subsequent pages until a full view of the Web site’s hierarchy is outlined (see “Bird’s Eye View”).
When you create a site tree, the hardest part is figuring out what organizing principles you should use to sift content into specific areas. To get started, ask yourself a simple question: What do I want people to do on my site? Use the answers-read news, search the site, and send feedback, for example-as the primary categories of your site tree, and group your pages accordingly.
As you create your site tree, keep an eye out for signs of potential trouble. For example, a site tree that is extremely shallow and wide may indicate that your structure is too unfocused and that some information should be nested into broader categories to add depth to your site.
Next, start listing the specific information that will fill each category. You may find it helpful to use different-colored Post-its to correspond to different types of information. For example, write navigation options on green notes, unique page content on yellow ones, and contact information on blue ones. This visual system comes in handy later, when you need to see how much and what type of information is going to be on each page of your site.
Storyboard Your Site
Your next step is to connect each piece of information with the site tree you created, to make sure the two mesh. To do this, you’ll create a
a page-by-page map of your Web site’s content.
One of the fastest and easiest ways to storyboard a Web site is to find a flat surface, a few blank sheets of paper, and the color-coded sticky notes you created when identifying your content. Each sheet represents a different page within the site tree. Simply go through your sticky notes and attach each one to the appropriate page.
As you work, you’ll want to delete or add pages as you notice that they contain too little or too much information to be genuinely useful. This is also a good way to see early on whether you’re missing any important information that you’ll need to create.
Step 2: Make a Functional Prototype
After you’ve mapped out your site-wide structure and content, it’s time to turn your map into a clickable model. For this, you’ll need to make a
Functional prototypes (also known as
) simulate the feel and function of your finished Web site by constructing its basic framework of hyperlinked pages-minus time-consuming elements such as graphics or even finished body text (see “Anatomy of a Prototype”).
You can use this prototype to test the effectiveness of your site structure by following the steps people will take to perform a task on your Web site. And because the prototype is no more complicated than HTML and text, it’s easy to fix problems when you find them.
It’s important to remember that a functional prototype does not have to be beautiful-it merely needs to be useful. Use font faces, colored table cells, or other visual cues to identify specific types of information. Don’t fret if they clash.
Thanks to your detailed storyboard, building your functional prototype in any HTML editor should be a piece of cake. Here are some fundamental rules to keep in mind while constructing your prototype:
Simplify File Names
When saving your files, keep your file-name scheme simple and functional. This will help you remember the names of the files as you link and cross-link your pages, and it will prevent confusion. For example, if you have a news section on your site with several pages, you will probably find the file names
more helpful than
Also be sure to organize your folders and documents exactly as you plan to for your final site, including the same file names and hierarchy. This will help you sort out any problems you may have in your filing system and help you grow accustomed to maneuvering through your site.
Stick to the Basics
Keep your prototype extremely simple. This makes it easier to test and modify. All you want on your prototype’s pages are text and hyperlinks: the text describes or comprises your site’s content, and the hyperlinks offer access to the navigational byways of your site.
Use color to identify different types of information. For example, shade table cells orange for information that tells you how to use the site, and use green for unique content. This kind of color code provides a rapid way to check the types of information that a page holds.
Prioritize Page Content
Position the information on your pages according to function and priority. I always place my site navigation at the very top of a page because that makes clicking through my site tree easier. If you’re primarily concerned about your site’s editorial flow, consistently make text the main thing on a page.
Once you’ve built all the pages within your site tree and hyperlinked them to one another, you should have a complete skeletal model of your Web site.
Step 3: Test Your Prototype
Now that you’ve built it, you’re ready to take your prototype out for the all-important test drive. Enlist a few friends and coworkers (who didn’t work on the prototype with you)-and ask them to click through your model. For the most-honest results, make sure you select a group with varying degrees of Web proficiency and familiarity with the subject matter. Get their reactions, and find out what made sense and what didn’t.
A quick and effective way to test the organizational structure of your prototype is to ask your volunteers to perform a series of information-finding tasks on your site. Give your volunteers a goal-finding the site’s contact information, for example-and ask them to log all the pages they visited while trying to perform your task. You’ll see how your idea of information organization meshes with a user’s idea of how a Web site is supposed to behave.
After you’ve tested your prototype, you can use the new-and-improved model as the foundation of your finished Web site. Since the whole point of a prototype is to give you a working model of the Web site you want to build, it would be a shame to throw away the model once you’ve finished with it. Instead, simply drop your design and the rest of your content into your existing site skeleton. If you work off of page templates, take the time to turn one of your functional prototype pages into a template, and then work from there.
The Last Word
A prototype is a quick and easy way to test the ideas and assumptions that came together to form your Web site. Once you’ve settled on your method for gathering and organizing information, and after you’ve turned your site plans into a clickable model, you’ll be able to see what will work for your Web site and what won’t-all without sinking a lot of time and effort into building the final product.
Best of all, prototype results stay private. Users will never know about the problems you corrected during the test-driving process. By the time they get to kick your Web site’s tires, they’ll see only a polished, well-constructed machine that handles like a dream and practically drives itself.
LISA SCHMEISER, senior editor of Macworld.com, goes into exhaustive detail about planning successful Web sites in her book
The Complete Website Upgrade & Maintenance Guide
Bird’s Eye View:
A simple site tree can help you visualize your Web site’s structure and the number of clicks it will take to drill down to specific information.