Introductory articles

• Basic methods: paper prototyping
  A short overview of paper prototyping.
• How good does your website look on paper?
  The best way to improve the effectiveness of your company's web site is to let your site's users lend you a hand (quite literally) through the process of paper prototyping. Paper prototyping is a fast, low-cost method of testing web site designs. It involves creating rough sketches of a web site design and inviting some of your users to take the design for a test drive using their pen, instead of a mouse, to complete important tasks.
• Paper prototyping
  A short discussion of paper prototyping and a set of scaled GUI and web screens and labels and buttons for controls such as fields and form buttons.
• Paper prototyping
  This method features the use of simple materials and equipment in order to create a paper-based simulation of an interface or system. Paper prototypes provide a valuable and cost-effective means to evaluate and iterate design options before a team gets committed to one implementation. Interface elements such as menus, windows, dialogues and icons can be sketched on paper or created in advance using card, acetate, pens etc. The result is sometimes referred to as a low-fidelity prototype.
• Recommended methods: paper prototyping
  Overview of paper prototyping in point form.
• Testing with a paper prototype
  A brief overview of usability testing using paper prototypes.

Purpose

To enable draft interaction designs and screen designs to be very rapidly simulated and tested.

Benefits

• Potential usability problems can be detected at a very early stage in the design process before any code has been written.
• Communication between designers and users is promoted.
• Paper prototypes are quick to build / refine, thus enabling rapid design iterations.
• Only minimal resources and materials are required.

Four stages of paper prototyping may be required:

1. concept design: to explore different metaphors and instructional strategies
2. interaction design: to organise the structure of screens or pages
3. screen design: for initial design of each individual screen
4. screen testing: to refine the screen layout

Concept design

• Sit round a table and sketch out possible approaches in a brainstorming environment.
• Evaluate the extent to which each approach meets the objectives agreed in the stakeholder meeting

Interaction design

• Brainstorm possible screens or page types based on user tasks.
• Write the name of each suggested screen or page on a post-it-note.
• Put each post-it-note on the wall close to related notes.
• Group the post-it-notes in clusters that are meaningful to users.
• Consolidate duplicates.
• Give a name to each cluster.

Screen design

• Sit round a table and sketch out design ideas in a brainstorming environment.
• Use this as a basis for rough sketches of each screen.
• If the links between screens have not been finalised, pin each screen on the wall as for Interaction Design above,
• Ask the user to carry out a realistic task (based on the scenarios defined at the stakeholder meeting)
• As the user selects options on each screen, the developer explains what happens, and either points to the next screen or presents the next screen to the user (without giving any hints on how to complete the task).

Screen testing

• Produce a rough design for each screen drawn by hand, or using a drawing package or prototyping tool.
• If the links between screens have not been finalised, pin each screen on the wall as for Interaction Design above.
• Ask the user to carry out a realistic task (based on the scenarios defined at the stakeholder meeting).
• As the user selects options on each screen, the developer explains what happens, and either points to the next screen or presents the next screen to the user (without giving any hints on how to complete the task).
• To test more detailed interaction, prepare pieces of paper with menus, scroll boxes, dialogue boxes, etc., and present these to the user when they select the appropriate option.
  
  The user simulates pointing and clicking using a pencil, and simulates typing by writing on paper.

How Good Does Your Web Site Look on Paper?

Navigation/Flow

Paper prototyping is an ideal method for testing the navigation and flow of a web site. Users can help you determine whether organization of the web site is intuitive and whether the terminology used in the navigation makes sense.

Content
Paper prototypes are a good way to test the effectiveness of content within the site. You can identify whether the content and writing style used within the site is appropriate. Users often help identify content this is missing, unclear, or unnecessary.

Layout
Hand-drawn designs allow users to provide a wide range of feedback. They can help you determine if pages contain too little or too much information, and whether the general layout of the page is effective.

Functionality/Interactivity
By providing users with simulations of interactivity in the site, you can determine whether proposed functions will be utilized and valued by users. For example, it can help determine whether a "do it yourself" planning tool will be used by site visitors.

It only takes 6-8 customers using a paper prototype to identify prevent more than 80 percent of these kinds of high level problems that occur within web sites. Since the goal of paper prototyping is to achieve the most effective, customer-friendly site, it's not surprising that sites employing paper prototypes earn a higher user satisfaction rating.

However, customers aren't the only ones who benefit. Companies using paper prototypes can implement sites more efficiently, allowing them to complete projects faster at a lower cost.

Summary description

This method features the use of simple materials and equipment in order to create a paper-based simulation of an interface or system. Paper prototypes provide a valuable and cost-effective means to evaluate and iterate design options before a team gets committed to one implementation. Interface elements such as menus, windows, dialogues and icons can be sketched on paper or created in advance using card, acetate, pens etc. The result is sometimes referred to as a low-fidelity prototype. When the paper prototype has been prepared a member of the design team sits before a user and ‘plays the computer’ by moving interface elements around in response to the user’s actions. The user makes selections and activates interface elements by using their finger as a mouse and writing ‘typed’ input. A further person facilitates the session by providing task instructions and encouraging the user to express their thoughts and impressions. Notes may be made by other observers or a video record may be created.

Typical Application Areas

The method has wide applicability. However, it is most suitable in contexts where it is easy to simulate system behaviour or when the evaluation of detailed screen elements is not required. Paper prototyping is appropriate for the early stages of the design cycle where changes can be readily made before there is a commitment to one implementation.

Benefits

Usability problems can be detected at a very early stage in the design process (before a commitment to code has been made).
Communication and collaboration between designers and users is encouraged.

Paper prototypes are quick to build and refine, and thus support iterative design and multiple evaluations.
Only minimal resources and materials are required to convey product feel.

The technique can be utilised by those with little or no human factors expertise.

Limitations

Because of their simplicity, paper prototypes do not support the evaluation of fine design detail.
Due to the use of paper and a human operator, this form of prototype can not be reliably used to simulate system response times.

The individual playing the role of the computer must be fully aware of the functionality of the intended system in order to simulate the computer.

Cost of use

The technical resources required are minimal. Materials such as paper, card, adhesives and markers are needed to create the actual prototype. In addition, some means of recording the interactions between user and prototype is required (e.g. video camera). The method also needs one individual to play the role of the computer or system, and another to act as a facilitator. Costs may also be incurred when recruiting users and allocating time to manage each evaluation session.

Detailed description of method

The following material outlines firstly a general procedure for implementing this method, and also indicates the kind of information that is produced. Then a more detailed overview of two activities that can be carried out with paper prototyping is given: sketching and user testing.

1. Firstly, allow enough time to cre ate the prototype, design some tasks, recruit users, conduct the evaluation of the prototype and report the results.
2. Assemble the necessary materials. Construct the paper prototype, using separate stock for menus, dialogue boxes and any element that moves or changes appearance.
3. Select appropriate users to test the prototype, try to cover the range of users within the target population.
4. Prepare realistic task scenarios for the evaluation.
5. Pilot the evaluation procedure and practice playing the role of the computer.
6. Ensure recording facilities are available and functioning.
7. Conduct each session, by manipulating the paper prototype as the users work through the tasks.
8. The facilitator provides the task instructions and explores the user’s impressions and intentions through appropriate questions.
9. If observers are present they can make notes of problem areas and potential solutions on cards during the session for later scrutiny and prioritisation.
10. Conduct post-session interviews with the users, drawing upon pre-set questions and issues raised during the prototype evaluation.
11. Debrief the users and thank them for their co-operation.
12. Analyse information obtained, summarise observations and user evaluations. Consider the themes and severity of the problems identified.
13. Summarise design implications and recommendations for improvements and feed back to design team. The video recordings can support this.
14. Where necessary refine the paper prototype and repeat the above process
    
    The evaluation of paper prototypes provides an opportunity to collect early design feedback. This results in recommendations for the refinement of the initial prototype, which can form the basis for the evaluation of further prototypes.
    

Sketching

This technique involves members of the design team and potential users, producing sketches or designs of the ideas that they wish to input to the design process. The objective is to enhance user participation in the design process and collaboration between designers and users. The easiest way to set up a sketching exercise is to use a flipchart or whiteboard with everyone sitting around it presenting and reacting to ideas. An electronic whiteboard has the advantage of producing printouts of the ‘screen’ which can then be photocopied to the group before rubbing out the earlier ideas to consider new ones (e.g. SILK Landey 1994). Alternatively, users may sketch their own ideas individually which they can then each present in turn to the group.
A more sophisticated method involves presenting users with a set of paper, cardboard or plastic interface elements which they can lay out, on a flat surface, in what they feel is an appropriate way. Again designs may be discussed and developed as a group or individually. An example of such a kit is PICTIVE created at Bellcore by M. Muller (1992). This method is effective when the basic control types of a future interface are known but user feedback on a suitable layout is required. The method does not require users to draw the interface although they can supplement the design with additional elements or annotations to add contents.

The success of the exercise relies on the presence of a facilitator chairing the meeting. The main role of this person is to ensure that the group stay focused upon the design problem and ensuring that every member of the group is given the opportunity to stand up and present his or her own ideas. Another role is to summarise all the ideas after the session for presentation to a design team meeting.

The outcome of a participatory design exercise will be a series of ideas for screens, layouts, navigation structure, that can be evaluated by the design team to assess their technical feasibility and usability. They will thus serve as a first draft of design specifications. Various techniques are possible to preserve the designs : the sessions can be recorded on video, the paper mockups may be stuck down onto a base sheet, covered with clear plastic, photographed or simply photocopied. They may then be mocked-up on screen or in hardware form to further test the ideas. The paper screen designs can also be used as a ‘walk-through’ exercise to get reactions from other end users.

User testing

Early pilot studies of a system idea can be carried out using paper versions of screen displays. These tests can be run to compare design alternatives, or to contrast with current procedures. The paper-prototype should be designed to contain the screens or interactive sequences needed to perform a series of typical tasks. During the test, a member of the design team sits in front of a user and ‘plays the computer’ by moving interface elements around in response to the user’s actions. Alternatively they may write messages on ‘post-its’ to represent elements such as pull down menus or dialogue boxes. The user makes selections and activates interface elements by using their finger as a mouse and writing ‘typed’ input. A further person facilitates the session by providing task instructions and encouraging the user to express their thoughts and impressions. Notes may be made by other observers or a video record may be created.

A variant of the paper walkthrough is to produce the screens as a set of cards. Users are asked to order the cards in the sequence that seems most appropriate for the activities they must carry out. The objective is to focus on the flow of user tasks and identify the appropriate structure of the task-sequence. (e.g. CARD: Collaborative Analysis of Requirements and Design, M.Muller 1992). Cards may also be used to elicit data or menu structures from the user. Each of the data elements or menu options may be written out on cards and laid out infront of the user. The user then places the cards into piles to represent suitable groupings. Common groupings between different user subjects can be used to structuring the system data or menus.
The method is particularly useful for assessing user reactions to layout, data structures, and sequencing of screens. However it is hard to convey to the user the feeling of interacting with the new system.

The tests allow usability problems to be detected and recommendations be made at a very early stage in the design process, before a committing the design to code. Thus it supports iterative design and multiple evaluations. Further redesign can be carried out on paper, or the design can be developed on screen to test the dynamic interactive features.