Prototyping technique aims to demonstrate the ideas and the operating characteristics of the system through drawings, whether they are “scribbles” on paper or interfaces very close to the real one, made with tools that allow to sketch the interface in a similar way to the final system.
The use of prototypes makes it possible to show the interface, the interaction process with features and buttons, in an easy to understand way. Through this concrete information, the user can not only understand, but also contribute safely, expressing what he liked or disliked, what are the easy and effective features to use etc.
Types of prototypes
With application options growing more and more, how do you know which tool is best for you? Choosing the right tool can double your efficiency and even cut efforts in half.
Currently, a lot of people still use Photoshop for the Visual Design part, but it may not be the best option, depending on the stage of the project or the platform for which you are creating. There are three types of prototypes, where their main differences are in the level of fidelity in relation to the final system:
1. Low-Fidelity (wireframes)
These prototypes are not similar to the final system, in most cases, they are made with the aid of paper and pencil to sketch the initial characteristics of the interface and its operation. They are also used as an aid in the conversation between the designer and the users about the desirable characteristics and the most suitable solutions.
Because of the type of material used to make these prototypes, they are cheaper, faster and easier to make and, through them, it is possible to collect a lot of information regarding the interface requirements.
2. Medium-fidelity (mockups)
These prototypes are closer to the final system, compared to the Low-Fidelity ones . Generally, they are made using computational tools, although they need not be the same tools that will be used to develop the final system. They allow to simulate the interaction behavior of the interface and do not require the same technical knowledge necessary to implement the final interface.
There are some tools that can be used to develop prototypes at this level of fidelity, some of which are:
Sketch
Earlier this year, Sketch 49 was launched and , along with it, some long-awaited prototyping features. In today’s walkthrough, I’ll go through everything you need to know about prototyping in Sketch, from essential shortcuts, to getting feedback and collaborating with your team on projects and prototypes.
New prototyping icons
Along with the launch of protoyping features, four new icons have appeared on the Sketch toolbar. Perhaps the most important is the Hotspot which, when selected, will allow you to drop an interactive access point on the clipboard. Then click Link to clipboard, which allows you to link and connect an access point to a clipboard or target target. The Show Prototyping icon allows you to enable and disable the yellow / orange prototyping UI in Sketch. This is great if you’re still designing and don’t want to see all the links and hotspots in the app. Finally, it’s the Preview iconwhich allows a preview window to be opened so that you can use your prototype right there in Sketch. We will talk about this in more detail later.
InVision
It is a prototyping tool that runs on the web and allows collaborative and interactive prototypes to receive feedback from customers and colleagues. It is suitable for projects that need lower fidelity, but accepts uploading PNG, JPG, GIF, AI and PSD files. Using InVision for projects with many screens and needing to test / validate micro-interactions can be a very complicated task and not interesting to work with.
Adobe XD
Launched in 2017 (the final version) by Adobe, it allows the creation of interfaces and also prototyping. In the Design tab, you can create interfaces using text and vector tools, and in the Prototype tab you can see a preview and share the interface.
Axure RP
It is a very complete tool and well known in the area of UX Design. It is well used by web and UX designers to create clickable wireframes, user flows and site maps, as well as interactive prototypes.
It is very powerful, but it sins in the collaborative part and in the prototyping for mobile.
JustinMind
It is an excellent desktop application, and while not as well-known as Adobe Xd or Sketch, it is reasonably easy to use. Enables fast creation of clickable wireframes and high-fidelity prototypes. Very good for web and mobile apps.
UXPin
It is a highly collaborative tool, which has fast prototyping features, low or high fidelity prototypes, code snippets and several other very interesting functions.
3. High-Fidelity
This type of prototype offers an interface similar to the final one, since the same materials (software and hardware) are used to be used in the system. The prototypes are developed directly in programming language, allowing to present some features of the interface with interaction. In high-fidelity prototyping, some parts of the system already exist.
This prototype offers a high degree of interactivity and realism, as it is possible to see and interact with an interface close to the end. However, there is a higher cost in its development and technical knowledge similar to that is already needed to understand how to develop mobile application final product.
Conclusion:
Since 2005, I have been exposed to the field of design, and have also taken part-time job roles as developer and project manager in several companies, and summarize some details in the product design process.
First of all, what kind of product prototype is considered a good product prototype? Many people may give different evaluation criteria in terms of high fidelity, interactive restoration, document annotations, etc., but what I want to say is that we must first clarify what kind of people the product prototype is for, and then specifically satisfy the product prototype. This is the fundamental criterion for judging the quality of product prototypes.