What is a prototype?

A prototype is a draft version of a Web site. Prototypes allow you to explore your ideas before investing time and money into development.

A prototype can be anything from:

• a series of drawings on paper (called a low-fidelity prototype)
• a few images or pages that a user can click through
• a fully functioning Web site (called a high-fidelity prototype)

top of page

When should you build a prototype?

Prototypes can be built at any time but you should create them as early as possible.

You can start with a prototype of the home page and a few navigation pages to find out if the information architecture you planned will work for your site's users. To learn more, see the article on how to define information architecture. You may also want to base your prototypes on the designs that you are creating by using Parallel Design.

top of page

Why build a prototype?

Because it is much cheaper to change a product early in the development process than to make changes after you program the site.

A prototype is often the best way to gather feedback from users while you are still planning and designing your Web site. It is a quick way to find out if you are on the right track with your plans and design.

According to Nielsen (2003) prototyping results in:

• ten times the impact if you discover a needed design change early
• savings of 100 times the cost of making the change after you release the product

top of page

Why use low-fidelity prototypes?

Because paper-based prototyping is the quickest way to get feedback on your preliminary site architecture, design, and content.

To create these low-fidelity prototypes, use simple tools like:

• Paper and scissors
• Sticky notes

Use one piece of paper for each Web page you create.

Then, have users try them out in a usability test. During the test, users point to where they want to "click" and you change the page to show the next screen.

This process helps you:

• gather feedback from users on your Web site's functionality early in the design process
• make changes quickly
• improve your initial designs before they are programmed

To learn more, see the articles Learn About Usability Testing and Conduct the Usability Test.

top of page

Does fidelity make a difference?

Two separate studies by Catani and Biers (1998) and Uceta, Dixon, and Resnick (1998) investigated the differences between using low-fidelity prototypes and high-fidelity prototypes in usability tests. They found no significant differences between the prototyping methods for finding usability problems.

Read how Paper Prototypes Work as Well as Software Prototypes.

top of page

Next steps

Once you have tested your prototype with the users and have made changes to yur prototype, you may be ready to Program the Site.

We strongly recommend iterating your prototype several times until you (and your users) are satisfied with the designs. This may involve several rounds of usability tests before you are ready to Program the Site.