Wireframes and Photoshop comps are invaluable tools when designing mobile apps, but they miss critical components: interaction and animation. Clickable, usable mobile prototypes help bridge this gap, and are essential tools when designing, testing, and validating mobile systems. Today, there are two primary categories of mobile prototyping tools—those focusing on screen flows, and those focusing on animations.
“Screen Flow” Prototypes
Many tools out there today focus on what we’ll call “screen flow” prototypes: prototypes that are built around a series of screens connected by interactions. You’ll sometimes see these called “click through” prototyping tools, though most offer more interactions than just clicks. As a designer, these types of prototypes are invaluable for validating that the flow from Screen A to Screen Z is logically mapped out and easy to follow. They can also be a great resource for testing states, by simply treating each state as a new screen in the flow. Finally, because these prototypes are both quick to build and can be built from at any level of fidelity, screen flow prototypes can be a useful tool for testing with users—either to test usability, or to validate the underlying functionality—and for validating concepts and features with stakeholders. Because of the varying levels of fidelity these prototypes can be built from, screen flow prototypes can fit early in your workflow, built from sketches; early in your workflow, built from wireframes; or at the tail-end of your workflow, built from fully-formed design comps.
Best for: Evaluating overall system flows, usability testing, validation testing
Pros: Quick to setup, low learning curve
Cons: Generally can’t handle complex animations
One of the more mature products in the constantly growing mobile prototyping arena, InVision provides robust functionality for mapping out screen flows across multiple devices including mobile and desktop web. Like most mobile prototyping tools, InVision relies on importing screens from other software (i.e. as PNGs), rather than building your design within their app. InVision’s prototyping capabilities are driven primarily by hotspots, which are drawn on top of a screen to define interactive areas. Each hotspot can then be linked to an action, which will typically mean transitioning to another screen. InVision includes a number of useful transitions, such as Slide and Flip, though it’s important to note that these transitions can only be applied to a whole screen (you can’t, for instance, slide in just a part of a screen). While this limits the utility when it comes to prototyping animated content, the true focus of InVision seems to be on evaluating screen flows, and it accomplishes this task very effectively. In addition to transition effects, InVision can also handle sticky headers and footers which can greatly help when evaluating screens that rely on fixed elements. InVision also includes a suite of collaboration tools, which allow you to share designs with colleagues to get feedback directly on the screens themselves.
Flinto operates very similarly to InVision, focusing on building screen flows by tying hotspots to actions. Flinto offers a similar suite of transition effects and sticky header/footer functionality as can be found in InVision. While InVision is architected around a list/detail model, where hotspots can only be defined from a single-screen detail page, Flinto provides a more holistic view of the system. You can see all your screens in a grid, define hotspots across multiple screens without changing views, and even apply sticky headers/footers across multiple screens simultaneously. Connections between hotspots and screens are made by dragging from screen to screen. This approach can be a bit harder to manage when dealing with a larger number of screens, but might be preferable for people working on smaller sets or who like managing all screens at once. Flinto designs can be easily shared via URL or text, but do not feature built in collaboration or commenting.
Unlike screen flow prototypes, which focus on how the whole system comes together, animation prototypes tend to focus more narrowly on granular interactions with complex transitions and animations. These are the tools you turn to when designing precisely how the on-screen objects move and scale within the app, such as when expanding a view or swiping through cards. Whereas screen flow prototypes typically rely on transitions between entire screens, animation prototypes eschew screens to instead focus on objects. What shows up within the viewport is driven by objects and their properties, with those properties being manipulated to create animations. While most screen flow tools have a low learning curve (they’re basically slideshows), building an animation prototype may feel much less familiar, especially if you’ve never worked with animation before. That said, these two classes of tools are very complementary, and can both find a place in your prototyping toolbelt. Great animations within a confusing workflow will still result in a poor experience, and a great workflow without great animations may miss opportunities to transcend from “functional” to “delightful.” Because animation prototypes are typically higher fidelity, and may take longer to produce, they make the most sense to fit in the mid-to-late stages of a project, when you’re either testing different, complex interaction concepts and transitions, or defining final design specs.
Best for: Defining animations and complex transitions
Pros: Granular control, very high fidelity
Cons: Substantial learning curve
Pixate, publicly launched in October 2014, is the youngest tool discussed here, but quickly gaining traction in the design industry. Pixate provides a GUI interface for arranging layers, setting properties, and defining interactions. Animations are tied to interactions. For instance, you can apply an interaction of “Long Press” to a layer, then define animations such as “Scale” to both that layer and others to be triggered on long press. One particularly interesting feature of Pixate is its native app, which syncs with your workspace to provide a live preview. The downside, however, is that this is currently the only way to interact with your prototype; there is no way to test interactions through the tool itself. Similarly, you can share your prototype with others, but at least in the current version they will have to download the Pixate mobile app to view it.
A staple of the film production industry, After Effects has in recent years become a valuable tool for designers as well. The core of After Effects is a GUI interface where animations are defined using the timeline. For example, if you have a layer at (0,0) at 0s, you can shift the timeline to 2s and move the layer to (100,100), and tween the resulting movement as needed. Unlike Pixate or FramerJS, After Effects won’t create interactive prototypes—it simply produces videos of animations. The sort of animated comps produced with After Effects can be very powerful in showcasing, at a high level, how an app feels, but lack the sort of tactile experience provided by a more interactive prototype. That said, the upside of After Effects is that, on the whole, its GUI interface can be slightly easier to work with, especially since it comes packaged with a bunch of built-in animations, with many more available for download online. After Effects also has by far the largest user base of any of these tools, resulting in a much deeper pool of learning materials available, though few are specific to interface design.
Our monthly newsletter is targeted at those with an interest in UX design, research, and strategy.