Websites and apps have become more complex. As a result, so have our tools for building them. It used to be that you could present your mockups as a series of static images. But this left you hoping your stakeholders or developers would connect the dots. Your designs were always at risk of misinterpretation.
I have awful memories of using my hands and sound effects to describe the behaviour of an element to a client. I struggled. So did they.
This type of situation is now something we can avoid. We can build prototypes of our product interactions or user flows. Testing the usability and functionality of these is a simple thing to do. It’s so easy, coding skills are no longer a prerequisite. Before discussing the benefits of prototyping it’s important to answer two questions:
What is a prototype?
A basic definition of a prototype is a simulation of a final product, used for testing before launch. This means we get to test a lightweight version of our final product, or an aspect of it. Testing our designs enables us to get a clearer understanding of if our design works or doesn’t. The key aspect to a prototype is that it has to be “interactive”. That means whoever is testing it out needs to be able to click or tap on something to make it perform a function. That’s about it.
When should you use one?
Every time you need to test an idea. If you need to see how an interaction looks, prototype it. Should you want to walk a client through a specific user flow, prototype it.
So what are the benefits to using prototypes in your projects?
Test our designs before building them
The great thing about using a prototype is that it lets you build a “replica” product. You can build parts of your final product, test them out, then make improvements based on your results. All without ever needing to go anywhere near a line of code. This allows us to conduct user testing before we actually build anything. That can prove to be an effective way to save development time needed to fix usability issues that pop up later on. Getting your designs into the hands of people who will be using the final product can be invaluable. It’s the first real stress test of your designs. This is especially true with mobile apps and responsive sites.
It’s essential that everyone working on a product has the same idea of what is being built. A prototype allows all stakeholders to see how to use the product and share a common vision. This makes developing a shared language much easier, which also helps speed things up. Prototypes are useful when trying to sell an idea or concept. Actually seeing something on a screen that the user can interact with can be more powerful than a static mockup. It’s often a lot cheaper too.
Develop and refine ideas
Initial prototypes can be simple wireframes, be they hand drawn or digital. At this stage, they are useful for getting feedback on basic layout, navigation, and information architecture. As the design process continues, so too can the detail you include in your prototypes. Some modern prototyping apps even allow the designer to communicate motion.
How I prototype
I usually start building prototypes once I’m in the wireframing stage of a project. I draw digital wireframes in Sketch as I find it easier to build on these once I design full UI layouts. The wires are then uploaded to InVision and stitched together. I use these to present general layout, navigation, and any major UI elements. These are usually shared with everybody involved in the project for feedback. That includes PMs, developers, QA, and of course the client.
As I start working on more complex areas, I’ll build a prototype of that area. An important rule for me to follow is that as my designs become more complex, my prototypes become less so. That is they focus on a single area or problem. If I were to build every interaction on a screen into one prototype, it would take so long it would no longer be useful. For me, a prototype should not take long to build and it will answer a single question.
For me building a prototype is all about getting my ideas in front of other people and starting a dialogue.
The market for prototyping tools is expanding every day. Each offer something different, depending on your requirements and budget. I’ve recently worked in InVision and also Axure. Other members of our design team have used After Effects and even Keynote. The tool you use doesn’t matter.