Everything you want to know about prototypes.
When it comes to designing a great interface of application, website or any other IT-product, user interaction experience with the product (User Experience, UX) is to be in the spotlight. But how to understand whether the designed navigation, content display format, and organization are easy to use?
Prototypes are the means of measuring the effectiveness of the design.
They allow you to:
- evaluate the interaction in the product interface
- check how the product can be perceived by the user
- get cost-effective way of understanding and developing your product.
So what is the prototype itself? Let’s give the clear definition.
Prototype is a simplified version of the implementation of the future system. This is an interactive layout, which can have any degree of accuracy.
You may ask the question, why do we need prototypes? What are the purposes of creation?
That’s the answer:
- To sell the idea
- To explain the logic
- To explain the behavior
- To check the usability
- To test the product by yourself
- To test the product on others
- “To live” with the product
These are the basic reasons why should we create prototypes for our ideas. Prototypes not only allow you to test the usability of the product before the beginning of writing code but also can lead to the unexpected discoveries and new ideas that can bring the product to a new level (or may not to).
What can you use to create a prototype?
Napkin – is the most easy, simple and fast way to create a prototype. This is sort of “romantic” method that can sell the idea inside the head of the other person and also somehow explain the logic. The lack of this kind of prototype is based on another person’s imagination.
WireFrames.
Wireframe – is a layout, free of image data, this is, so-called, backbone of your design.
Wireframes must clearly show:
- Informational structure (What?)
- Basic groups of the content (Where?)
- Description and basic visualization of the interaction between the interface and the user (How?)
To create wireframes you can use:
Axure, Balsamiq, Pidoco
Layouts
Using such tools like Photoshop, Sketch and Illustrator you can create a visual presentation of your future product. The purposes of creating such layouts are: adding color accents, spotting the individuality. In conclusion, you’ll get a clear idea of your product. The only disadvantage of this prototypes is the static character. Static models do not show the behavior of the application (or website) therefore a bunch of useful tools was invented to help to make clickable prototypes.
Clickable prototypes
To make your prototypes come to life you can use such tools like Invision, Flinto and Marvel. Creation of clickable prototype helps you to explain the logic and the navigation of your future product. In all these applications (except Flinto), there is one specific feature – they all interact with a full screen, and as we all know, in a real application the elements interact with each other and response to user actions.
Animated prototypes
To create animated and “almost real” complicated prototypes you can apply Hype 3, Pixate, Principle and also Flinto. These tools help you to animate every layer of your future application.Using such prototypes you can not only explain the behavior and the logic of your product but also test by yourself and on others. That’s crucial when you are performing some sort of usability tests.
Live prototypes.
If you a have huge and complex product with a bunch of connected elements – creation of live prototype (using HTML, CSS – for web ones and, for instance, Xcode for iOS prototypes) makes sense. With the help of it – you will get a particularly live product that can be used, you will understand the main problems, lacks, and disadvantages. Web prototypes ideally explain the functionality of your product. Again – this option is great for big products.
So why creation of the prototypes is so essential?
Prototyping is an integral part of the UX-design. If ensuring a good user interaction with the product is the ultimate goal (which is most likely the case), then you need to have a prototype in one form or another.
Creation of a prototype allows you to study closely the interaction between the product and to understand better of how it will be used. The prototype itself can be quickly adapted for usability testing.
In addition, demonstration of the interaction with the prototype helps to imagine a future product to the customer and to find the common language with him.