There was a time when wireframes were a staple in every designer’s UX Process. But times change. The UX Process has grown (or shrunk, whichever way you choose to look at it) by utilizing a lean approach, with consistent feedback and multiple iterative cycles. But in order to fully reap the rewards of a Lean UX approach, rapid prototyping must become an essential piece in the UX Process.
What is a Wireframe?
For the purpose of this article, whenever wireframes are mentioned, they are in reference to static, visual wireframes and not clickable wireframes.
Wireframes provide a static visual view of the User Interface (UI). They outline what goes where, and sometimes, in the case of high-fidelity wireframes (and mockups), colors and styles will be applied to give a preview of how the final product will actually appear.
What is a Prototype?
Prototyping is the first sample produced to examine a product concept. Prototypes are actual working models of the final product. They emulate not just the functionality of the product, but the look and feel, as well.
With prototypes, the app is quickly fleshed out, with functionality and interactions in place. It allows stakeholders to quickly run through exactly how the app will look and function, thus providing almost intstantanious feedback that would otherwise be impossible through wireframes.
Going a step further, if the prototype is coded for the specific platform it is being designed for (ie., HTML/CSS/JS for a web app), then that will go a long way towards finalizing the details of the product. And saving time, is saving money.
The true value of coded prototypes lies in the fact that when created, the intention to use recycled code is there, thus saving valuable time during the development phase of the product lifecycle.
Why Prototypes over Wireframes?
Why prototyping then, and not wireframing? Technically, wireframing can be done first, followed by prototyping, but in the real world, where time constaints are actual things, this approach would be tedious and unnecessary – with a guarantee that either deadlines would be missed, or crucial feedback would be absent.
Advantages of Prototypes
So what exactly are some of the advantages the prototyping has over wireframing?
- Wireframes are static. Something to look at. Prototypes are functional, allowing for interaction, and thus providing a more real user experience, in terms of what the final product will provide.
- A prototype communicates the design much better than wireframes. While wireframes serve as screens for people to look at, a prototype goes a step further by clearly presenting how the product is suppose to look and work, thus a prototype is much more user-friendly compared to wireframes.
- A prototype doesn’t require much documentation – thus leaning out deliverables – and this is a good thing, unless you are the type who likes to have a pile of files and paperwork, on hand, stored away, in some storage room, with a leaky pipe.
- A prototype is closer to the living product than a wireframe will ever be. It takes a ‘fake-it-till-you-make’it’ approach, that is able to successfulyl garner both useful and critical feedback, in order to come out with the best possible product.
Rapid Prototyping
Rapid Prototyping allows for quick iterative cycles that help determines that path to the desired product. To maximize the benefits that rapid prototyping provides, this iterative cycle – consisting of three stages – should be followed.
Stage 1 – Prototype
First, gather business and user requirements, and do some user research. Then, you prototype. Possibly start with sketches, then maybe pop out Axure or Justinmind (two prototyping-frist software tools). Otherwise, using a framework such as Angular Material Starter, Bootstrap or even Foundation, can aid in getting a coded prototype quickly in place.
Stage 2 – Feedback
Next, get feedback. This feedback comes in two forms. One, is when a feature is complete (ie., Chat Module). Two, is when the entire prototype is complete – the heavier round of feedback.
It is important to remember that during the feedback process, it is crucial that all the stakeholders on the project are brought toegether to provide thoughts and opinions, as to their take on what works and what doesn’t in the prototype. This will help to ensure in later stages that the prototype is as close to the final product as possible.
Also, make detailed notes during the feedback process – you will need these during the next phase.
Stage 3 – Refine
Be certain that feedback is clear and concise, incorporate them into a list of refinements – – noting all necessary changes and modifications. This list will be included within the next iterative cycle.
And then …
Repeat. Go back to step one and modify prototype, in accordance with list of refinements. Get more feedback. And keep repeating, until little to no feedback is left, and all stakeholders are satisfied that the prototype represents the exact product that they believe will maximize user value. Or at least, until the next new feature is to be added.
Rapid Protyotyping is fast becoming, not only a staple in the UX Design process, but the vital elixir required for product success. Prototype provides the necessary clarity required to project what a product will actually both look and act like. Rapid prototyping facilitates discussion through visuals, as opposed to words, and creates a platform for everyone to share a common understanding. It also reduces the risk and evades requirements that have been missed, inevitably resulting in a swifter and cleaner design, and eventually, a better product.