Prototyping is a topic I have been involved with for 30 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 as discussed by Catani and Biers much better than the levels of prototyping . 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 Lo-Fi prototype, the Hi-Fi prototype and the Functional working prototype. High fidelity, functional prototypes should pass the DTT.
Lo-Fi Prototypes: 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 also be a thought experiment with a brief description. The key is communicate the essence of the concept.
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 low fidelity prototyping are paper and pencil, any tablet drawing program, PowerPoint, Visio, and Grafio in most situations. A new on-line and desktop tool called Creately shows great promise as a low fidelity prototyping tool.
Hi-Fi Prototypes: A higher fidelity prototype would include input and output mock up screens and it should also illustrate hierarchical and navigational relationships between the various screens. High 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 high fidelity prototyping are InVision for realistic wire frame mock ups, 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.
Functional Prototypes: The highest fidelity prototype is supposed to act and look like the real system or product, even though it may eventually be re-coded or rebuilt using different technologies. Functional 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. Functional prototypes should usually 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 Functional 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 Lo-Fi and Hi-Fi Prototyping
The following figure illustrates the low fidelity and high fidelity prototypes for a system for searching and rescuing a lost climber in a remote location. Figure 1 is a very terrible drawn low fidelity prototype using a pen and pencil. My collaborator took that drawing and developed a wire frame iPad mock up using inVision.
The first version of the high fidelity prototype developed in InVision was not the idea that I tried to convey. My drawing was terrible. So I used Grafio to draw a more refined diagram, a higher fidelity, but still at low fidelity prototype, that is illustrated in Figure 2. My collaborator then went on to develop the high fidelity prototype that is illustrated in Figure 3.
The high fidelity prototype in Figure 3 is a dynamic wire-frame that was developed using InVision. If you click on a name, for example “Kate”, you can get her health and movement status. All of the members of the rescue 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 low fidelity and high fidelity prototypes is that developing a prototype facilitated 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 low fidelity, high fidelity, low fidelity, fidelity, and then the creation of an actual functioning prototype that passes the design Turing test. Or the process can begin with a low fidelity and then go directly to the development of the functional prototype. The order is determined by the complexity of the application and the degree to which the designer and user understand 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.