Best prototyping tools out there?

A review of Axure and other common UX tools

=== Update July 2017 ===

I am planning to write an updated tutorial on this topic, and much more detailed than this. I will announce it on my social media pages when ready, or you can also sign up to the UX training newsletter. Many new tools are now available on the market, each covering specific UX workflows. Others that are already mentioned in this article have seen a substantial re-haul so they are going to be re-evaluated from the ground up.

=== Update December 2016 ===

At the time of writing, Axure RP Pro is still the most all-embracing UX software available, including rapid wireframing to high fidelity prototyping with advanced interactions, and rather advanced diagramming tools to document user journeys. The author of this article has also created a widget library called UX Map. It's Axure-specific and it allows to add interactive annotations that can be toggled on and off globally, and to document user journeys and all sorts of interactions using a simple visual language: a so-called map of the user experience

You can also check the advanced training course that gives you all the information needed to create the most complex Axure prototypes in a relatively small amount of time. The online demo gives an idea of how much you can achieve with Axure RP.

=== Original post from January 2014 (with few 2016 updates in regard to Axure RP and the summary of recommendations) ===

In the last twelve years as a UX consultant and trainer, I've been testing over a 100 wireframing, diagramming and prototyping tools. This is the result of the compared analysis. 

Summary of recommendations:

As a professional designer, I’d recommend using Axure RP Pro for both static, low-fidelity prototypes and more sophisticated, interactive ones. 

For the occasional, non professional designers, Moqups is a cheaper alternative an recommended as a quick prototyping solution. WireframeSketcher is also an interesting alternative.

If you are looking for software that is not as complex as Axure but more robust than Moqups, you could also consider Infragistics’ Indigo Studio (which can import static mockups from Balsamiq and make them interactive), or Protoshare. Considering the price plan and the available features, they just can't be a top recommendation. A third option is UXpin, which boasts the most elegant, clean and user-friendly interface, among all UX tools available today.

For mobile prototyping, both Axure and Justinmind can be valid options. At the time of writing, the second one is a slightly better alternative. If you are looking for an easy way to build prototypes that are not too complex, you can consider the above mentioned Indigo Studio, or the more affordable Proto.io, which is evolving quite rapidly into a more mature piece of software.

If you need to design static diagrams and represent user journeys or sitemaps, you might consider LucidChart, but Axure still provides diagramming tools that are very handy. With that respect, Justinmind is still a bit limited. Microsoft Visio (now part of Office 365 as a web app, and therefore also available on a Mac) is still a great solution for those looking for maximum flexibility and a way to draw rather elegant flowcharts.

What follows is a more in-depth assessment of the above-mentioned tools, plus some additional considerations on prototyping.

 

The landscape of prototyping tools

I’ve been keeping track of all prototyping tools I’ve come across from many different sources, testing a number of alternatives from Power Point to Fireworks, from paper napkins to Flash. I’ve been analysing and testing over 90 prototyping and diagramming tools (see bottom of this post for the complete list).

 

Axure RP Pro

Axure is still my election prototyping tool, essentially for two reasons: 1) It's an extremely efficient UX tool and allows designers to create very advanced interactive prototypes quickly and without any knowledge of front-end coding. 2) It's an all-in-one package, and the latest release (Axure RP 8) also includes graphic vectorial tools. 

Building static wireframes is very straightforward, adding interactivity on top of that is relatively easy, and widgets can be styled so that changes can easily be applied globally. I know the tool very well – I’ve been using it extensively since the earliest releases, and I’ve been training companies on how to use it at the most advanced level. Below I discuss more in detail the pros and cons.

 

UX Map (widget library + template for Axure RP)

UX Map is an Axure widget library that helps you document user journeys using a simple visual language, and add contextual annotations that reveal on mouseover and can be toggled on and off globally. The outcome is a detailed documentation of interactions and workflows, which makes handover to devs a lot more accurate.

This short video allows you to get an idea of how the integration between Axure and UX Map works.

 

Justinmind Prototyper

Also very good, I’ve been using Axure in the last few years and I came across Justinmind only recently. I don’t have much experience building projects with this tool, but after spending enough hours playing with it and taking a close look at the functionality, I have no doubt it is a very valid piece of software. Axure and Justinmind are similar in price and features, but also complementary to some extent, so it’s difficult to say which is better, and the answer might change with time, as the two tools keep evolving in parallel. Depending on which aspects you want to consider, each one offers certain advantages over the other.

The usability of both tools is far from optimal, in terms of interaction and information architecture, with Justinmind also looking particularly ugly. Justinmind has been built with the proposition of being a well-rounded tool for UX designers, and offers possibility to add scenarios and sitemaps, but it doesn’t seem to be well considered, and it’s not very flexible; built-in solutions must be great otherwise it’s better to avoid them, with Axure at least you can use connectors when creating diagrams.

One of the features where Justinmind used to be superior to Axure was the possibility to add datasets. Even though Justinmind still excels at that, this feature is now also available in Axure, covering all the basics: sorting, filtering, editing and lists based on datasets.

Where Justinmind is really disappointing, is the lack of annotations and the sluggish events editor. See the more detailed comparison at the bottom of this article.

Indigo Studio (Infragistics)

Albeit not as interesting as the two other tools described above, this software can be a valid alternative, especially if you are working on a prototype for mobile. The interface is rather neat and easy to use: the interaction editor, the way widgets are added to the canvas, the events timeline, the map of user journeys displaying previews of the wireframes with contextual explanations. Annotations are very limited, while a killer feature is the possibility to import mockups from Balsamiq and add interactivity to them.

What doesn’t sound convincing is the price plan. One more aspect to consider is that Infragistics is such a large company, I personally expect more commitment and a better customer support from smaller organisations. I never used Indigo Studio in my projects so it’s a pure speculation.

 

Sketchflow (Expression Blend, Microsoft)

This software was marketed as a valid alternative to Axure. I am not very familiar with it, the presentation never convinced me to try it out, and from what I heard so far, it’s not as flexible and effective as Axure and Justinmind.

In addition to that, Microsoft has never been quick and efficient at making their products better by listening to the end users, so why invest on that? And silverlight based, naaaah! (note: at the time of writing this review, the link to “Learn more” leads to a page that says:“We are sorry, the page you requested cannot be found”. Does it still exist?).

 

iRise

iRise offers an enterprise platform for designers, developers and stakeholders to communicate throughout the whole product lifecycle. The suite goes beyond just prototyping. None of my clients ever used it because it’s very expensive, and I personally never found their presentation videos enticing. I’ve been told that it’s quite valid, but if you master Axure, you can do similar things, and convert your projects into repositories of design documentation, by using the tool at its full potential, with tricks and workarounds if necessary.

iRise includes a code converter but I strongly doubt that it can be of any use, when it comes to productivity. Since it’s now possible to add datasets in Axure, this is not a peculiarity of iRise any more. 

Consider this suite if you need to manage large projects in large organisations that can afford their expensive licenses.

On a final note, I am not in favour of companies that use patents to get competitors out of business; for more info: iRise sues Axure for “patent infringement”.

 

 

Tools for mockups and low-fidelity prototypes

 

Moqups

If you only need to create clickable Mockups with no interaction, I’d recommend Moqups. The interface feels smooth, slick and responsive, definitely better than Balsamiq (which I always found slow and a bit akward). It’s not possible to generate sketchy-style mockups at the time of writing, but they offer some interesting features, including the possibility of using masters (components that can be reused across the project). Price is reasonable. See a list of the new features.

 

UXpin

A product created by designers for designers, these guys started their own project and ended up creating a very, very well designed tool, probably the best interface I’ve seen so far in the whole landscape of prototyping tools. UXpin is for those who want to prototype quick and easy. Interaction is limited to the basics. It’s possible to add contextual annotations (for documentation) and comments (for feedback), co-work on the same project, create breakpoints for adaptive views. There’s templates for several deliverables, not just wireframes. It supports version control and anything you might need in a lean startup environment, and does it very well. Price is definitely affordable.

 

WireframeSketcher

A mockup tool very similar to Balsamiq as far as the features and price are concerned. Some people find the interface of WireframeSketcher better than that of Balsamiq. I’d definitely recommend to consider it as an alternative.

 

Low-fidelity vs hi-fidelity prototyping

If you are more inclined towards rapid prototyping and low-fidelity, sketchy mockups, Axure RP Pro is still better and faster than any other tool I’ve seen so far. Once you become familiar with the tool and learn all the shortcuts, Axure is in fact rather straightforward to use. I love the fact that with Axure, no matter if you want to design at hi-fidelity or low fidelity, you get the job done quickly and have a lot of control and flexibility on what you can achieve, more than with any other tool.

The market is full of rapid prototyping tools with clumsy interfaces and limited features. As a UX professional, I want to concentrate on design and be able to generate graphic solutions and HTML code quickly. As I need to iterate continuously, I want to be independent and I don’t want to invest too much time in the process of producing the front-end code and assets. I want a self-explanatory interface that allows people to experience the product, rather than a static, low-fidelity sequence of wireframes. I want a tool that allows me to reuse elements, apply changes globally, but also trash and recreate assets quickly enough.

I often hear people saying that “it’s the designer not the tool”, “use the tool appropriate for your needs”. While there can be some valid points in such arguments, I don’t see why I should, as a professional UX designer, limit myself to rapid-prototyping tools such as Balsamiq, when it takes half the time to achieve the same results in Axure. Like saying to a graphic designer that depending on the project, he should choose whether to use Photoshop or Paint.NET…

 

Advantages of working with a professional UX tool

Compared to a low-fidelity, rapid prototyping tool, a professional UX tool offers a number of advantages. Let’s see what these advantages are, if we consider Axure RP Pro:

  • It’s possible to create animations and transitions, while keeping the layout minimal (in the style, for example, of a sketchy, black and white mockup). 
  • Interfaces nowadays are all about interactivity; as a professional UX designer, do you think you’d do a good job in presenting static wireframes to your clients?
  • A low-fidelity prototype can remain low-fidelity, but at some point, you might need to turn it into a hi-fidelity prototype that looks like a real site, for example if you are planning a usability testing session. And you don’t want to start from scratch; you’d rather apply a specific look and feel to your low-fidelity prototype, and import the graphic assets, until it looks the way it is supposed to.
  • You can apply masters and reuse widgets/groups of widgets anywhere – why doing it with copy and paste?
  • The appearance and behaviour of widgets is customizable. Want a large text box with transparent background and the font colour that changes on click? You can do it and save it in a widget library that you can reuse later.
  • Styles can be applied to widgets libraries so you can reuse them on several different projects, and apply specific look and feel to each project. Want to change the appearance of primary buttons? You can do it once and apply all changes to the whole prototype in a second.
  • You can import pages, widgets, variables, styles and masters from other projects and reuse them.You can choose among plenty of shared libraries on the internet, if you need specific styles (e.g. iOS environment).
  • Graphic assets can be imported easily, they can be made lightweight and cropped.
  • What is more exciting than going beyond the limits of a simple prototype, and creating a carefully annotated, interactive documentation that developers will love (and say goodbye to old school functional specs)?
  • Your prototype can be shared online, and you can keep it constantly updated.
  • Colleagues can get involved on your project and work on the same file.

On top of all this, the one thing that I value the most about Axure RP is the customer support: I've always received prompt replies to any question, and with abundance of details. Over the years, they've also established a very tight feedback loop with their users via the forum, so the product keeps evolving as a collective endeavour. When new ideas are thrown into the requested features, they often get implemented.

 

Code is not reusable: isn’t HTML coding better?

The code generated by prototyping tools is normally not ready for production nor reusable in any way. For this reason, many people recommend that instead of using a prototyping tool, one should write HTML code directly, which can be a lot quicker if you use a front-end framework such as Bootstrap in combination with JQuery. That’s a very good point, and there’s no doubt that being a designer-coder can be a great advantage, but unless you are a professional front-end developer with several years of experience, you are not going to produce code that is good enough to be handed over. Most developers would rather start from scratch than reuse your code. Still, that would be very time consuming, and the whole point of prototyping should be to do things quickly and iterate frequently. Prototyping tools are quick to use and technology-agnostic, so the designer does not have to worry about the final implementation, and can focus on design, no matter if the final product is going to be software, a web app, or a native mobile app.

Nevertheless, for web-related projects, I do think that it would be great if one could in some way integrate JQuery components into the prototyping workflow. There’s plenty of JQuery-based widgets out there that can greatly improve the user experience and as a single UX professional, you might not get there alone in just a few hours. Unfortunately, I have no solution to that, other than a transition from a reasonably hi-fidelity and fully annotated prototype to the real front-end.

The ability to produce graphic assets quickly is another good reason to be in favour of prototyping tools like Axure or Justinmind. 

Another important point about prototyping software is that you can easily include comprehensive interactive documentation, all in one place (the design deliverable itself). A project managed in Axure RP Pro can easily evolve into a depository of design documentation where stakeholders can find all the rationales, wireframes, flows they need, in a single interface.

Finally, a note on responsive design: Axure RP Pro 7 supports adaptive views, and for the sake of prototyping, what they offer might be fair enough. Nevertheless, fluid layout poses a problem with wider screens, because more characters end up being displayed per line. We know from research in web typography that lines are easier to read when the range of characters varies approximately between 45 and 75 characters. There is no doubt that writing code by hand and using tools such as FlowType.js (a JQuery plugin to make font-size and line-height adapt based on element width) is a better solution.

There’s tools out there for those who want to write prototypes in HTML5, CSS and Javascript, but are not concerned about code-reuse, and would rather like to prototype quickly. One that I found quite interesting is Jetstrap, an interface building tool for Twitter Bootstrap.

Recommended reads on this topic:

Yes, Ditch Traditional Wireframes, But Not for Code

Do companies need designers who can code?

Creative responsive prototypes with adaptive view in Axure 7 (comments section)

 

 

And what about paper prototyping?

The reasons why so many designers still opt for paper prototyping nowadays is hard for me to understand. Firstly because drawing widgets in Axure with the sketchy style activated, without paying too much attention to the alignment and appearance, is quicker than drawing by hand. Second, I can reuse this material later, to document user journeys or high-level rationales. I only use paper for very high level concepts, and the more I design, the less I paper prototype.

Different would be if I could sketch on paper and then reuse my sketches to create interactive UX documentation. I considered using tools such as Evernote Penultimate to sketch on iPad, but I didn’t try it yet and I still have doubts on whether there would be a value add in doing that. I found a very interesting project called AppSeed, that has just been founded on Kickstarter. It allows to turn sketches into functional prototypes, and I am looking forward to seeing it in action.

 

Conclusions

Professional UX tools such as Axure RP Pro or Justinmind Prototyper require some time to master, but it definitely pays off. I am convinced that every UX professional should consider mastering a tool like these. Add the UX Map toolkit to your Axure project in order to make the documentation as accurate as possible, and bring it up in context. Adding annotations to an interactive prototype allows the designer to avoid gaps that can be easily filled with assumptions.

In regards to the complexity of prototypes, the biggest pitfall is to end up spending plenty of time on advanced features and workarounds. While this can be good in terms of end results, it’s not worth when it's time consuming and difficult to maintain. The whole purpose of prototyping is to iterate quickly and create design solutions that are contextual and self-explanatory, without focusing too much on the tool, and without being restrained by that.

Finally, when setting up the design process, make sure that graphic designers and developers are involved at all phases, and can contribute with their inputs. Share ideas. Try to be a designer-coder, and even if you are not very skilled at programming, keep an eye on reusable UI libraries, even if you can’t incorporate them into your prototype. Think big and don’t work with a limited set of tools; you can benefit from the amazing work of other people. Don’t always do everything by yourself, unless you can make it better.

 

Follow Humane Interface:

Twitter

Facebook

 

 

List of prototyping and diagramming tools that have been assessed

Antetype, AppCooker, Appinventor, App Mockup Tools, AppSeed, AppSketcher, Axure RP Pro, Balsamiq mockups, Blueprint, Concept.ly, Creately, Dapp, Denim, DesignerVista Mockup Tool, Dia, Draw.io, Edge Animate (Adobe), Excel, Expression Blend (Microsoft), Fireworks, FlairBuider, Flash, Flash catalyst (Adobe), FlashLite (Adoobe), FluidIA, ForeUI, Framebox, Freemind, Gliffy, GUI Design Studio, GUI Machine, Hotgloo, Ikivo animator, Illustrator, iMockup, InDesign, Indigo Studio, InsitUI, Interface, InVision, iPhone mockup, iPlotz, iRise, IxEdit, JBart, Jetstrap, JotForm, Jumpchart, Justinmind Prototyper Pro, Keynotopia, Lucidchart, Lumzy, MobiOne, Mockflow, Mockingbird, MockupScreens, MockupTiger, Moqups, Muse (Adobe), Napkee, Napkinlaf, Notism, Omnigraffle, Pencil Project, Penultimate, PhoneGap, Photoshop, Pidoco, Powermockup, Power Point, Proto (Adobe), Proto.io, Protoshare, Prototypes, Realizer, Sencha, Serena Prototype Composer, Simulify, Sketchflow (Microsoft), SmartDraw, Stencilsapp, Storyboard designer, Storyboard Suite, Swipr (Visio), Titanium mobile, Touch Apps (Adobe), UXpin, UXtoolbox, Visio, Webseam, WireframeSketcher.

 

Justinmind Prototyper Pro 5.5 vs Axure RP Pro 7

Please note that as I’ve been using Axure a lot more than Justinmind, I might have missed some of the features of this last.

Where Justinmind is better than Axure:

  • Navigation (page selection on single click);
  • A different way to manage dynamic panels (no need to click to enter panel state, they can be edited directly from the main canvas);
  • Add widgets by defining a target area;shortcuts to go back to previous screens;
  • Supports orientation change on mobile prototypes;supports multiple gestures (e.g. pinch);
  • Embedded device simulators;advanced global search;
  • Sync with image editors such as Photoshop;links between screens can include animations (great for mobile);
  • Embedded date picker;
  • Easier to create custom widgets;
  • A bit more interactions;
  • Datagrids are quite impressive: can import from existing databases, have more formatting options, can be used for login validation, can include check boxes, can pull values from a datagrid to the other using variables;
  • Integrated with web-based usability testing tools;
  • Better management of feedback from stakeholders;
  • More flexible pricing plan (annual, month-to-month or perpetual, and a completely free basic version).

Where Axure is better than Justinmind:

  • Annotations are more accurate and can be included in the HTML output;
  • Styles are efficient and easy to apply;
  • Much easier to create a sequence of actions;
  • Can design in sketchy mode;
  • Docking panels is easier;
  • Easier to bring masters to front;
  • Selected styles and selection groups to create tabbed interfaces, and more;
  • On Scroll event;
  • Widget manager works and looks than the outline in Justinmind (even though it was better in Axure 6.4 than in Axure 7).

Where Justinmind just doesn't shine:

  • The events editor (the most important part of the software!) shows a preview, which is great, but surprisingly, creating a sequence of actions (so easy in Axure) is very unpractical and time consuming;
  • Generated HTML are not annotated, or if they are, in a very limited way. They seem to have invested a lot more on the generation of old-fashioned word documents, when the whole point of interactive tools should be to generate annotated prototypes.