Prototyping is a topic I have been involved with for many years [c.f. 2, 3]. Prototyping technologies and conceptual advances have changed dramatically over the years, but the two reasons we must prototype have not, and will never change.
- Prototyping encourages user involvement and joint ownership of projects.
- Prototyping facilitates the mutual and concurrent learning processes of users and designers.
Numerous conceptual advance have been made to redefine and assist with modeling and designing systems for consumers and users. One of the most important concepts is related to the coarseness of the prototype. This coarseness is called prototype fidelity. I would like to draw on the concept of prototype fidelity and relate it to our earlier research.
Adaptive Design and Prototype Fidelity
In earlier papers we identified three levels of prototyping. Level 1 was input and output design. Level 2 prototyping was called heuristic design and it involved the addition of functional operations and limited interactions to input and output design. Level 3 prototyping was called adaptive design. A prototype built using adaptive design was an actual working systems that was improved forever in an adaptive iterative process. The concept of adaptive design was articulated by Peter Keen over 35 years ago and defined as a process of learning and evolution .
I like the concept of prototype fidelity much better than the levels to prototyping approach . Prototype fidelity is a clean, easy to understand concept. An excellent article by Laura Busche in 2014 captures the idea of prototyping fidelity and illustrates why developing a low fidelity prototyping is the first step in user-oriented design.
The gold standard for a prototype is to develop a high fidelity prototype that passes for what I like to refer to as the Design Turing Test (DTT).
Although we do not yet have a specific means for determining the particular characteristics that make a user interface high or low fidelity, we can loosely define fidelity by analogy to the Turing test. To the extent that a person using the prototype cannot distinguish it from the final system, the prototype is high fidelity. If the prototype can readily be distinguished from the service, then fidelity is low. 
In essence, prototype fidelity refers to the degree to which the prototype looks and functions like an actual system or product. We will refer to the levels of fidelity, the degree to which a prototype reaches the Design Turing Test hurdle, as the Picto prototype, the Beta prototype and the Alpha working prototype. High fidelity prototypes should pass the DTT.
Picto Prototypes or Pictos: A low fidelity prototype could be a sketch of the input and output screens or a process diagram of how the product works. It can be thought experiment with a brief description.
Low fidelity prototypes can be done using pencil and with a drawing program, however, I am such a terrible artist that I often turn to Grafio for Alpha prototypes. My favorite tools for Picto prototyping are paper and pencil, any tablet drawing program, PowerPoint, Visio, and Grafio in most situations.
Beta Prototypes: A medium fidelity prototype would include input and output mockup screens and it should also illustrate hierarchical and navigational relationships between the various screens. Medium fidelity prototypes are usually developed using wire frames. A wire frame is just an image or picture of a tablet, a smart phone or a computer screen.
My turn-to tools for Beta prototyping are InVision for realistic wire frame mockups, and PowerPoint, and Excel. You must pay for the more advanced features of inVision, but you can try it out on a small project to see how it works. I also like Prototyping on Paper or POP. This is one of the easiest tools for taking pictures of paper and pencil sketches and then making them linkable.
If tangible products are being designed computer aided design (CAD) tools can be used. Free versions of these tools are reviewed here.
Alpha Working Prototypes: A high fidelity prototype is supposed to act and look like the real system or product, even though it may eventually be recoded or rebuilt using different technologies. Alpha prototypes are developed using a technology that represents the flow and dynamics of the screens, as well as supporting the background processes that support the application. Alpha prototypes should be capable of passing the prototyping Turing test, in that the person using the prototype should not be able to distinguish it from the final system.
I do not have a favorite tool for Alpha prototypes. They are typically implemented in a native language such as Xcode for IOS iPhone apps and in Java-like languages for Android apps. I usually have a developer implement Alpha prototypes. They are rarely static and are continuously redesigned in an iterative fashion.
Example of Picto and Beta Prototyping
Figures 1-3 illustrates the Picto and Beta prototypes for a system for searching and rescuing a climber in a remote location. Figure 1 is a very terrible drawn Picto prototype using a pen and pencil. My collaborator took that drawing and developed a wire frame iPad mockup using inVision.
The Beta prototype developed in InVision was not the idea that I tried to convey, because my initial drawing was, well terrible. So I used Grafio to draw a more refined diagram, a higher fidelity Picto prototype that is illustrated in Figure 2. My collaborator then went on to develop Beta prototype 2.0.
The 2.0 Beta prototype is a dynamic wireframe that is illustrated in Figure 3. If you click on a name, for example “Kate”, you can get her health and movement status. All of the rescue members have hot links to their movement and health status. This application would eventually be programmed in XCode or Java, depending on the smart phone platform.
The key take away from the back and forth process of developing Picto and Beta prototypes is that developing a prototype facilitates the mutual and concurrent learning processes for both of us. It was an iterative on-going reciprocal learning process. As illustrated in Figure 4, the prototyping process is non-linear and iterative. The process can be Picto, Beta, Picto, Beta, and Alpha, or Beta, Alpha and Picto, or whatever. The order is determined by the complexity of the application and the degree to which the designer and user understands each other.
The key to design is to get the users, consumers, designer, developers and management on the same page. Prototyping encourages learning and exploration. The ideal prototypes passes the Turing Design Test. It has never been easier to develop virtual world prototypes. There are numerous 3D printing tools and digital tools for designing products that clear the Design Turing Test hurdle. Take advantage of them. It is a prototype or perish world.
Additional Material on prototyping concepts and prototyping tools
- Be sure to start with Laura Bunche’s article here on low resolution prototyping before you read anything else.
- There is difference between adaptive and responsive design, but that controversy is somewhat overblown. Just search for adaptive design to get a feel for the differences.
- Catani, Michael B., and David W. Biers. “Usability evaluation and prototype fidelity: Users and usability professionals.” Proceedings of the Human Factors and Ergonomics Society Annual Meeting. Vol. 42. No. 19. SAGE Publications, 1998
- Cerveny, Robert , G. Lawrence Sanders and Edward J. Garrity. “The application of prototyping to systems development: A rationale and model.” Journal of Management Information Systems (1986): 52-62.
- Cerveny, Robert P., Edward J. Garrity, and G. Lawrence Sanders. “A problem-solving perspective on systems development.” Journal of Management Information Systems (1990): 103-122.
- Peter G. W. Keen. 1980. Adaptive design for decision support systems. SIGMIS Database 12, 1-2 (September 1980), 15-25. DOI=http://dx.doi.org/10.1145/1017654.1017659
- “Virzi, Robert A. “What can you learn from a low-fidelity prototype?.” Proceedings of the Human Factors and Ergonomics Society Annual Meeting. Vol. 33. No. 4. SAGE Publications, 1989, pp 224.