Design Prototyping Tools: Our Highly Subjective Overview
OK, so here’s an admission that may give an indication of how long we’ve been designing interactive products: we love HyperCard. Some of you…um, “seasoned” enough to remember, might recall HyperCard as one of the most awe inspiring apps ever created for MacOS. It gave “mere mortals” the power to build relatively complex interactions using an extensible authoring language and built-in graphics tools. Back then, we built HyperCard apps to build interfaces for everything from controlling 50-slot videodisc jukeboxes, to museum way finding systems, to environmental control hubs that could wirelessly open blinds or turn up the thermostat in conference rooms. Oh, and did we mention it didn’t support color? Yeah, that kind of sucked.
But it left the door open for the next big thing in prototyping, Macromedia Director. Director, which in many ways is the Granddaddy of Adobe Flash, stood virtually alone as the prototyping and authoring tool of choice for designers for nearly a decade. But after its tenth major release in the early 2000’s, it started to get wobbly under its own weight and faded into the background with the ascendance of Flash. Unfortunately, Flash was more of a purpose-built tool for creating rich web experiences, and lacked some of the under-the-hood native power of Director for prototyping apps. Thankfully, the mantle was passed to another desktop heavyweight around 2007 with the release of Axure, which still reigns as one of the “big hammer” prototyping apps out there.
But since 2010, an interesting thing has happened: the market for prototyping tools has absolutely exploded. Big time. To get a sense of how many are out there now, check out this list put together by Mike McDearmon. Now there’s a tool that addresses nearly every need. In many respects, the explosion of choices is a result of the explosion in mobile apps. As new armies of designers began ideating, experimenting, and sharing their mobile UX concepts, they needed tools that were properly suited for the task. And the rush to fill this nascent need has been a boon for all of us.
One feature a lot of these tools emphasize is the ability to share and comment across teams, resulting in sometimes useful — sometimes not — mashups of lightweight prototyping and project management features. We’ve used a lot (but by no means all) of the tools on Mike’s list, and find that their efficacy and value are closely tied to what we’re trying to build and how the client likes to communicate (duh). We haven’t found the “one size fits all” prototyping solution, probably because there are no one-size-fits-all clients or projects. But here’s our highly subjective and incomplete take on some of the prototyping tools we've used in the last five years:
Keynote. Yep, that Keynote. The one some people confuse as just a PowerPoint clone that runs exclusively on MacOS. We’ve probably used this tool the most over the years for prototyping all manner of products. Pros: It runs natively, so it includes OS-level services that make things fast and easy. Supports all kinds of templates and canvas sizes, it can output interactive PDFs which can run as clickable/touchable experiences in “chromeless” PDF viewers on various mobile and desktop platforms. Cons: PDF and native doc support only, so not so good for web sharing and commenting. Can’t illustrate complex transitions and animations beyond limited built-in effects and sprite transforms. Ill-suited to illustrating a wide variety of long web pages or parallax designs. Group sharing, commenting, and version control isn’t very modern.
Axure RP. It’s big, it’s bad, and it can tackle just about any web or prototyping job. Pros: Native drag and drop goodness, with lots of template, icon, and widget libraries. Supports relatively complex touch and click interactions (including on-action target feedback), and useful export options including live secure web site that can be reviewed by clients. Cons: Because it can create virtually an entire web experience from soup-to-nuts, sometimes it’s hard to define the line between “prototype” and “full-blown web experience”. Collaboration requires a “professional” account, and the tools can be a bit clunky. It’s heavy.
The following apps all fall into the newish category of browser-based prototyping tools, all of which we’ve tried for various projects:
They’re all generally useful to varying degrees, and while this isn’t the place to get into the detailed pros and cons, there’s one thing that we just don’t like much: they use the browser to build the prototype, and require us to upload files to their server. While this has obvious advantages (you can make something and it’s instantly viewable on a device from anywhere), we don’t like the perceived lack of control. Like all SAAS prototyping tools, once you stop paying your subscription, everything vanishes. In most cases there is no “export” option: it’s viewable in the cloud, or it’s nothing. It also means we don’t have the power and solidity we expect from a native app.
What we’d like to see more of (and what we’d like to spend more time using), are native applications that can create prototypes that demonstrate high-fidelity animation and transition effects. As Android and iOS evolve to being flatter on the surface, they’re becoming more complex in their ability to “communicate and delight” through subtle yet important motion effects. We’ve fiddled with Origami a bit, which is based on the powerful but aging Quartz composer platform, and it hints at what we hope the new crop of prototyping tools might be. Another important and relatively new entrant in the category of powerful and high-fidelity mobile prototyping is Form, which was bought by Google. It can make native prototypes that are surprisingly powerful, and perhaps most interestingly, can even tap into device-level services like the camera, accelerometer, and gyroscope. The Form development team seems very open to feedback, and they’ve created a solid and enthusiastic (but small) community of users. As the field of prototyping tools evolves and morphs into product classes built for particular needs (yay!), we’re excited to see how Form evolves.