Using Prototypes
By Gerd Waloszek, SAP AG, Product Design Center – Last changed on 10.07.2002
This paper is outdated.
Prototypes can help to evaluate design alternatives at any stage of the development process. Here two alternative approaches are introduced: the paper prototyping and the HTML prototyping. A listing of pros and cons of each approach is given to facilitate the decision of which is best for your requirements.
Introduction
Prototypes can be a valuable tool for designing applications. They can help to evaluate design alternatives at any stage of the development process. During the conceptual phase the basic design elements can be explored and tested with users. When designing the actual screens the layout and more detailed interaction issues can be evaluated and tested. Later "high-fidelity" mockups can be used to provide a "preview" of the final application.
Prototyping can be done in many ways. Currently, paper prototypes are promoted by a number of authors. But electronic prototypes like HTML prototypes have their uses as well. HTML prototypes are especially suited for Web applications or if just screen sequences are explored. However, any other familiar tool (VB, PowerPoint, ...) may also be used.
Figure 1: Creating paper prototypes is a team effort; here the team is split into three groups that create alternative prototypes
Figure 2: Having finished the prototypes, a member of each group presents the group's prototype to the team; then the pros and cons of each prototype are evaluated
Paper Prototypes
Materials
Paper prototypes can be implemented in a number of ways depending on personal experience or preferences. Typical materials used for paper prototypes are:
- Cardboard – for the screen
- PostIt's for menus, dialog boxes or other screen elements
- Transparent slides for temporary items or user inputs
- Masking tape or other tape for user inputs
- Pens and markers (erasable markers for user inputs or temporary messages)
- Water for erasing inputs
- ...
Figure 3: Example of a simple paper prototype
Pros
- Created fast and easily (from less than an hour to a couple of hours)
- Can be created by a group – this helps to gain a common understanding of the design
- Everybody can take part in the design of paper prototypes – there is no special "tool" knowledge needed
- Users can co-design the prototype during or after a test session
- The focus of paper prototype discussions with users is the structure of the application and the suitability for the task
- Discussions about "taste" matters or graphic design can be avoided
- No barrier for users to criticize the prototype, because it is obviously temporary
Cons
- Unsuitable for presentations with more than 3 people
- Lots of fiddling with paper
- At least one person is needed to play the "computer" when the prototype is tested
- Limited interaction &emdash; not all interaction issues can be tested sufficiently (for example, certain features like mouse-over events that give feedback to users cannot be simulated)
HTML Prototypes
Tools
- WYSIWYG HTML editor (or any other editor of your choice - however a WYSIWYG is faster)
- One or more Web browsers for testing the prototype
- Graphic tools
- A library of design elements (helps creating consistent look and makes development faster once the library is established)
- A library of graphical or other screen elements (helps among other things to reuse screen elements of the target platform)
- ...
Figure 4: An HTML prototype can be created from simple HTML elements if modeling interaction issues is the focus
Pros
- Better interaction, especially useful for evaluating screen changes (but usually someone is needed who plays the "computer")
- No hassle with paper
- Useful for group discussions, especially if design alternatives are evaluated
- Useful for presentations of the application design or of design alternatives
- Can be implemented as "low fidelity" or "high fidelity" prototype: Low fidelity prototypes are created with minimal effort in mind and demonstrate the basic interaction; high-level prototypes take much more effort and can be used for demonstrating the visual design or for providing a "preview" of the final application
Cons
- Creation takes much time (usually one or more days)
- Usually created by one person only
- HTML and/or programming knowledge needed
- Often discussions on implementation issues ("taste") dominate content discussions
- Designer may tend to create a "perfect" prototype
- Users cannot CO-design the prototypes, they can only make suggestions (which cannot be checked immediately)
- Barrier to discard the prototype when it is not useful is much higher
Figure 5: HTML prototypes are better suited to check the dynamics of a design than paper prototypes; here the HTML prototype already includes some elements of the future graphic design
Tips
- Explore design alternatives and test them with users using scenarios or tasks.
- Use the prototypes to add features and test them with users.
- Prototyping is especially easy for designing simple applications like SAP's IACs.
- Prototypes for larger and more complex applications can be split into several prototypes that explore different aspects of the application in order to keep the prototypes simple.
