Definition:
A prototype is an approximation of an experience that allows you to simulate what it is like to use the product or service in question.
 
Four basic types:
1. Paper Prototypes (Lo-fidelity).
2. Clickable Wireframes (Lo-fidelity).
3. Prototyping tools, e.g. Axure (Mid to high fidelity).
4. Rapid prototyping, coding with a CSS framework like Bootstrap (High-fidelity).
 
When to use:
1. When creating a Minimum Viable Product (MVP) in Lean UX.
2. When you want to facilitate usability testing of new/amended wireframe designs.
 
Paper Prototypes PROS
1. Can be created in an hour.
2. Easily arranged and rearranged.
3. Cheap to do.
4. Can be assembled with materials already found in the office.
5. Fun activity that many people enjoy.
6. Small learning curve.
 
Paper Prototypes CONS
1. Rapid iteration and duplication of the prototype can become time consuming and tedious.
2. Simulation is artificial without using a mouse, trackpad, keyboard, touch screen, etc.
3. Feedback is limited to the high-level structure and flow of the product.
 
Clickable Wireframes PROS
1. Provides a good sense of the length of the workflow.
2. Reveals major obstacles to primary task completion.
3. Allows assessment of findability of core elements.
4. Small learning curve.
 
Clickable Wireframes CONS
1. Need people to understand it’s an unfinished product.
2. More attention is focused on words and layout.
 
Prototyping tools PROS
1. Produces high-quality and realistic prototypes.
2. Visual design and brand elements can be tested.
3. Workflow and user interface interactions can be assessed.
 
Prototyping tools CONS
1. Interactivity is limited.
2. Using static data limits the simulations you can do.
3. Time-consuming to create and maintain (keeping it in sync with the actual product).
4. Slow mobile loads, e.g. Axure’s master responsive templates can slow down your prototype’s page loads to over a 30 second wait.
5. Need to learn coding logic (if/or/else/not/equals statements) to simulate advance interactions.
6. Bug testing coding logic is not scalable in most cases.
7. Medium learning curve, will take you over a week to be good at it.
 
Rapid prototyping PROS
1. Potential to reuse code in production.
2. The most realistic simulation you can create.
3. Can be generated using existing code assets.
4. Can hook designs up to real data on the coding backend.
 
Rapid prototyping CONS
1. Can get bogged down in the finer points of the prototype.
2. Time-consuming to create working code that delivers the desired experience.
3. Tempting to waste time perfecting (optimising) the code.
4. Updating and iterating can take a lot of time.
5. Big learning curve if you can’t code already, will take you over a year to be good at it.