Prototypes
Topics on This Page
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
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.
References
M. Walker, L. Takayama and J.A. Landay, High-fidelity or low-fidelity, paper or computer? Choosing attributes when testing web prototypes, Proceedings of the Human Factors and Ergonomics Society 46th Annual Meeting, September 29–October 4, 2002, Baltimore, USA, HFES, Santa Monica (2002), pp. 661–665.
See also: Paper Prototypes Work as Well as Software Prototypes.
Next Steps
Once you have tested your prototype with the users and have made changes to your 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.
