Prototype is an early sample of design used to get feedback and rapid experiments with new ideas.
Why we Prototype ?
- Limit the expenses of development
- Test the design concepts
- Test the usability of the product
Prototypes typically created with a mixture of sketches, wireframes or mockups, prototypes depending on the project timelines and these are representations of the design.
This can use as a mechanism to get user feedback early and quickly on your design where you can iterate on making your product a better one.
Sketching is a drawing which you could easily with a papers and pens with less cost. Mostly sketching is used in the early stages of the design process to get new ideas for the product as well as use to identify the users pain point.
Low fidelity sketches can mostly use identify user pain points and get new ideas for the product at early stage.
With sketches you can rapidly iterate the design with a low cost to make the product more useable.
Wireframes are representation of layouts and mostly focused on the layout of the content. Mostly use gray scale or black and white.
In low fidelity wireframing you can use tools to create gray scale wireframes which is more richer way than sketching at the beginning of the design process.
Mockups is a fully created design including color details, typography, content etc… This will more like the final product of yours. Here it does not represent the interactions.
Medium Fidelity Prototypes
This is a mixture of basic text and some UI elements. Mostly this is used when you have key elements in place but you need to validate to get better understanding of user needs.
High Fidelity Prototypes
Use to validate the prototype when you have a finalize idea, UI and work flow.
As a result of the finished design most of the usability issues at this stage will get caught and you will be able to get the feedback on everything including text fields, labels, content, colors and the general usability of the whole product. But sometimes users aren’t going to be as willing to give feedback because your design looks almost the final design.
If you carefully look at the above methods you will notice that sketches, wireframes and mockups single handedly are just designs, but to make it more functional we need to add interactions. This will give the user the exact idea of how UI’s change according to his/her actions.
“ Design prototyping doesn’t need code ”
Real World Scenario
Sometimes your business might need to put a new feature for an existing product or want to make a complete new product in that case what should you do ?
You can use a sketching mechanism to do the prototype for testing before the business take a call on invest in. This we can call as validate new product ideas.
When you are validating, you can validate multiple ideas to determine which one will suite your product the best and the users.
Next important thing is we need to see weather the product is useable. when you come to this stage it means that the business directions are taken and you need to have a high fidelity prototype to test weather this is useable. Here you need to test the actions, buttons, text labels, flows, messages etc… to make sure that everything is clear.
“ Focus on design not the tools ”
What is Effective Prototyping ?
When creating prototypes specially in high fidelity prototypes always remember that users will expect it to be like a real app. They will think that all the links, buttons and other things will work as it is. If not they might get confuse with your design. When you are testing sometimes they might tap or click on surprised areas which you may never thought of.
The best way to avoid such confusions is that at the begging let them know that some of the features might not work as it is because it’s a prototype.
You can use one of the below prototyping tools to create better prototypes.
Leading Prototyping Tools Currently in the Industry