As information architecture and user experience design become a more standard part of major web and interactive projects, there are a few software tools emerging as the gold standard. A good prototyping tool can dramatically speed up the process and boost the quality and fidelity of the wireframe/prototype itself. But a bad tool can slow you down and create frustration for you and the client. While you could create wireframes with a pencil and paper, choosing the right tool can dramatically enhance the final product, or burden your project with tedious repetitive edits or unsatisfactory prototypes at the end of all of your hard work.
As I see it, there are five major players in the mix at present: MS Visio, Omnigraffle, Balsamiq, Axure RP and JustinMind. Some are adaptations of existing tools, others entirely created for the IA/UX professional. I will run through my Top Five below to give you a leg up on choosing the right tool for your project. These are presented in no particular order, but I will pick my favourite and tell you why.
1. Microsoft Visio
Those of you who come from a systems, technical or business background will likely be familiar with Visio as a process or system drawing tool. With all of those lovely libraries of little computer icons and org chart boxes with magnetic lines attached, Visio is an old favourite. And of course, the fine folks at Microsfot have provided a library of UI interface icons and simple shapes for UX design so that now Visio can do the sitemap and wireframe too! But is that a good thing? No.
For one thing, if you come from a design background, Visio’s less than attractive interface and frankly god-awful icons and shapes are shocking at first site. Sure you can build your own stencils or rework some of the existing ones to make them less hard on the eye – but that gets old in a hurry. You end up spending more time restyling than you would building the stencils from scratch. Also, Visio lacks a method to easily manage a set of pages (which is what you will need if designing an entire site) and the process of setting up interactive prototypes in Visio is tedious and very limited – more like creating animations in powerpoint (ick!) than actual prototyping.
More important in my opinion, Visio is just too much gun for the hunt. I’m sure it is an awesome tool for database visualization and network diagrams, not to mention corporate org charts, but the big V is cumbersome and overburdened with functionality that the IA/UX user would never need or use.
Visio gets a C from me. It can actually create the documents, and – if you want to put yourself through the hassle – maybe even some kind of prototype, but the process is painful and the learning curve fairly steep. Also, it ain’t cheap: $750 US for Professional and almost $1400 for Premium – PC only.
I initailly started using Omnigraffle as a Mac replacement for Visio when I was given a MacBook Pro as a work computer (joy!). I soon found out that Omnigraffle is both much less than Visio and much, much more. I quickly fell in love with Omnigraffle’s elegant interface and smooth drawing tools, and I was up and running making wireframes and sitemaps in no time. Omnigraffle is at least as well equipped as Visio for the IA/UX task – perhaps better. There is a burgeoning community of users creating top class libraries of stencils for Omnigraffle, available for free for the most part, and the basic drawing and layout interface of Omni is so much better. One thing about Omnigraffle is pure genius: the interface is much like the old MacDraw vector interface, and when you drag an element into place, little blue lines appear that help you to align the current shape with existing elements on the page already. That may not sound like much, but if you try it with “Snap to Grid” on, you will see what I mean. Every element effortlessly snaps in line with it’s fellows without the need for guides or align commands. Beautiful!
Also, Omnigraffle is much simpler than Visio, and much more attractive. Any designer will surely find it welcoming, and fun. I’ve never asked a system or business person what they think of Omnigraffle, because I’ve never met a business or systems person who uses a Mac (at least, not for drawing). I can honestly say I love this little tool – can anyone say that about Visio? Also, at $399 Omnigraffle is a very tempting choice. Still it only gets a B from me. Why? This is a big one: no PC version! I love Omnigraffle, but not enough to switch back to Mac.
PS – the iPad app version of Omnigraffle is a valiant effort, but it really doesn’t work as a tool. The “finger/click asymmetry” that Jacob Nielsen spoke of is particularly egregious here. Everything is too small to touch or move! Endless zooming in and out soon convinces you to go back to your laptop.
While Balsamiq may at first glance seem to be the answer to all of your dreams: almost flat learning curve, low cost, pre-built widgets, cross platform compatibility. What more could you want? Well, lots, as it turns out.
While Balsamiq DOES have a very quick start even for people not familiar with drawing or WF tools, and their library of widgets is pretty neat-o, the software itself is badly limited. For one thing, you can’t make your own widgets, or even modify the existing library in any way. The software comes with a pretty extensive library of widgets for designing web pages, iphone apps, application flows, etc., and it IS pretty amazing how you can put together a wide variety of web sites from just this simple library of interface elements. But it won’t take long before you need something that isn’t provided or actually create something new yourself, and that’s when Balsamiq will let you down.
But it doesn’t end there. Balsamiq does not support templates, masters or multiple page documents in any way, and the interface becomes very slow and selection very buggy as the documents become more complex. So, if you create a set of wireframes for a site (as you will need to do for any project large enough to require an IA), you will need to edit all pages every time you make a change to a global element like the header, etc., and you’ll have to suffer through the buggy interface while you do it. This causes delays in revisions that are difficult to explain to clients, and inevitably mistakes will crop up when you try to edit ten to fifteen pages at once.
Lastly, and this is a big one: the default look of Balsamiq is a corny “sketch” skin that looks like the proverbial napkin doodle gone wild. This is cute at first (for some) but I quickly got tired of it and found the final product much less satisfying or convincing. Sort of like drawing the blueprints for your house without a ruler – might be right(maybe) but it sure ain’t pretty. And this can’t be changed either! I found myself feeling a little guilty about charging the client for such a sloppy looking final product.
So, Balsamiq gets a C. Would have been a D if it wasn’t for that sweet price. I would never use this software for more than a couple of screens.
4. Axure RP
Since it was made specifically for the IA/UX professional with wireframes and prototypes completely front of mind, Axure takes a big leap out in front of the previous contenders. It has a full library of widgets and interface elements out of the box, and you can create your own. You can even import stencils through XML. What’s more, Axure allows for masters and templates in a very robust way. It also builds out the site structure as you create each page, allowing for an automatically generated sitemap and structure when it comes time to prototype. And speaking of that, the prototyping is pretty robust, as well. You can program interactions at a pretty granular level and build them up to do some pretty amazing flows and interactions. The software automatically converts this into HTML for you with one click so you can display your beautiful work to colleagues and clients.
When it comes to specifications, Axure wins again. You can acutally attach annotations to each and every element (I don’t recommend you do this, by the way), and the software will generate a word document with screencaps, numbered annotations and even allow you to format the Word doc to a certain degree. Magic!
Even with a fairly high license fee ( about $500 US) Axure gets an enthusiastic A, with one caveat. I have used this software on PC and Mac, and it is much prettier on the Mac. I have no idea how this happened, but I suspect it is because Axure knows the Mac audience. If you presented a Mac user with the PC interface, they would be repelled. Fortunately, those in the PC world are used to ugly software…
My favourite so far, JustinMind is a elegant answer to Axure. It has all of the Axure features mentioned above, plus the prototyping process is much more integrated and smooth. Furthermore they managed to make it pretty for the PC – imagine that!
But JustinMind has a couple of little add-ons that are indeed pretty cool. For instance, they integrate features to support user testing and eye-tracking, etc. What a brilliant idea! What’s more, the software will automatically generate process flow charts for complex interactions and processes. This is the whole process is one package. The price is right too – just in between Omnigraffle and Axure at about $400 US.
But wait, there’s more: for an additional charge, JustinMind provides a service called Usernote that allows you to publish your wireframes online for client viewing, and you can even annotate/collaborate on the published wireframes online with clients or colleagues. That’s genius!
JustinMind gets a A++. I have yet to find any fault – perhaps I will write a rebuttal after a bit more experience (admittedly this is the newest of the applications reviewed here), but this one looks like a straight winner, killer app.
Thanks Andrew for such a great top 5 list. On behalf of Justinmind I just want to add that anyone who would like to receive a free copy of the wireframing tool Justinmind Prototyper can apply for one to jim.support at justinmind dot com . We will give it to those who make a honest review of our products.
Have you guys seen Moqups?
It’s a nifty HTML5/SVG App used to create wireframes/mockups! Check it out https://moqups.com