Using ProtoPie For Creating Complex Interactions
If you ask a UI designer “What is the most important tool in designer’s toolkit?” most probably you will hear “Prototype.” Creating a prototype is the best way to share your thoughts and ideas with other people.
There are two basic types of prototyping — low-fidelity and high-fidelity prototyping. Low-fidelity prototypes resemble just basic interaction with a product while high-fidelity prototypes are prototypes that look and work almost like a finished product.
High-fidelity prototypes bring a lot of benefits for designers such as:
- More relevant results of usability testing. In agile working process with tight timelines, it’s vital to testify design ideas and gather users’ feedback as fast as possible. And the results of the testing are directly related to the level of the prototype. The better your prototype resembles a real product, the more relevant results you’ll have.
- Fewer questions during design handoff. Design handoff is a part of the design process where design team delivers the artifacts to developers so they can implement them in a working solution. During design handoff, it’s essential to get both sides on the same page. A high-fidelity prototype helps achieve that goal by making it clear how design works.
But there’s one thing that prevents designers from creating high-fidelity prototypes. Many designers believe that building interactive prototypes takes a lot of time. Some designers even think that creating interactive prototypes always require coding skills. That’s not true.
In this article, we’ll review a tool called ProtoPie. This tool introduces joy in the process of creating interactive prototypes. We’ll also cover a few new features that were recently introduced in ProtoPie; that features help designers create even more realistic high-fidelity prototypes.
What is ProtoPie?
ProtoPie is a highly interactive prototyping tool that helps designers to turn ideas into prototypes that feel real. A key thing that differentiates ProtoPie from many other prototyping tools is that it’s an interaction-focused prototyping tool — meaning that the goal of prototyping using ProtoPie is to help designers convey a sense of interactions, not just demonstrate pixel-perfect layouts. This allows people who interact with a prototype understand what an actual interaction with a real product will be.
What ProtoPie Offers To Designers
In a nutshell, ProtoPie is a tool that allows creating an interactive prototype out of static mockups. Here are a few core features the tool offers:
Import mockups from Sketch or Adobe XD
Sketch or Adobe XD CC are two favorite tools for UI design. ProtoPie supports the import of both Sketch and Adobe XD files. Designers can add the graphics assets created in Sketch/Adobe XD to ProtoPie with a single click.
Create interactions without coding
Seasoned designers know that excellent user experience is built around effortless interactions. With ProtoPie you can specify a dynamic response for each object in your UI, and the great thing that ProtoPie doesn’t make you dive into the code to create a particular interaction — it’s no-coding-skill-required prototyping tool. As a result, it’s possible to incorporate fairly complex animated reactions (such as sliding or scroll paging) in a prototype in no time.
Utilize device sensors
Sensors are something that differentiates modern mobile devices from desktops. Modern mobile devices are full of various sensors, and many mobile experiences are built around device sensors. Thus, it’s vital to consider how sensors work during prototyping.
ProtoPie allows designers to utilize device sensors when building prototypes. A designer working in ProtoPie can use 3D touch, a compass sensor, tilt sensor, sound sensor.
Here are just a couple of examples of what you can achieve with ProtoPie:
- ProtoPie x littleBits: NEST prototype
- ProtoPie x littleBits: RC car prototype
Use bridge mode to connect devices
Besides interactions within a single device, ProtoPie allows prototype interactions that involve communicating among multiple devices. The common examples of such experiences are chatting or transferring money.
Simulate a prototype on a desktop screen or test it on a real device
When designing it’s crucial to see how your design work in action. ProtoPie provides a preview mode that allows designers to simulate their designs on a desktop. With this mode, it becomes much easier to create and test interactions.
But ProtoPie also allow designers to test prototypes on actual devices — it has a special app called ProtoPie Player for that purpose. This app is available both on iOS and Android.
Share your prototype online
ProtoPie has its own cloud and allows you to share your prototypes on the web. It’s also possible to track different versions of your prototype online.
New features available in ProtoPie 3.9
With the release of Prototype 3.9, the tool now offers a few new excellent features:
- Native and physical keyboards
The new features help designers create more sophisticated interactions when producing prototypes for a product.
Data input is an integral part of human-computer interactions. As users, we fill out dozens of different forms on a daily basis. The experience we have when filling out the form — whether it’s good or bad — influence the way we feel about products. That’s why it so important to consider data input as a vital part of the prototyping process.
ProtoPie 3.9 has an excellent new feature that makes it much easier to prototype for user input. This feature allows direct input interactions — it’s possible to make input from native keyboards on smart devices and physical keyboards for computers or connected to smart devices. It means that you can type your real email address into a login field or select a number of items in checkout form. No more excuses like “After you click on this button, imagine that you’re filling out this form” needed.
Native keyboard brings extra benefit to designers — they’ll be able to see how their layout work with & without a visible keyboard; in many cases, this experience makes designers rethink some part of the layout.
Here is how it looks in action:
If you had a chance to use ProtoPie before, you might be interested to know how this feature works for prototypes. It’s relatively easy to enable this feature for your prototype — ProtoPie provides input layer which you can use for entering text using a native keyboard on smart devices or a physical keyboard. Check this tutorial to learn more about this feature:
Variables are objects in which you can store and reuse defined values. Before ProtoPie 3.9, the values that designers could use in the tool were always fixed. ProtoPie 3.9 introduces dynamic variables. Variables give designers a lot of creative freedom. For example, it’s possible to move a layer and store its current location in a variable.
Each variable can be either For all scenes (global) or For this scene (local). The concept can be familiar for people who have programming language skills. A variable can have three kinds of values:
- Text (string values)
- Number (numerical value)
- Color (hex code of a color)
What if we need to design a pretty complex dynamic interaction in our prototype (for instance, a complex animated effect)? One way to do it is to switch to code and create a high-fidelity coded prototype. But what if we don’t have coding skills or don’t want to spend extra time on this?
ProtoPie’s feature Formulas will help us achieve a more dynamic prototype without coding. It’s possible to use formulas for a variety of different purposes such as for arithmetic operations, utilizing variables or even accessing layer properties. This unlocks the potential for creating interactions that will be far more dynamic than anyone can expect.
For example, it’s possible to create a truly interactive experience by using native keyboard, formulas and variables together.
If you’re curious to know how to create a formula for your prototype, consider watching the following video.
Here are a few more examples of what you can achieve using formulas:
Interactive tab bar. Change the location of the element on tap. This particular example uses the detect trigger (also available in ProtoPie 3.9) that activates based on any changes of a layer.
Spinner. Spinner is a UI element that you can use to increase or decrease a value.
Ripple Effect. You can provide more natural animated feedback on user interaction.
Prototyping shouldn’t be tedious; it should be fun. To make it happen, designers should be able to transfer static design into the interactive prototype in just a few clicks. ProtoPie helps designers to do that — it makes it easier to build an interactive prototype and let the design speak for itself. And with new features available in ProtoPie 3.9 — native keyboard, variables, formulas, it becomes much easier to take your prototypes to the next level of interactivity. If you still not sure whether you want to try ProtoPie or not, think no more because now is a perfect moment for that — claim 50% off on ProtoPie.