Prototypes are a fundamental element of the design process. They take on different functions and aims according to the stage of the work. Once the project is almost finished, a prototype can be useful for refining the final details and testing the look & feel, whereas at the beginning it is useful for validating our usability choices by guiding our choice of the most interesting functions for users.
Therefore, prototypes need to be created straight away, as the tests are useful right from the first design stages when we still don’t have enough tangible elements to show clients and users. Prototypes, at different levels of detail and fidelity, therefore enable us to test the interface before investing time and resources for finishing and developing it.
We can split prototypes up starting from the degree of fidelity with which they reflect the ideally completed design.
Paper prototypes are positioned at the lowest level in terms of realism, made with simple hand-sketched drawings of the screens (or by printing wireframes). This, very rough, type of prototype is chosen, especially in the earliest design stages. To provide a sense of dynamism, the person testing their prototype through fixed screens must be guided by a person directing them towards the paper screens for simulating the interaction. The paper prototype is very quick and cheap to produce but, because of its distance from the technological means and from the final shape of the interface, requires imagination and cooperation on the part of the user testing it.
It is recommended in the early design stages, when the main flows are to be validated, but is not useful for non-interpretable micro-interactions.
At an intermediate level, there are digital prototypes, created with specific apps or software, which are based on static images of the interface. They may be faithful to a different extent according to whether wireframes or mockups are used with the definitive graphics.
The digital prototype allows many types of interaction to be simulated and is relatively easy to construct. However, it takes longer than the paper prototype and software often needs to be purchased.
It can be useful for testing ideas in a more realistic way, or as a means of presentation to the client, alongside diagrams and navigation flows.
The final type of prototype is the HTML prototype. It is very detailed and completely customizable and can be created without any specific software. It also has the advantage of representing the foundations for the true development stage, saving time in the final stage.
But, precisely because of its level of detail, it cannot be used in the early design stages. In fact, if it is used too much, it can end up limiting the creative part by imposing technical choices before the concept has been clearly defined. Its creation also requires very precise technical skills and is more laborious than the other types of prototype.
After choosing the most suitable type of prototype for your needs, it’s time to use it, perhaps for internal tests, or by organizing a workshop with clients and potential users.
Prototypes are often used by our teams and the process varies according to the project. For example, we made use of paper prototyping for a brainstorming workshop with the client, in which we were looking for solutions for searching and displaying information sheets within their app. To test the various navigation flows identified by the teams during the workshop, we simulated a paper smartphone in which to insert the sketches of the screens. The internal test was useful for choosing the most popular elements of both versions and, therefore, for refining the interface. The next step was to combine the positive aspects of both versions and test them again, this time with potential users, hence obtaining the best possible solution.