Paper prototyping
From Wikipedia, the free encyclopedia
 |
This article does not cite any references or sources. Please help improve this article by adding citations to reliable sources (ideally, using inline citations). Unsourced material may be challenged and removed. (January 2007) |
Paper prototyping is a widely used method in the user-centered design process, a process that helps developers to create software that meets the user's expectations and needs - in this case, especially for designing and testing user interfaces. It is throwaway prototyping and involves creating rough, even-hand sketched, drawings of an interface to use as prototypes, or models, of a design. While paper prototyping seems simple, this method of usability testing can provide a great deal of useful feedback which will result in the design of better products. This is supported by many usability professionals.[2]
Contents |
[edit] History
Paper prototyping started in the mid 1980s and then became popular in the mid 1990s when companies such as IBM, Honeywell, Microsoft, and others started using the technique in developing their products.
[edit] Benefits
Paper prototyping saves time and money since it enables developers to test product interfaces (from software and websites to cell phones and microwave ovens) before they write code or begin development. This also allows for easy and inexpensive modification to existing designs which makes this method useful in the early phases of design. Using paper prototyping allows the entire creative team to be involved in the process, which eliminates the chance of someone with key information not be involved in the design process. Another benefit of paper prototyping is that users feel more comfortable being critical of the mock up because it doesn’t have a polished look[4].
There are different methods of paper prototyping, each of them showing several benefits regarding the communication within the development team and the quality of the product to be developed: In the development team paper prototypes can serve as a visual specification of the graphical user interface, and by this means assure the quality of a software. Prototyping forces a more complete design of the user interface to be captured. In team meetings they provide a communication base between the team members. Testing prototypes at an early stage in development helps to identify software usability problems even before any code is written. The costs and annoyances of later changes are reduced, the support burden is lowered, and the overall quality of the software or website is increased.
[edit] When to use paper prototypes
Paper prototypes should be considered when the following is true[1]:
- When the tools the designer wants to use in creating a prototype are not available.
- When the designer wants to make a sincere effort to allow all members of a team, including those with limited software skills, to take part in the design process.
- When tests of a design lead to a great deal of drawings.
[edit] Creating paper prototypes
[edit] Parts to implement
Paper prototypes usually cannot mirror the whole software or web site to be produced. It is necessary to limit the scope of the prototype by focus or width and depth. Limiting a prototype by focus means to either show the uncertain and difficult issues or the well-known and easily designed ones. Width and depth refer to the level of generality of the prototype: Should the prototype represent the whole design without providing any detailed function, or should certain issues be shown in detail?
It is useful to concentrate on the general design rather than details, in early stages of the conceptual phase, to probe if the overall design meets the user's expectations. Specific details may be tested isolated from the general design later in the conceptual or implementation phases.
[edit] How to create paper prototypes
First, the designers should meet and discuss both who the users of the interface are as well as the tasks that the users would perform. Then, individual interface elements of a paper prototype are painted or printed on paper, cut out, and put onto another piece of paper which models the computer screen. The arrangement of the interface elements can then be changed quickly and without programming, labels can be renamed, and objects added, removed, or replaced by other input widgets. The sequence of dialogs or pages in a web site can be varied on the fly, which makes it easy to test multiple versions of an application's Interaction design.
It is important to note that these prototypes should not be a work of art. They are intended to be a means for creating a rough copy very quickly and easily. Often functionality can simply be explained to the user - they don't always need to see the result of their actions. While coaching the user on how to use your interface is counterproductive, explanation of features that have not yet been implemented is encouraged.
a. Allowing for Scrolling
A common feature in computer programs that seems difficult to create using paper is scrolling. However, there is a simple solution: cut a hole in your main page to allow for moving content. Then cut a long strip of paper, and attach tabs to the top and bottom. Once you line your strip up with the hole, secure the strip by placing barriers on the back of your main page to guide the scrolling section.
b. Functional Drop-Down Menus
Drop-down menus can also seem like a challenge, but with a little creativity, they can be made. Cut out a piece of paper, and create the menu as you would like it to show up after being opened. Then, fold the menus like an accordion, such that the last fold exposes the back side of an option. On this face, you should write the name of the menu (as well as at the top of the menu, which will begin hidden). When someone "clicks" your drop-down menu, simply pull down the accordion.
c. Slight Differences Between Pages
If a button press or other action makes a very slight difference on a page, don't bother making a whole new prototype page. Rather, create a "flip-up" window. In the changing area, simply glue a folded piece of paper to the page, and draw the two different options on the two panes. When this change should occur, simply flip up this panel.
d. Links Between Pages
If your prototype needs to link between pages, simply create another prototyped page, and present it to the user when they "click" the link.
[edit] Applying paper prototypes
The most important areas of application of paper prototypes are the following:
- Communication in the Team
- One of the major applications of Paper Prototyping is brainstorming in the development team, to collect and visualise ideas on how an interface might look. The interface is built up step by step, meeting the expectations of all team members. To probe the applicability of the software design, typical use cases are played through and possible pitfalls are identified. The prototype can then be used as a visual specification of the software.
- Usability Testing
- Paper prototypes can be used for usability testing with five to ten real users. In such a test, the user performs realistic tasks by interacting with the paper prototype. The prototype is manipulated by another person reflecting the software's reactions to the user input actions. Though seemingly unsophisticated, this method is very successful at discovering usability issues early in the design process.
- Three techniques of paper prototyping used for usability testing are comps (short for compositions), wireframes, and storyboards. Comps are visual representations, commonly of websites, that demonstrate various aspects of the interface including fonts, colors, and logos. A wireframe is used to demonstrate the page layout of the interface. Lastly, the storyboards are a series or images that are used to demonstrate how an interface works[2]. These three techniques are useful and can be turned into paper prototypes.
- Design Testing
- Especially in Web Design, paper prototypes can be used to probe the illegibility of a design: A high-fidelity design mockup of a page is printed and presented to a user. Among other relevant issues the user is asked to identify the main navigation, clickable elements, etc. Paper prototyping is also the recommended design testing technique in the contextual design process.
- Information Architecture
- By applying general and wide paper prototypes, the information architecture of a software or web site can be tested. Users are asked where they would search for certain functionality or settings in software, or topics in a web site. According to the percentage of correct answers, the information architecture can be approved or further refined.
- Rapid Prototyping
- Paper prototyping is often used as the first step of rapid prototyping. Rapid prototyping involves a group of about four designers who each create a paper prototype and test it on a single user. After this is done, the designers share their feedback and ideas, at which point, each of them creates a second prototype - this time using Microsoft PowerPoint or a similar computer application. Functionality is similarly unimportant, but in this case, the aesthetics are closer to the final product. Again each designer's computer prototype is tested on a single user, and the designers meet to share feedback. At this point, actual software prototypes can be created. Usually after these steps have been taken, the actual software is user-friendly the first time around, which saves valuable programming time.
[edit] See also
[edit] External links
- 7 photos of paper prototyping
- Paper Prototyping Article
[edit] References
- 1 Sefelin, R., Tscheligi, M., & Gukker, V. (2003). Paper Prototyping – What is it good for? A Comparison of paper – and Computer – based Low fidelity Prototyping, CHI 2003, 778-779.
- 2 Snyder, Carolyn (2003). Paper Prototyping: the fast and easy way to design and refine user interfaces. San Francisco, CA: Morgan Kaufmann.
- 3 Carolyn Snyder: Paper Prototyping: the fast and easy way to design and refine user interfaces http://paperprototyping.com/
- 4 Klee, M. 2000. Five paper prototyping tips. Available from User Interface Engineering.
