About Prototypes

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 paper drawings (low-fidelity), click-through of a few images or pages, or a fully functioning Web site (high-fidelity).

You can build a prototype at any time but ideally you should create them as early as possible. You can begin with a prototype of just the home page and a few secondary navigation pages. This will help you find out if the information architecture is working.

Advantages of Prototypes

It is much cheaper to change a product early in the development process than to make change after you develop the site. Prototyping allow you to gather feedback from users while you are still planning and designing your Web site.

Nielsen (2003) states that the biggest improvements in user experience come from gathering usability data as early as possible. He estimates that it’s 100 times cheaper to make changes before any code has been written than to wait until after the implementation is complete.

Prototype Fidelity


Paper-based prototyping is the quickest way to get feedback on your preliminary site information architecture, design, and content. Paper prototypes are easy to create and require only paper, scissors and sticky notes.

Use one piece of paper for each Web page you create and then have users try them out in a usability test. Users indicate where they want to click to find the information and you change the page to show that screen.

The process helps you to gather feedback early in the design process, make changes quickly, and improve your initial designs.

Impact of Prototype Fidelity

There is an on-going debate about using low vs. high fidelity prototyping. Opinions vary a great deal about how much a prototype should resemble the final version of your design.

In theory, low-fidelity sketches are quicker to create. An advantage is that using rough sketches users may have an easier time suggesting changes. High-fidelity prototypes take you as close as possible to a true representation of the user interface.

Walker et al (2002) demonstrated that low and high fidelity prototyping are basically equivalent in terms of finding usability issues. Johanson and Arvola (2007)  A Case Study of How Interface Sketches, Scenarios and Computer Prototypes Structure Stakeholder Meetings also demonstrated that sketches gave the broadest discussion but that both high- and low-fidelity prototypes worked well. The high-level prototype did facilitate discussions on operational issues and interaction. High-level prototypes may be most effective for persuading stakeholders.


This entry was posted in Detailed Design and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s