Rapid prototyping is a key principle of iterative design. With it, you create rough-and-ready mock-ups for your clients that enable them to provide you with useful feedback. The rapid prototypes of the design are quickly and easily revisable, in response to the changes that the clients require. In this entry, we describe how to implement the rapid prototyping process, starting with the various design artifacts you created during the iterative web site design phase.

Site Maps, Storyboards, and Schematics
Typically, you develop the following three types of design artifacts early in the design and prototyping phases:

• Site Map. A high-level diagram, similar to a flowchart or a table of contents, which shows the overall structure of a site. Its purpose is to plot out the organization, information structure, resources and, to a certain extent, the navigational flow of the web site. The site map should include labels for sections and subsections that will be simple and make sense to the target audience. Designers sometimes use a technique known as affinity diagramming to create site maps. In this technique, designers create site maps on walls, using pens, markers, papers, and Post-it notes. This type of large-scale mock-up empowers team members to brainstorm together and it creates an immersive display that is particularly useful when working on larger sites. When the site map is completed, you can copy it to paper or take photographs of the design.

• Storyboards. A visual depiction of a sequence of web pages, usually sketched, that demonstrates the steps a customer takes to accomplish specific tasks. Storyboards are meant to be simple and functional examples that you can change quickly if need be, not highly detailed works of art. They provide snapshots of the design at particular points so that clients can determine whether the design team is heading in the right direction. The sketches might include information about the types of images, colors, and typefaces you will employ on the web site. You can present the storyboards to the client along with a narrative about the tasks the customer is trying to perform.

• Schematics. A preliminary graphical representation of the layout and content of individual web pages. These are not completed web pages at this point, so they often include placeholders and generic typefaces instead of the actual images and fonts that will go into the final product. Cleaning things up too much at this point might actually be a bad thing, because it might lead reviewers to focus on details, such as fonts, colors, and alignment, rather than more important issues such as content and navigation.

Progressive Refinement, Low-Fidelity vs. High-Fidelity Prototyping
Your design team can use prototypes to elicit immediate feedback from your customers. Most designers use low-fidelity prototyping to accomplish this goal. Although we do not recommend it at this stage of development, others might use high-fidelity prototyping. But just what are low-fidelity and high-fidelity prototypes?

Low-Fidelity Prototyping
As we’ve just discussed, you can use paper, Post-it notes, markers, pens, or even whiteboards to create rough sketches of a web site. Additionally, designers often employ cut and paste techniques, using scissors, glue, and photocopying machines. All of these design techniques are forms of low-fidelity prototyping, as illustrated in the following figure. It should be obvious at this state of development that these sketches are far from the final design in both their visual and their interactive details. Your design team shouldn’t waste time developing a highly-detailed site that is not pleasing to the client.

Use the set of low-fidelity pages your team has developed to test the design with representative target customers. Place the sketches in front of them and then ask them how they would complete a particular task. Based on the customer’s response, flip to the associated sketch to show them the outcome of their choice. In this manner, you can receive immediate feedback on the design, which enables you to create refinements, even in this early stage of the design concepts. Using this technique, you can often work your way through an entire iterative design cycle in less than one day.

High-Fidelity Prototyping
High-fidelity prototyping is a method where the prototypes include a lot more functionality and detail, mimicking the actual interface as closely as possible. These prototypes look more polished and complete because you create them using the same computer-based tools, such as Adobe Dreamweaver, as the final product.

This method is obviously more expensive and more time-consuming, and it is also more subject to flaws in the early stages of development than low-fidelity prototyping. It also requires more skill than low-fidelity prototypes sketches. For these reasons, we believe that it is best not to spend inordinate amounts of time and effort on high-fidelity prototypes at this early stage of the design process, when customers are likely to want major revisions of elements such as fonts and alignment. High-fidelity prototyping is far more useful during the later stages of the design process, when you want to test and refine elements such as the functionality of system features, keyboard and mouse interaction capabilities, and aesthetic issues. An example of a high-fidelity prototype is shown in the following figure.

Although we do recognize a need for high-fidelity prototypes in the later stages of development, more important issues should be discussed at this early point, such as the organization and overall structure of the web site. This is better accomplished through the use of low-fidelity prototyping. Additionally, creating low-fidelity prototypes saves time and is more effective in the early stages than high-fidelity prototypes that might waste time and cause endless arguments about what the customers might want. Our experience at Naviscent is that it is ten to twenty times faster and easier to create low-fidelity than high-fidelity prototypes. Studies conducted by usability professionals showed no significant difference in participants’ usability issues between low-fidelity and high-fidelity prototyping in the early stages of development.

Paper Prototypes Work as Well as Software Prototypes

Avoid Computer-Based Tools in the Early Design Stages
When you use computer-based tools in the early design stages, test participants and clients do find usability issues, but will also tend to focus on the aesthetics of the high-fidelity prototype. You may hear comments such as “I don’t like the colors you are using.” Or maybe “Can you move those buttons higher on the page?”

Instead of computer-based tools, we recommend putting together the following low-fidelity prototyping kit:

• Lots of white and colored construction paper
• Lots of index cards
• Lots of Post-it notes
• Transparencies
• Scotch tape
• Scissors
• An X-ACTO knife
• Glue stick
• Lots of different colored markers
• Pens
• Rulers
• Duct tape

With low-fidelity prototyping, clients tend to focus more on the overall structure of the site and its interaction capabilities. We don’t usually recommend computer tools that support the progression from low-fidelity to high-fidelity prototyping because they are not widely available in the market. However, we at Naviscent have developed a tool we call DENIM that enables you to sketch low-fidelity prototypes on a computer. The following figure shows example screenshots from our design tool.

When You’re Ready, Switch to Computer-Based Tools
Once you have created low-fidelity prototypes on paper, the time to switch to computer-based tools is dependent on your client’s expectations and on your work practices. If you find that you are at the point where you must save designs in order to email them to others, you might be ready for digital tools. If your clients perceive low-fidelity prototypes as unprofessional, you might need to take the time to create high-fidelity mock-ups, although, as mentioned earlier, doing so might direct the discussion towards fine details too soon.

See some software prototyping tools:

• iRise
• Axure RP
• Visio
• Omnigraffle

An alternative solution to producing high-fidelity prototypes too soon is to use what we at Naviscent call medium-fidelity prototypes.  This type of prototype includes many more details about content, but does not distract clients or customers with colors, fonts, or images, which is why it is a good compromise when you need to present mock-ups to your clients. An example of a medium-fidelity prototype is shown in the following figure.

When your design team reaches the point at which most of the major structural and interaction issues are resolved and satisfactorily tested with customers, you’re ready to create high-fidelity prototypes that mimic the final design. Your team may create these high-fidelity prototypes with HTML-based tools such as Dreamweaver and graphic design tools such as Adobe Photoshop or Illustrator. At this point, you don’t have to present real data; just create sample images to give people the feel of the final site.

Horizontal and Vertical Prototypes
In the early stages of design, your team might need to create horizontal prototypes that show a broad range of what the final web site supports. This enables people to get a feel for the entire design, even though they cannot perform tasks. This type of prototype might show top-level pages with links to second-level pages whose features don’t yet exist. You use horizontal prototypes to ensure that the basic features of the site are present and organized logically.

In some cases, your team might also need to flesh out and test steps for a specific task that is more complex or that merits further exploration. In this case, you use a vertical prototype. This type of prototype implements only the key pages for completing a specific task, and not any links that connect to other tasks or other parts of the site.

There are instances where your team will need to combine these two prototypes, as illustrated in the following figure. For example, you might need to create a horizontal prototype for the entire top level of the site and a vertical prototype to focus on one particular feature, to illustrate that feature in detail.

Limits of Prototyping
Some of your clients might feel that creating prototypes wastes time that you can better spend building the actual site. Make sure that you take the time to explain the process and the value of creating and testing rapid prototypes to your clients.

When presenting medium- and high-fidelity prototypes to clients, be sure to explain that these are not a finished product, but that they only represent an early design stage, and that the elements are still open to any changes that they might desire. Don’t lead them to believe that the project is near completion when it isn’t.

Finally, while prototypes are useful for gathering information, such as usability issues, they are not useful tools for testing navigational limitations in detail, estimating download speeds, or testing the quality of customer service.