Wisdom & war stories from the trenches

Designer’s Toolkit: Road Testing Prototype Tools

We’ve all been there: you’ve got a few days to throw together a prototype. For expedience sake, you go to one of your large, well known tools to get the job done. The files quickly become bloated and crash—hours of hard work lost. There’s got to be a way to create prototypes at a similar level of fidelity with a lighter weight tool.

After test driving some alternative prototyping tools I discovered that there are indeed other good options. Here is an overview of what I found, followed by assessments of each tool, with hopes it will help fellow designers in the prototyping trenches.

Choosing the tools

After researching existing prototyping tools, I narrowed a long list of about 40 to a small set of 10 that looked the most interesting. Some factors that influenced which tools I selected include:

  • Hearing about the tool from fellow Cooperistas or other colleagues.
  • The popularity of the tool based on what I read in other blogs.
  • Whether it looked cool or exciting from my first impression of the design and features.

This is not a comprehensive set of tools, but includes the ones that I was interested in checking out.

Deciding what to prototype

Once I decided which tools to try, I needed something simple to prototype that could be replicated across each of the tools. Cooper recently redesigned and launched a new website (which is awesome), and some of the sections are still being finessed and revised. I decided to use one of those sections, the About page, for my prototype.

As a starting point for the prototype, I used some design studies that one of our design interns, Tanya, had been working on. I thought the prototype would be a good opportunity to illustrate someof the behaviors within the Our People section, including a filter behavior that allows users to discover Cooper employees’ interests, and a transition for revealing more information about each employee.

Since some of the tools that I selected only offer support for iOS apps and devices, I decided to focus on prototyping the About page for display on an iPad.

The evaluation

There are many questions the come to mind when deciding whether or not to use a tool for prototyping. If this is a new tool, how easy is it to learn? Can I create a prototype that communicates the right design attributes at the right level of fidelity? How easily can I share this with my team, clients or user testing participants? How flexible is the tool for creating prototypes across multiple devices and platforms? These are the questions that fed into my evaluation criteria.

  1. Time to create prototype: How long it took me to create the prototype once the tool was up and running (this was largely influenced by ease of use and learnability); shorter times were rated more favorably.
  2. Fidelity: How well I could simulate the intended interactivity of my prototype with the tool (scrolling, transitions, flow between pages and states, overall display and appearance).
  3. Collaboration/sharing: Quality of features for sharing the prototype with others and/or working collaboratively on the prototype.
  4. Usability testing: Quality of features for conducting usability testing with the prototype.
  5. Support: Amount and quality of tutorials, help documentation, libraries (UI elements, widgets, icons), templates, etc.
  6. Interactions/gestures: Quality of features for adding gesture-specific interactivity to the prototype.
  7. Animations: Quality of features for adding animated behaviors to screen transitions and individual elements within a screen.
  8. Device testing: Quality of features for testing the prototype on other devices.

The result

I was successful in creating a prototype with each tool, but not all of the prototypes communicated the interactivity I was trying to simulate. Each tool has features that support slightly different tasks and needs, so some were better suited for the task I was doing than others.

Starting point

I was working with existing screen mock-ups as my starting point, so I did not want or need to build all of the individual elements from scratch. Tools such as proto.io, Axure, Protoshare, Easel, Justinmind and Fluid are designed to allow you to create elements and screens from scratch, in order to add interactivity and actions to individual elements. Because of this, it took me longer to use some of those tools since I was trying to import existing screen comps instead of building new ones from scratch. However, these tools would be great if you need to simulate more complicated interactions or behaviors because they provide such a granular level of control.

Speed vs interactivity

Some tools are extremely fast, such as Flinto or InVision, but with the tradeoff that the interactivity is limited to creating hotspots for linking together static screens. Another tool, Protoshare, worked great for simulating interactivity and animated transitions of individual elements, but had minimal support for actually testing on a device.

Learnability and ease of use

As a first-time user of all of these tools, learnability and ease of use became one of the most important criteria to me. My experience was better with tools that I could easily get up and running and quickly figure out how to use. Tools that presented an overwhelming amount of features or had limited support documentation often took twice the amount of time than simpler and easier to learn tools, typically with no significant difference in the level of fidelity of the resulting prototype.

Flinto, InVision and Solidify were fast and easy to learn given the simplicity of the design and limited functionality. Some more robust tools like Protoshare, Justinmind and Fluid had a moderate learning curve, but offered strong support and documentation to help new users learn the tool.

So, what tool should I use?

None of these tools will become my go-to tool for all of my prototyping needs. I see valuable aspects of each for different circumstances.

For a fast turnaround

If I need something created in a pinch that doesn’t need to communicate much interactivity, I would use a tool like InVision (or Flinto if it is for an iOS app).

For complex interactions

If I am prototyping a complicated desktop application with a lot of dynamic content or interactivity between elements on a screen, I might try using a more robust tool like Axure, Protoshare or Justinmind, with the understanding that I will need to invest some time to learn how to use it. If I needed to prototype complex interactions for a website design I would use Easel because of how easily you can generate CSS/HTML.

For usability testing

If I need to run usability testing on a click-through prototype and collect a significant amount of feedback, I would try Solidify, which is specifically designed to support user testing.

Although some of these tools have overlapping capabilities, I was surprised to discover that they each offer distinct enough features to be useful in different scenarios. The chart below should help you pick the best tool to try for your particular needs.

Share your experience

I would love to hear about how you decide what tools to use, what your favorite tools are and why, or your take on any of the tools discussed in this post. Please share in the comments.

If you want more information check out the details below about what I found to be the pros and cons of each tool.

Briefs

PROS

  • Live simulation of prototype on device with Briefscase iOS app.
  • Option to add animation and sound transition effects to links.
  • Blueprint mode clearly defines specs for design elements.
  • Support for standard and retina displays.

CONS

  • Significant learning curve and minimal online support.
  • No controls to animate individual elements in a scene.
  • No support for gesture interactions beyond tap.
  • No way to create a scrollable area; had to crop all screens before importing into Briefs.
  • Limited features for building elements in the app.​

Flinto

Flinto generates a URL to a web display of your prototypes, so you can check out the prototype I created with it here.

PROS

  • Easy to learn.
  • Extremely fast—created first prototype in only 5 minutes.
  • One click to share prototype with other users on a device or via web browser.
  • Easily edit by dragging and dropping new files over existing files.
  • Automatically creates scrollable area for overflow content.
  • Customize app icon and start-up screens for device testing.
  • Option to add transition effects (from a limited set) to links.

CONS

  • No control of individual elements, only control at the screen level.
  • No features for creating or modifying elements in the tool; all screens and mock-ups must be imported.
  • Interactivity limited to hotspots for moving between screens.

InVision

InVision generates a URL to a web display of your prototypes, so you can check out the prototype I created with it here.

PROS

  • Easy to learn.
  • Fast—setup account and created first prototype in 10 minutes.
  • Quick and intuitive to add screens and create hotspots (drag + drop).
  • Sharing and commenting system for collecting feedback.
  • Asset management features via web tool or Dropbox-like folder for easy file sharing and editing.
  • Simple web display of prototype.

CONS

  • No options for adding animation to individual elements or transition effects to links.
  • No support for gesture based interaction.
  • No features for creating or modifying elements in the tool; all screens and mock-ups must be imported.
  • No device-specific features for projects.

proto.io

PROS

  • Option to add animation to individual elements and transition effects to links.
  • Good training and support documentation.
  • Fine grain control for adding interactivity to individual elements.
  • Effective simulation of high-fidelity interaction behaviors.
  • Support for gesture based interaction.

CONS

  • Steep learning curve; not easy to use for a first-time user.
  • Time consuming—2 hours to create first prototype.
  • Designed to build out screens in the tool. Difficult to use existing mock-ups as starting point.
  • Animated behaviors are buggy and do not always work consistently.
  • Hard to assign behaviors to specific elements because element labels unclear.

Axure

PROS

  • Good training and support documentation
  • Fine grain controls for adding interactivity to individual elements
  • Good for prototyping complex interaction behaviors
  • Built-in library of widgets that can be customized with specific actions and behaviors
  • Flexible—can be used to prototype products for any digital platform.

CONS

  • Steep learning curve; not easy to use for a first-time user
  • No way to preview prototype before exporting to HTML
  • Web display of prototype is not supported by all browsers; Chrome requires a plug-in to view
  • No device-specific templates or features.

Protoshare

PROS

  • Fine grain controls for interactivity and appearance of elements
  • Option to simulate a single page or the entire prototype.
  • Collaborative features allow multiple people to edit/review a project
  • Good training and support documentation
  • Quick and intuitive to add assets via drag + drop
  • Option to add animation to individual elements and screen transitions.

CONS

  • Moderate learning curve; took some time to get oriented as a first-time user
  • Must have a Protoshare account to view a shared prototype
  • No device-specific templates or features.
  • No support for gesture based interaction, only support for mouse interaction.
  • Designed to build out screens in the tool. Difficult to use existing mock-ups as starting point.

Solidify

Solidify generates a URL to a web display of your prototypes, so you can check out the prototype I created with it here.

PROS

  • Easy and fast to sign-up and get started
  • Flexible—can be used to prototype products for any digital platform.
  • Great for setting up simple, click-through prototypes
  • Excellent features for running usability tests, collecting qualitative and quantitative feedback, and generating reports of testing results
  • Quick and easy to share prototype with others.
  • Option to add hover states to hotspots.

CONS

  • No options for adding animation to individual elements or screen transitions
  • No support for gesture based interaction
  • No features for creating or modifying elements in the tool, all screens and mock-ups must be imported
  • No option to maintain scroll position when linking between pages.

Easel

PROS

  • Fast to sign-up and get started
  • Easy to learn; clear walkthroughs and demos of key features.
  • Export HTML/CSS for individual elements or entire project
  • Integration with bootstrap framework
  • Collaboration features for realtime editing or review
  • Simulate responsive website layouts across devices.
  • Fine grain controls for styling individual elements on a page

CONS

  • Designed to create prototypes for websites only
  • No option to add animation to individual elements or screen transitions.
  • No support for gesture based interaction.
  • Must have an Easel account to view a shared prototype
  • Designed to build out screens in the tool. Difficult to use existing mock-ups as starting point.
  • Cumbersome to manage multiple pages within a project; did not discover an easy way to navigate quickly between pages.

Justinmind

PROS

  • Device-specific templates and features.
  • Quick and intuitive to add assets via drag + drop
  • Simulate feature generates a web preview of fully interactive prototype with a device frame.
  • Fine grain controls for adding interactivity to individual elements
  • Support for gesture based interaction.
  • Option to add animation to individual elements or transition effects to links.

CONS

  • Moderate learning curve; took some time to get oriented as a first-time user.
  • When multiple actions assigned to a single element, actions will not implement simultaneously, only in sequence; made simulation of transitions display inaccurately
  • Animations and transitions are somewhat buggy

Fluid

Fluid generates a URL to a web display of your prototypes, so you can check out the prototype I created with it here.

PROS

  • Large library of elements for different devices
  • Quick and intuitive to add assets via drag + drop or uploading files
  • Fast to create new pages and link pages together
  • Support for gesture based interaction.
  • Option to add transition effects to links.
  • Quick and easy to share interactive prototype via URL or QR code for devices.

CONS

  • Moderate learning curve; took some time to get oriented as a first-time user
  • Some features are not easily discoverable; depended on support documentation to learn how to accomplish some tasks.
  • No support for adding interactivity to individual elements.
  • Some unexpected behaviors across the screen view and flow view.

Join the Conversation