Just a couple of years ago designers struggled to select a prototyping tool that fits well into their design workflow.
Nowadays the design industry is undergoing a big transformation as it adjusts to designers’ needs — we are seeing more prototyping tools than ever before. It is becoming an essential part of the design workflow and product development.
Modern prototyping tools and techniques can easily trick users into thinking they are interacting with real apps. For example, Framer has an API that allows you to use real data and store changes in a database in order to create an almost native experience.
But, more importantly, “Prototyping is a strategy for efficiently dealing with things that are hard to predict.”–Scott Klemmer
And people suck at predicting things. We use numerous techniques that help us minimise risks, estimate development time and build meaningful products, since when it comes to product development, we have to make sure we validate our ideas before putting them onto a conveyer belt.
Because, “Ideas are cheap, and development is expensive.” –Jay Stakelon
With prototyping we can validate a lot of our assumptions without waiting for the actual development stage or spending a fortune.
First of all, let’s quickly recap what prototyping is good for:
- It helps us build shared understanding between customers, managers and developers.
- Convey and pitch ideas to stakeholders.
- Gather quick feedback and validate assumptions.
With that in mind, we have to treat prototyping as something we can throw away as soon as we’ve learned what we wanted to. Prototype is a disposable artefact, the purpose of it is to gather feedback that guides us through the iteration process.
Depending on the goal we’re trying to accomplish we may go with low-fidelity (rapid prototyping) or high-fidelity prototyping.
We use low-fidelity prototyping for creating, iterating and sharing both full or small part of the flow. Essentially, it is good for quickly validating your assumptions and gathering feedback from users. However, it falls short at showing animated interactions within a screen or in-between screens.
High-fidelity prototyping is great for pitching your ideas to customers and stakeholders, and explaining how specific animation looks like to developers. These prototypes are great for testing animated interactions within a screen or linking together just a few pages. Combined with neat interactions, these prototypes can effectively guide user through multiple steps of a process and provide meaning with motion.
With both low and high-fidelity prototyping it’s important to limit the scope of the prototype.
That frees us from the nightmares of continuous maintenance. That means we won’t need to adjust screens to make them fit with each other whenever we’re making changes, big or small.
Often it’s easy to get carried away and be tempted to build a prototype that fully resembles the final product. Just keep in mind that prototyping is a functional example of a product, used for testing purposes and gathering feedback.
Once we’ve settled on the context for a prototype, it’s time to pick a prototyping tool. And this is when the right tool for the right job comes in.
“We currently have a few major schools of thinking. They roughly fall into 3 categories: Timeline, Signal Flow & Code.” — Pasquale D’Silva
In his Medium Post “The state of Interaction Design tools” Pasquale D’Silva categorised interaction design tools, and Noah Levin iterates on this approach and groups existing tools into 4 categories. Let’s quickly go through them.
Timeline is a keyframe-based animation approach. It allows you to animate every UI element by creating keyframes and triggering them at a set point of time.
After Effects is not a prototyping tool per se, but it can be nicely integrated into your design workflow. After rendering an animation, you can export it into a click-through prototyping app like Marvel or InVision. There’s a drawback though: high maintenance. With every tiniest change you will be forced to re-render the animation.
Timeline tools like Principle or Tumult Hype are modified versions of After Effects combined with a click-through approach.
Click-Though tools allow you to connect a handful of screens by creating hotspots and linking them together.
Marvel, Flinto, Axure, InVision — all of them are click-through prototyping tools with a number of similar features. Watch this space: there’s a big competition going on, and it’s fun to see them evolve. All of them are quickly coming to realisation that a click-dummy prototype is very limiting in many aspects, and are trying to provide more flexibility with new animation features.
The learning curve for these tools is extremely low, and it’s quite common for both product owners and developers to use them on a daily basis.
If you think of how programming languages are just different kinds of logic with some syntax slammed onto it, you can see node-based approach essentially as a flowchart editor. So, some good news: you don’t have to learn any syntax. Bad news: you need to be good at high-level, abstract thinking.
In this category: Origami, Form, Avocado. Origami is widely known as a tool used and preached by Facebook designers, and Form has recently joined Google (apparently it’s popular nowadays to own a prototyping software).
Code-based tools, oh well, you know, they require you to code.
One of the apps worth mentioning in this category is Framer. It’s based on CoffeeScript, which is a more legible and minimal way to write JavaScript.
When selecting a prototyping tool that fits your needs best, don’t disregard your design background. For those of you with animation experience it’s going to be much easier to wrap your head around timeline tools, while others might prefer code-based or node-based tools because of their experience with programming languages.
User testing is a huge standalone topic, but it’s also one of the main reasons we prototype, since the sooner we identify the problem, the sooner we fix it.
There are a couple of ways you can test your prototype:
- With internal testing we have complete control over the whole process, as well as flexibility to question testers as we go. First step would be to prepare a script that helps us fulfil the goal of testing. Second, identify and select your target users to receive the most relevant feedback. Modern prototyping tools allow you to share and open a prototype in a web or mobile browser. Use QuickTime to record the testing session for future review. Other basics to keep in mind: don’t forget to sign a consent form and an NDA with the user.
- Guerrilla user testing is a quick, low-cost method that enables real user feedback. We can conduct it with anyone at any point in time. It works best when you can be relatively selective about your users (e.g. testing at events or locations that are somehow related to your product). But it also works when you want to quickly identify if you have any fundamental problems with your prototype.
- Online user testing is more quantitative rather than qualitative, simply because you don’t have that much control over what users do. Online user testing platforms are also quite expensive. I’d recommend using Peek when you’re low on budget. It’s a free usability testing tool powered by UserTesting. After sharing a link to your app or prototype, you will get a 5-minute video of a real person interacting with it.
It’s really fun to see prototyping toolset expand so fast, but let’s admit it: these tools are yet to provide the desired level of control and flexibility. If I were to fast-forward to the next generation prototyping software, it’ll naturally combine graphics editor with prototyping functionality.
First attempts to implement this approach are taken by plugins and online design tools like Silver, Figma, Adobe Comet and Atomic. So give them a spin.
Another problem with the current state of prototyping tools is that mobile is still more popular than web prototyping. While web slowly but surely moves towards adopting animated interactions, prototyping tools are still trying to catch up, sometimes even unable to provide simple hover interaction.
The prototyping landscape changes quickly, and tools and techniques get outdated every day. Keep an eye on it, move fast, adopt and expand your skill set. The glorious hour of great prototyping software is just around the corner.
