The Battle for Interactive Prototyping

There has been a continuing demand in the design world for a tool that allows designers to quickly test out interactions. Currently there are a multitude of options, but none that seemingly deliver an easily consumable interface, as well as real time interaction. The design team at Ratio spent the last few days trying out some of the more popular applications for testing out interactive prototypes (Quartz, Form, and Pixate). Here’s what I learned. Hopefully it can be of use to others looking to experiment. With that said, the landscape of interactive prototyping tools is changing so rapidly, that this may all be irrelevant in months to follow.

Quartz Composer & Origami

Quartz Composer has been around for while but had little value when it came to prototyping mobile apps before Facebook released Origami, a QC plugin that provided input patches commonly used in the phone app interaction. I spent a couple days dabbling with QC+Origami, trying to create some basic app interactions such as menu slide outs, panel shifts, and button animations. I had little experience working with node based software prior to this, so getting a feel for how things worked was tedious.

In Quartz, there are three basic components. Input patches, nodes, and compositions. Input patches are how you the interactions are defined. Nodes allow you to connect these input patches (all patches have input and outputs). It is a completely open canvas — one that I had difficulty getting used to. I wanted to prototype in a more linear manner, having a start and an end to the users interactions. I quickly learned that staying organized within the app was paramount in its usability. You can quickly become tangled up within the patches.

 

Ratio-creative-blog-tangled_quartz

After fiddling around for a few hours (ok, maybe the whole day), I was able to decipher what input patches were most useful. Interaction 2 patches, Switches, Transitions, Classic & Bounce Animations, as well as Scroll, Hit Area, and Delay patches will make your life a lot easier. I won’t go into the specifics  (for more info) but once you understand what patches to use for which situations, the program becomes incredibly valuable, as nearly everything is possible.

That said, the learning curve for Quartz Composer is fairly steep. If you want to learn it, I would give yourself a few days before throwing in the towel. The best advice I can give when working with Quartz is a) be patient, and b) have a specific goal in mind.

In terms of support, the documentation for QC is limited. You have to rely on the QC community (which seems fairly extensive). There are some helpful tutorial videos that you can view done by Jay Thrash.

 

Form by RelativeWave

If you’ve played around with Quartz Composer at all, newcomer Form will look oddly familiar. The layout and structure are nearly identical. There are a few differences that make Form more valuable for UI prototyping. Mainly, it allows you to interact with the prototype on your phone, and do this in real time. If you want a menu icon to slide out faster, you can make the change to that animation patch and it will immediately update on your phone. If you prefer to interact with a mock phone on your computer, Quartz allows for this, but if you are doing mobile phone interactions then interacting with it on a mobile device is essential to maximizing the utility of interactive prototypes. Neither of the applications allow you to interact with the prototype on both phone and computer.

A few other changes are welcomed in Form. Firstly, the input patches are better labeled (easier to decipher what an input patch will do). Another thing that Form improves upon is the grid structure of elements. Quartz Composer has what’s called QC units. If you use certain input patches (Billboards, Sprites), quartz composer will convert pixels to these QC units. This becomes confusing, as you need to convert between the two (I’m still not even sure what this ratio is. Something like 1 QC unit=300 pixels). I did a lot of fidgeting to move an image to the spot I wanted. In Form, this isn’t an issue. Pixels are always pixels.

A second complaint of the QC grid is the coordinate system. Let’s say you have an icon that you want placed in the top right of the screen. From your design comps, you know it’s 300 pixels from left, and 80 pixels down. When you drop an image into Quartz, it will default to the center of the screen, where the position will be (0,0). While doing the math isn’t extremely tedious, it’s an extra step. One that grows tiresome. This isn’t an issue with Form. The grids are aligned with how most design applications work. Top left being (0,0).

ratio-blog-quartz_blog_coordinate

Overall, Form seems a bit more seamless, performs better, and real time interaction with your phone makes it preferred over Quartz Composer. The fact that they will have a growing community, and better support/documentation also adds value in investing time into it over QC. That said, the interfacing is so similar to Quartz, that whatever you invest in one application, will most likely span to the other. Also, keep in mind that while QC is free, Form will cost you $80. There is free trial on their website (linked above) if you’d like to try it out. And some documentation that will get the ball rolling.

Pixate (Beta)

If you aren’t a fan of the node based interfacing that is used in QC and Form, Pixate may be a better option for you. While I’ve only dabbled with this web application for a few hours, it seems to have an interface that is much more user friendly (at least to the novice).

The premise is fairly simple. You upload (can drag and drop) images you want necessary for your animation. Then you can drag and drop ‘Interactions’ or ‘Animations’ on those images. For example, if I had a hamburger icon that I wanted a menu to slide out upon hitting, I would drag and drop a ‘Tap’ interaction on the menu icon. Then I’d add a ‘Move’ animation to the menu that I want to move, once the icon is tapped. You can set the start and end position, duration of the animation, as well as basic easing curve options (ease in, ease out, spring, etc). You then link the Pixate phone app with the web app, and you can instantly interact with it (similar to Form). All changes happen in real time.

ratio-blog-pixate_interface

You also have the ability to set conditional statements on interactions. If you want a status bar to scale 2x when tapped, and then when you press it again it shrinks back to 1x, you would set a conditional on the animations. The conditional statements are fairly straight forward (I have very little development skills).

In this case, I would set a conditional on the scale up animation that says scale up only when the current scale is less than 1.5x (button_layer.scale < 1.5). Then I’d set another condition on the Scale down animation that scales down only when the scale of that button is at 2x, or in this case, greater than 1.5x (button_layer.scale > 1.5).

ratio-blog-conditional-pane

I get the sense that with Pixate, you are trading complexity for less customization of animations. I can’t be sure of this, as I’ve only used the application for a short timespan, but I can’t see this format allowing for same depth of customization that form/QC allow for. That said, the node based visualization was difficult for me to grasp, so I’m happy to trade layers of complexity for slightly less customization of interactions.

Pixate is a team consisting of 11 members, fully committed to making the product what designers need. That is worth considering when deciding what to invest in, as the progression of Quartz Composer is dependent on what external developers build on top of it (Facebook creating Origami for example), and Form is a 6 person R&D shop that builds products for others, as well as themselves simultaneously, so may not have the resources to evolve the product over time.

 

Conclusion

It all comes down to what the intent of your prototype is. Some use cases may be showing a specific animation to a developer so they can code the interactions exactly as you want them. Or perhaps to play around with a novel interaction that you want to see in action to see if it supports the users experience or distracts it. In these cases I’d use Form or QC. If it is instead to quickly put together a 3–4 part path of interactions and feel what that would look like, Pixate may be a better option.

To be quite honest I’m still not entirely sure where these applications will fit into my workflow. It seems like for interactive prototyping, the most utility is in the early stages when you have to define the structure and general system of movements between states. This was something I felt was achievable in Axure. When I was first learning Quartz, I kept asking myself what the primary use case for this would be. A co-worker told me that it was used heavily in the design of Paper. That made perfect sense, and was a use case that I hadn’t thought of (creating completely new interactions that were short but needed to be precise in their motion). I’ve yet to design an app that involved this amount of complexity/novelty in the interactions.

As the industry moves forward, these applications will probably become better placed in the market, as the need to quickly see interactions is increasingly in demand. It will come down to what application can get designers to see results most quickly. For me, that is Pixate (thus far). But there’s only one way to find out. Start playing around for yourself!

I’ve included a chart that mentions some of the pros and cons of each application, and what those trade offs are. I would definitely suggest spending some time playing around with each of these tools (hopefully soon Pixate will be open to public use).

ratio-blog-quartz_blog_chart