Wireframing - A review of Axure, Justinmind, and other UX tools

Written by Luca Benazzi
Last update: January 2014

I wrote this review in response to the many interesting (and conflicting) opinions on this Quora page: Is Axure RP the best tool for UX out there?
I made an attempt to cover all the relevant points on this topic, and make the most thorough review that I could. This is based on the material I collected in my last ten years as a UX designer/information architect. It’s not easy to keep track of the myriad of tools available on the market (about 90 right now, considering mainly desktop), but I believe that this is a rather comprehensive overview.

Summary of recommendations:

• With interfaces becoming more and more dynamic, interactive prototypes are the best way to provide an in-depth, contextual and responsive documentation. If you are a professional designer, I’d recommend using either Axure RP Pro or Justinmind Prototyper for both static, low-fidelity prototypes and more sophisticated, interactive ones. Both offer rather affordable licenses.
  If you are not a professional designer and you are looking for a tool that is cheap and allows to create static wireframes once in a while, I’d recommend Moqups  as a quick prototyping tool. I prefer it over Balsamiq. WireframeSketcher is also an interesting alternative.
• If you are looking for something not as complex as Axure/Justinmind but more robust than Moqups/Balsamiq, you could also consider Infragistics’ Indigo Studio (which can import static mockups from Balsamiq and make them interactive) and Protoshare. Both of them, and in particular Indigo Studio, offer price plans that are not so convenient, and considering the limited set of functionality, I wouldn’t recommend them as a first choice. A third option is UXpin, which boasts the most elegant, clean and user-friendly interface I’ve seen so far, in the whole landscape of the UX tools available today.
• For mobile prototyping, you can use both Axure and Justinmind if you want full control, the second seems to be a better choice at the time of writing (even though I did not test it directly). 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.
• If your client is an organization that can afford a very expensive license, you can also consider iRise, a very comprehensive design platform for enterprises.
• If you need to design static diagrams to represent user journeys, you might consider tools such as Draw.io or LucidChart, but Axure still provides decent diagramming tools that can reference to portions of your prototype. Justinmind seems a bit limited. Microsoft Visio (now part of Office 365 as a web app, and therefore also available on a Mac) is still great if you need maximum flexibility and want to draw very elegant flowcharts.
• Keep an eye on JQuery UI components, even if you are not going to incorporate javascript libraries into your prototype. If you like to code directly, but you don’t necessarily need to reuse your code, you can also consider using CSS frameworks in combination with WYSIWYG editors such as Jetstrap.
• Use paper to play with origami rather than prototyping.

Below is a more detailed explanation of the points I made, and some additional considerations.

The landscape of prototyping tools

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

Axure RP Pro

Despite the fact that the amount of prototyping tools is overwhelming, only few of them have advanced features, and among these, Axure is my first choice. Axure is an extremely efficient UX tool and allows designers to create very advanced interactive prototypes quickly and without any knowledge of front-end coding. I know the tool very well – I’ve been using it extensively since the earliest releases, and I’ve been training companies on advanced prototyping using Axure. Below I discuss more in detail the pros and cons.

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 time 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 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 thought 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 and play with them.
One of the features where Justinmind used to be superior to Axure was the possibility to add datasets. Even though Justinmind still excels on that, this feature is now also available in Axure – and right now it covers 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.
At the bottom of this post there’s a more detailed comparison (Justinmind vs Axure).

Indigo Studio (Infragistics)

Albeit not as specially designed as the two other tools described above, this software can be an interesting alternative, especially if you are working on a prototype for mobile.
There’s a number of interface solutions that make the interface clean and easy to use, and in particular: 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 that convincing about Indigo Studio 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 organizations. I never used Indigo Studio in my projects so it’s a pure speculation.

Sketchflow (Expression Blend, Microsoft)

This software was presented 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! (by the way, 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, but none of my clients ever used it because it’s very expensive, and I myself never found their presentation videos very exciting. 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, and with a bit more tricks and workarounds.
iRise includes a code converter but I strongly doubt that it can be of any use, production wise. Since it’s now possible to add datasets in Axure, this is no more a peculiarity of iRise. Consider this suite if you need to manage large projects in large organisations that can afford their expensive licenses.
On a final note, I never liked companies that use patents to get competitors out of business; for more info: iRise sues Axure for “patent infringement”.

A closer look into Axure

What you can do in Axure: examples

Here are some examples of pages created in Axure RP Pro:

• Drag-zoom to see details (created by Zinkzone)
• Docked header (created by Zinkzone)
• Parallax scrolling (created by Zinkzone)
• OnSwipe/Flick carousel (created by Zinkzone)
• Moving dynamic panels (can’t remember who created it)
• Incremental search (created by Shiraluk)
• Resizable window (created by Melibrion)
• OnScrollAnimations (let page content load first, can be slow) (created by Zinkzone)
• Reorder list, draggable (created by Gregor)
• Adding and deleting items (created by Jimbunzol)
• Axure in Action (a demo prototype that I created myself, back in 2009. It showcases what can be done in Axure – updated to Axure RP 6 only)

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 in the output, features and price, 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 fast prototyping and low-fidelity, sketchy mockups, Axure RP Pro is still better and faster than any other tool I’ve seen so far. Axure is in fact rather straightforward to use, once you become familiar with the tool and learn all the shortcuts. I love the fact that with Axure, no matter if you want to design in 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 that I tested so far.
The market is full of quick 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 material 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 is the customer support: the team at Axure has always been excellent at replying promptly to any question, and with great detail. They also created 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.

Issues I had while working with Axure

Never been totally satisfied with the interface

This is not a problem related to Axure specifically, but having spent so much time with this tool, I am convinced that there’s a number of interface issues that have been there for quite a long time. While the Axure team has always been great at addressing requests for new features, they did not always manage to make things intuitive and easy to use; there’s been many UX improvements, but there’s still several major usability problems, beginning with the way the navigation and page outline work.

Annotations are not so good

Annotations in Axure are either on a page level or on a widget level. I see this as a big limitation, as most of the time you would rather want to show annotations related to groups of widgets, instead, and make them easier to find and to open on mouseover. This can be done with workarounds but it ends up being quite time consuming. Good new is that it’s a lot easier in Axure 7. Too bad, though, that the team at Axure has spent time developing a tool to export old-style functional specs as Word documents, rather than thinking of better ways to annotate HTML prototypes. With interactive documentation replacing static wireframes, I’ve always found the Word-based specs old-fashioned and rather useless, while the existing HTML annotations are difficult to find, difficult to comment on, and difficult to open.

Files can become pretty complex to work on

When creating rich interactions in Axure, there’s a lot you can achieve, but you get to a point when the files and the exported HTML start to become heavy and slow. Rich interactions can require a large amount of dynamic panels and masters; because the navigation structure in Axure is not optimal, the level of complexity to deal with can become overwhelming, and making few changes can take hours of work. And when you are working hard, it’s easy to get trapped in the attempt to achieve more, in order to demonstrate to yourself that you CAN do that. The paradigm based on dynamic panels has itself some obvious limitations, for example when dealing with areas that expand/collapse vertically, Axure can become a rather unpractical, time-consuming tool to use.

It’s not a real design suite, and diagramming tools are limited

Axure is a pure prototyping tool and even though its diagramming capabilities have been gradually improved, it never included tools to document journeys/process flows, and integrate prototypes with other UX-related documents has never been a priority. Again, there’s plenty of creative solutions that you can come up with, but it would be a lot nicer if Axure was more than just a prototyping tool.
Regarding diagramming, I used to work on Visio when I needed to create sitemaps, user journeys and process flows, and it’s still ways better than Axure at doing that. I can add connection points, curve connectors the way I want, and more. I tested several flow-charting tools and none of them did it so well as Visio, not even Omnigraffle. I recently found out a pretty good tool though, called draw.io. But if you want flow charts and diagrams to be integrated into your prototype, Axure is still a valid solution, just a bit frustrating to use, and not so elegant.

Designing for mobile: not so straightforward

Axure has never been fully optimised to design mobile prototypes. In the last couple of years, the team has been adding plenty of features that make mobile prototyping a lot more effective, and I am very satisfied with the results that I achieved. The drawback is that it’s not so easy and quick, and you need to have an in-depth knowledge of the tool in order to create prototypes that look like native apps. In particular, a mastery of dynamic panels, and anything related to them, is required. For people who want to learn more about this, I create a post containing the most important points: Advanced mobile prototyping in Axure RP Pro: tips and examples.

Commenting/feedback system is very limited

Prototypes can be shared online and stakeholders can leave comments. This is great, except the fact that the comments are not contextual and they are hidden behind a tab. As an alternative, I considered using tools such as Protonotes or Notable, but still, it’s not very handy…

Official site and documentation could be improved

I always found that the official Axure site did not do such a good job at promoting all the great features that the software had to offer. Not surprisingly, plenty of IT people are more familiar with Balsamiq: clear proposition, clear tutorials, not too many options, just one drawing style… This is a shame, since the software can do a lot more than what has always been advertised for. And even though the basic documentation has been improved substantially, most of the more advanced know-how is scattered into forum threads that are difficult to keep track of, and are not re-organised, summarised or maintained in any way over time, with plenty of material becoming obsolete or difficult to find.
Axure official site
Axure official forum

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

The code generated by prototyping tools is normally junk-code, and therefore far from being production ready, and not even re-usable. 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 is better than being just a designer, but unless you are a professional front-end developer with several years of experience, you will still produce code that is just not good enough to be handed over. Most developers would rather start from scratch than re-use 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 prototype, fully annotated, to the real front-end.
The control of graphic assets is another good reason to be in favour of prototyping tools like Axure or Justinmind. The great advantage here is that you can control the appearance and behaviour in a much quicker way than by writing lines of CSS code or deal with professional graphic design tools.
Another important point about prototyping software is that you can easily include interactive documentation that would be not so easy to create by hand. 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, albeit limited to a few changes in the layout. Nevertheless, fluid layout poses a problem when the wider the viewport, the more characters are displayed per line, as 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. Even if not very relevant when it comes to a simple prototype, 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 by far a more elegant 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?

Are we kidding?! Even when I sketch, I like to reuse my ideas! I like to drag widgets in Axure with the sketchy style activated, without paying too much attention to the alignment and appearance, it’s quicker than drawing by hand and I can use 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. Building an interactive prototype is important to avoid big gaps between the design concepts and the final product, a gap that can otherwise be filled with assumptions.
The biggest pitfall when creating interactive prototypes is to end up spending too much time to implement advanced features that require workarounds. While this can be good for the end results, it’s not worth when it becomes complex, time consuming and difficult to maintain. The whole purpose of prototyping is to have an effective tool 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.
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 JQuery components, even if you can’t incorporate them into your prototype. Think big and don’t work with a limited set of tools, reuse what other people have been doing so well, don’t do it yourself alone, unless you can make it better.

Follow Humane Interface:
Twitter
RSS feeds

List of prototyping and diagramming tools available

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;
• onScroll 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 is really bad:

• 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.

Source: http://www.humaneinterface.net/best-prototyping-tools/