February 25, 2015
Enola Labs

Enola Labs creates custom strategy and products for mobile and web.

Let’s Talk

Subscribe to our blog:

With the increasing number of services becoming available, deciding on the best prototyping tool to adopt in your team’s workflow is not an easy task. Some prototyping tools have a ‘limited’ number of features and capabilities, while others promote a very extensive list. These features are not limited to the interactions the prototype can create, but also include asset management, prototype delivery, and feedback. When reviewing the available prototyping tools I chose the following three to review: Proto.io, InVision, and Marvel. To conduct my review I created the same prototype with each tool, an in-house project named Strapped Cash.

In regards to pricing, all three prototyping tools are based on a subscription model. The models vary in price based on the number of users, number of current projects, and the adoption of monthly or yearly subscription. A discount is offered with a yearly commitment. Full pricing details can be found on Proto.io, InVision and Marvel’s websites.

Creating the Prototype

Proto.io - About 8 hours to create.

InVision - About 1.5 hours to create.

Marvel - About 1 hour to create.

Interactions and animations are where Proto.io excels. There is more of a learning curve associated with Proto.io when compared to InVision and Marvel, but the tool is far more capable of creating a prototype that is as close to the finished product. Proto.io has the ability to create interactions, custom animations, screen states, scrollable containers, container states, play videos, implement logic, toggle visibility, plus much more. It also comes with UI libraries for iOS, Android, and Windows Mobile and the user can manipulate each object within a single screen.

Ultimately, the prototype is still screen based. Interactions are created with a hotspot which then has a plethora of options to link to other screens, screen states, visibility, animation, etc. I did find myself having to fix ‘bugs’ here and there because so much was linked and a simple change can throw interactions off. Keeping track of exactly the order of events can be difficult depending on the complexity of the prototype.

With these advanced features, I was able to create a prototype that was as close to the final product as possible without actually entering software development. The further I explored Proto.io the more I realized how much is possible with the tool. It’s very impressive and definitely worth looking into.

InVision and Marvel take a different approach to prototyping, and actually are extremely similar in nature. Instead of advanced interactions and animations combined with states, these two tools use more of a screen-to-screen mentality. After uploading your screens to each tool (more on asset management in a bit) hotspots are created to link each screen to one another. When linking each screen you designate the destination screen, action/gesture, and transition. Both tools have similar gesture and animation options which include sliding in, fading, flipping, etc.

I prefer the way that Marvel addressed linking screens together over InVision. Marvel displays the screen options at the bottom of the browser with previews of each screen and transition/action options above, whereas InVision uses more of a dropdown menu approach. The thumbnails seen using InVision are merely to switch to that screen rather than using visuals to link screens. One small feature that InVision does have over Marvel is the ability to set a timer and automatically redirect to another screen.

Asset Management, Delivery and Feedback

Proto.io

Proto.io only has an option to upload your individual screens or assets, while InVision and Marvel both incorporate a syncing service. Proto.io allows assets to be organized within folders, but if any changes are made you will need to manually upload the files. That’s not a huge deal, but half of the time I found myself having to log out and clear my cache on my browser for the changes to appear. This was extremely frustrating. I have been told by Proto.io that a syncing service is being worked on and will be added in the future which will eliminate this current headache. Proto.io supports more file types than the Marvel and InVision .png, .jpg, .gif, .svg, .ogg, .mp3, .wav, .aac, .oga, .ogv, .mp4, .webm, .pdf, .psd, .ai, .eps, and .sketch files.

Proto.io has a number of options to share the prototype. You are able to copy the URL, scan a QR code, or use an embed feature with a published project. You also have the ability to export to HTML or PDF when in editing mode. The prototype is resized to fit when viewing the project from a web browser on both mobile and web.

On a desktop browser the prototype has a number of options to enhance the experience, toggle interaction visibility, zoom, make comments, and jump to specific pages. On a mobile browser the prototype is merely a screen with interactivity. Proto.io also has a native app that can be downloaded, but must have a login. Free reviewer accounts can be created and be limited to view certain projects within your Proto.io account. The native iOS and Android app are the best way to view the prototype if viewing from a mobile device, but is kind of a pain to set up reviewer accounts.

Commenting is available on the web view when using Proto.io. Comments can be made on a screen by screen basis, or comment on the overall prototype. These can also be filtered by all, unread, completed, and active. No files can be attached to the comment.

InVision

InVision uses a desktop syncing app, Dropbox integration (beta), and Box integration (coming soon) to sync assets. InVision supports more file types than Proto.io or Marvel. I used Dropbox for testing purposes and the process of adding and updating screens is smooth and seamless. I would add a new screen to the corresponding Dropbox folder and it would appear in my project. This was great! Deleting a screen from within InVision does not delete the file in Dropbox. This was by far the best experience as far as adding assets and keeping them up to date. The file types supported are: .PNG, .JPG, .GIF, .PDF, .PSD, .AI, and .SKETCH files.

When it comes to delivering the prototype to the client, InVision is my favorite. You have multiple options to share the prototype including a URL, email, SMS, embedding, and download. When a link is opened up on a mobile device there are instructions to tap the share button and add to home screen, at least on iOS. This gives a very similar experience as a native app. On the web view, the attention is drawn towards an initial tutorial to make sure all viewing features are known prior to exploring the prototype. There was barely any hassle in handing over the prototype deliverable no matter which way it was sent. InVision will even provide a notification if there is a newer version available compared to what is saved to the phone.

Feedback is another strong feature of InVision. There is a comment mode where comments can be added in varying categories: everyone, collaborators, and dev note. A sketch or image is also able to be attached to the comment.


Marvel

Marvel currently adds screens with a manual approach like Proto.io. It does have Dropbox integration, but it doesn’t seem to sync new screens added to your Dropbox folder. Although, If you make a change to a screen and replace the image within Dropbox, it will apply this change and maintain your hotspots. You also have the option to add files from your computer. The file types supported by Marvel are: .psd, .png, .jpg, .gif, with plans for .sketch and .pdf.

Marvel is comparable to InVision in delivery of the prototype. Methods to share include: URL, email, SMS, QR code, and an embedding option. Downloading the prototype with HTML, CSS, and Javascript is also an option with the pro plan. Marvel has a native iOS and Android app where prototypes may be viewed, and even edited for on the fly changes. The biggest complaint that I have right now with viewing the Marvel prototype is that it doesn’t scale to fit screen/viewport unless you view it in the native app with your credentials. Unfortunately, this doesn’t provide the best experience for someone to view it outside of your account.

Marvel is the only one of the three to not incorporate commenting, yet. Although, I have read that this is a feature that is currently being worked on by the company.

Pros and Cons of Proto.io, InVision and Marvel

Each of these tools have a pros and cons, but it ultimately comes down to what you need in a prototyping tool. If the purpose of your prototype is to experience the flow from screen to screen and get a general feel for what the end product can be, I would recommend InVision. Although Marvel was my favorite app to use when constructing the prototype, without scaling to fit the prototype within a viewport, the lack of commenting, and needing better asset management, InVision wins.

In my opinion Proto.io is in its own category. I can’t say it is better or worse than InVision or Marvel because I feel that it has a different purpose. Proto.io is extremely powerful with its long list of features, but that isn’t always necessary. It boils down to what you and your team need out of a prototyping tool. It took me much longer to prototype with Proto.io, but the tool trumps InVision and Marvel when it comes to versatility.

Proto.io

General

  • supports .png, .jpg, .gif, .svg, .ogg, .mp3, .wav, .aac, .oga, .ogv, .mp4, .weBm, .pdf, .psd, .ai, .eps, and .sketch files
  • web and mobile apps
  • subscription service

Pros

  • UI Libraries for iOS 7 & 8, Material Design, and Windows Mobile 8
  • individual objects with interactivity rather than screens only
  • advanced capabilities including animations, transitions, screen states, scrollable containers
  • allows a timer to be integrated into screen transitions

Cons

  • long learning curve, although not too difficult after watching provided tutorials
  • hotspot indicators only on web view
  • the tool may have too many features for some project’s needs
  • screens flash white as a new screen or container state loads

InVision

General

  • supports .png, .jpg, .gif, .pdf, .psd, .ai, and .sketch files
  • web app
  • subscription service

Pros

  • quick learning curve
  • create prototypes quickly
  • sync files with InVision desktop app, Dropbox, and Box
  • hotspot indicators on mobile and web
  • has a feature called LiveShare which allows for real time collaborating
  • allows a timer to be integrated into screen transitions
  • attach files to comments

Cons

  • transitions and animations are limited
  • status bar is fixed in prototype due to iOS limitations which can obstruct design

Marvel

General

  • supports .psd, .png, .jpg, .gif, with plans for .sketch and .pdf
  • web and mobile app
  • subscription service

Pros

  • quick learning curve
  • create prototypes quickly
  • visually link screens rather than using drop down menu
  • sync files with Dropbox, but must manually add screen initially
  • editing and view prototype on mobile app
  • hotspot indicators on mobile device
  • does not allow a timer to be integrated into screen transitions

Cons

  • transitions and animations are limited
  • no integrated client feedback, but is being worked on
  • does not resize to fit prototype in viewport for web viewer

Before jumping into designing your app, there is a lot to consider. To help you with the process, our mobile and enterprise app development company experts put together a comprehensive App Development Checklist Whitepaper. You can get the free guide here.