Why create a prototype?
It’s an easy way to give users a realistic feel for what you are making without spending a lot of engineering effort. Better to fail and iterate at the design stage than develop a feature taking up tons of hours across multiple teams…and then fail. I use Protopie for slightly complex interactions but use Figma for simpler interactions.
I’m not advocating you use Protopie. It’s just the one I was recommended, use and like. If you are using Protopie, here’s a few tips (including 2 power tips) to make your work easier.
Power tips:
1. Bottom sheets
The video shows a bottom sheet but the same logic can be applied to any selection dropdown.
Here’s how to create an interactive dropdown in Protopie:
2. Radio buttons
Here’s a short video on how to create an interactive radio button using Protopie:
3. Make it easy for users to recover from mistakes
Resetting a screen when a user lands on it is a great way to let users recover from mistakes or limitations of the prototype.
4. Making the prototype more realistic by adding loading states
Your real app is probably not going to find a search result in an instant. For that or any of other screen changes that people are used to waiting for…you can make the experience realistic by adding a loading state. Protopie supports GIFs so you can download an icon from https://loading.io/ and add it to your design.
5. Support for different flows based on user input (eg search)
This isn’t ideal but I was creating a search flow and wanted to test it with users across multiple search inputs. i.e. I wanted users to search and find A, B and C where A,B, C are different profiles within the app. One way is to duplicate all your screens and link out to each flow from a home page. If you know a second way…I’m all ears.
6. Make elements easy to tap by increasing touch area
This is pretty straighforward but soo important. I’ve seen lot of folks struggle with clicking on elements in prototypes because we don’t add a big enough touch area.
Good luck prototyping.
