The weakest link in the design process has often been the communication between the designers and the stakeholders. All too often designers create designs based on lacking specifications only to have their designs end up rejected due to differences in vision. All too often the main use case for an app or product ends up being sidelined by the minor features dominating the agenda. If the design process is to be a black box where the stakeholders have no input between the review sessions, misunderstandings will be inevitable.
Modern design tools can help to address many of the usual problems in communication that have previously plagued this space. These tools are especially important when face-to-face sessions become increasingly rare. One type of these tools are prototyping tools.
What Are Prototypes?
Prototyping can refer to interactive version of designs created with specialized software or to prototypes created using code. This article will primarily refer to the former definition.
Interactive design elements are used in prototypes to navigate between and interact with the design. Prototypes are often projected on top of a device overlay to simulate the feel of a real device but can also be used directly on the target devices like mobile or tablet.
While the prototypes are traditionally created in order to bridge the gap between high-fidelity designs and the actual implementation and/or proof of concept, there is no clearly defined limits to when prototype should first be created and hence a prototype can be added in at any stage of the design process.
The Benefits of Prototyping
Prototyping allows for the greater part of the functionality and interactivity to be presented visually and explicitly, allowing designers to present the user flow [1] to clients and stakeholders without having to explain what the user would do and instead show what users can do. Even better, a prototype allows anyone to test the functionality by themselves, leaving little up to interpretation. This reduces the possibility of misunderstandings and also provides a way for the stakeholders to make more informed decisions, better define the specifications and give more constructive feedback.
- User flow is a term for the description of a set of tasks that a user must do to complete some process. (www.techopedia.com/definition/31852/user-flow)
Prototyping allows designers to test their assumptions and “fail” early so it is possible to iterate and improve the designs before the implementation has started, avoiding expensive changes later on. To get most out of prototyping user and stakeholder involvement is paramount. User input will guide the design, development and refinement of the most important features for the end-users in an application. This will increase end-user satisfaction, the overall quality and reduce risks by mitigating the risk of e.g. focusing on the wrong features, or not refining the usability of the most critical functionality.
Modern tools allow designers to build simple prototypes at very little additional cost, when building on top of existing designs. Given the various benefits that protypes provide, the question should not be when to use a protype, but when not to.
The Limitations of Prototyping
When the scope or complexity of the product increases, so does the costs of creating and maintaining a prototype. Trying to cover all the possible edge cases and scenarios that could happen in an app with the prototype requires significant expansion of the scope to a point where maintainability suffers or is simply constrained by the capabilities of the typical prototyping tool. For most part, the prototyping tools do not support managing the state of the app and that often requires creative solutions to circumvent this limitation. For these reasons, the prototype is created to demonstrate functionality and not to react to every possible user input accordingly. Prototyping tools also rarely allow for advanced user input, such as file upload or device camera input.
Real-World Example of Prototyping Benefits
Wapice was involved in the development of a cross-platform project which had no prototype in use, only high-fidelity designs. All the user interaction in the app had to be explicitly described for each view. Without this explicit description developers would need to continuously confirm the functionality from the UI designers to avoid misunderstandings. Even then, written descriptions alone are hardly ideal in conveying how complex user interaction should work. This often adds up to additional work for developers and may cause delays in the actual implementation e.g. when answers to questions of functionality are not immediately available.
This issue was largely mitigated by creating a prototype with which much of the UI logic and functionality became self-evident. With this the documentation could be simplified significantly and became easier to read and maintain. The prototype eliminated uncertainty about the UI functionality, which was now covered in the prototype, reducing the amount of misunderstandings and saving developer’s time. Since any design inconsistencies are often immediately obvious in a prototype, such problems were found and fixed quicker.
Another problem before the adaptation of a prototype was the fragmentation of the individual views, since the view designs were mostly viewed separately and rarely was the whole user flow in the focus. This meant that changes made to views were not always taken in account in other views, resulting in inconsistencies. With prototype, the focus will be on the user flow itself instead of individual views, which helps the developers observe the big picture when working on individual views.
Other benefits were the stakeholders being able to test new functionality or ideas in the prototype instead of making decisions based on static designs; most UI test cases were easier to write by basing them on the prototype’s functionality and easier to test with the prototype being used as reference; animations could be built in to the designs making them easier to demonstrate and implement.