If you’ve been around the UX / Interaction design industry in the last couple of years, then it’s likely you’ve at least heard about the tools-of-choice for creating wireframes.
Such applications include Axure, OmniGraffle (for Mac), Visio (for Windows), Balsamiq and Optimal Workshop’s Chalkmark, InVision app and Sketch as well as more traditional design packages like Adobe’s InDesign or Illustrator.
Traditionally, two applications, Axure and OmniGraffle, have been chosen to compare in terms of interaction design use.
So why are these tools popular with interaction designers? What are their limitations? What differentiates them from each other, and is one any better than the other?
I’ve included a breakdown of my experience of both tools that apply to common UX design needs and scenarios. If you’re after a complete list of features for both Axure and OmniGraffle, you’ll find more information at axure.com/features and omnigroup.com/omnigraffle/
The good, the bad and the fugly
Interaction Design (wireframe prototypes)
When it comes to pixel-perfect, vector-driven wireframes, you cannot go past OmniGraffle.
Images scale well. Typefaces render beautifully and the ability for granular control of shared layers (elements that you re-use across multiple pages) is rock solid.
While version 8 of Axure has introduced vector widget libraries, it’s still early days in terms of their stability and ease-of-use for resizing. Also, if you are an Axure user from past versions, then it’s likely that you’ve built up a widget library that’s become your bread and butter for rapid prototyping. These libraries will not scale as vectors and changing over to new vector-based libraries has its glitches.
But when it comes to image handling, there are occasions when you need to slice or crop an element within the wireframe’s workspace. OmniGraffle does not have a dedicated slice or crop tool, though you can change the size of the ‘image container object’. This is usually resolved by placing a white rectangle over the area you want to mask which is annoying to say the least. Recent releases of OmniGraffle state that this isue is now resolved.
On the other hand, Axure is a great wireframe prototyping tool. For anything interactive that requires emulating transition states, lots of clicking, drop-down menu simulation, dragging, fades, sliding, mega-menu hover states, etc., Axure will get you most of the way there.
OmniGraffle is also capable of primary interactions such as hyperlinks and the dynamic display of layers, but wireframe interactivity is by no means the central feature of the product. To further emphasise this difference between the two tools, Axure has a dedicated prototype generator that will output your interactive wireframes as a clickable HTML prototype.
Share.axure.com is Axure’s cloud-based collaboration offering. It’s a highly useful and efficient way to share your prototype with project team members and stakeholders. You can password-protect the prototoype as well as store a backup of the raw Axure .rp file in one location.
It was a big moment for transforming the way I worked when share.axure was first released. Being an Axure user from several versions ago, I had made the cumbersome “export Axure to local/upload all files via FTP” part of my sharing process. Share.axure.com means never having to do this again.
My recent experience with OmniGraffle’s ‘Sync’ for sharing and backing up .graffle files didn’t go so well. It was difficult to setup and then didn’t sync at all. To be fair, I’m not sure if it was my limited understanding of it or whether Sync is still in its infancy as a robust feature. Either way, a task such as sharing should be intuitive with minimal learning required to perform the default share action. Hence, Axure is my tool of choice for sharing and backing up.
* Note: While Axure generates HTML prototypes, do not assume that you can dive into that HTML with a text editor and make changes. Axure generates great prototypes but pretty bad HTML that would probably break the W3C validator tool.
Communication design and documentation
Axure’s documentation capabilities can be challenging. Axure includes a Specification document (the famous UX Spec. doc) generator, which will export all of the wireframe pages, masters and widget notes of each design element into a Microsoft Word document.
Ready-made UX spec? ….Um, not quite.
Firstly, the layout of this document is heavily dependent upon the .dot template provided by Axure, and customising this MS Word template can be terribly cumbersome. Axure-to-Word export? Word probably would not have been my first choice of export destination. Axure-to-InDesign (or even better in UX Utopia, Axure-to-OmniGraffle) makes more sense in terms of document layout and control flexibility.
Also, printing an Axure prototype has limited control. Yes, given, prototypes that are viewed in Web browsers are never going to print well, but without a sound documentation feature, printing in Axure is not a strong point. Comparing this with OmniGraffle’s multi-faceted printing options, I’ve found that the two just do not compete at all on this level. OmniGraffle is way ahead in terms of orientation, page size, margin options, and more.
Secondly, if you’re happy with using Axure’s MS Word document, it’s important to note that this is not simply a one-click UX spec. generator. Your Axure prototype must be carefully planned, with all of your pages, masters and countless design elements correctly labeled. Failing to do this produces a UX Spec. with some of the ugliest annotated wireframes you and your clients will ever witness!
“But what about in an agile world where documentation is so frowned upon?”
Yes, if you’re fortunate enough to work in an environment where your designers rub shoulders with your developers, and your product manager occupies the beanbag under the posties wall next to the Fusball table, then the Axure prototype itself is usually enough to communicate the designs accurately. If you offshore or outsource to developers outside the immediate vicinity of your design team, then prepare to spend the same amount of time on Google Hangout (or heaven forbid, the phone) as you would spend manually creating a specification document. And my other take on the whole Lean UX argument… there’s nothing lean about having 100 UX designers in your team… ahem!
When it comes to user journey or flow documentation, OmniGraffle is a breeze.
Attempting to create the most basic of user flows using Axure, as per the the example below, used to be just plain hard.
But from version 7 onwards, Axure has come ahead in leaps in bounds with its User Flow capabilities. Depending upon the reader of your spec doc or prototype and the level of detail required, the ability to make your page representations in a User Flow diagram actually click through to the wireframe is very, very good handy indeed!
First up, it’s important to mention that any UX researcher involved in usability testing must be equally skilled in testing on interactive wireframe prototypes as well as paper-based wireframes. Saying that, however, I have definitely seen a recent increase in the use of Axure-based interactive prototypes for usability testing.
As mentioned earlier, OmniGraffle does have the capability for interactivity but does not compare with the level of animated interactivity emulation that Axure provides. As an aside, I’ve seen very ordinary results when using InVision App prototypes for usability testing. In one testing engagement, the users quickly worked out that they could simply swipe to see the next page in the prototype and we never got to see if they knew how to use the designed interactions.
When it comes to Axure prototypes, it is also worth mentioning that at some stage, you will need to set the scope for just how much interactivity your wireframes will have. The amount of time and effort invested into making an Axure prototype perfectly simulate a ‘live’ product may be overkill in some testing situations. Much of what we look for in usability testing goes beyond measuring ‘clicking, dragging and sliding’ user behaviours. Comprehension, and more specifically, the cognitive experience (and ultimately, visceral), is what we look to validate, and this can be equally achieved using paper prototypes.
Using both tools
On any given project, if you are using Axure for design and validation, and then OmniGraffle for documentation, it is vital that strict project milestone ‘gates’ are put in place. My favourite expression is that once we have moved to the documentation phase, then ‘all bets are off’ for design changes, as we have usually imported the wireframes from Axure into OmniGraffle.
Entertaining design changes during the documentation phase, that require those changes to be made in Axure and then re-imported into OmniGraffle, paves a beautiful path to Chapter 11 bankruptcy!
The learning experience
Having taught interaction design for several years now, it has been my experience that visual designers who are familiar with the Adobe CS suite (generally!) find OmniGraffle less of a learning curve than Axure.
Axure, due to its prototyping capabilities, as well as its page and interaction-centric workspace, seems to be more of a wireframe development environment, almost like an IDE for wireframes.
Earlier this year, I taught an Axure intensive class that was comprised of students mostly with visual or graphic design / Adobe CS backgrounds. The biggest part of their learning was actually getting them to “unlearn” Adobe and to remove any thoughts of layers, etc. before immersing themselves into the Axure workspace. In fact, we started the class with this “clearing of the mind” and the feedback that I received from the students was quite positive. They had never thought about Axure like this before. I have since added this very simple step to all of my Axure teaching.
In contrast, I have generally found that front-end/UI developers and designers transition to Axure really well. Sketch users also seem to have this easier transition than users of other tools. They tend to grasp the concept of Axure masters quite quickly. The biggest learning curve, naturally, for them mostly centres around a gap in traditional Human-Computer Interaction (HCI) principles and foundation-level design skills.
In summary, there are definite pluses and minuses for both Axure and OmniGraffle. Primarily, OmniGraffle is a great UX documentation tool, and Axure’s strengths lie in its interactivity as a communication tool. It will be interesting to see in the future if both tools remain focused on their strengths and specialties, or if they begin to improve on their shortfalls.
Expiriti provides 1-day intensive courses for both Axure and OmniGraffle. We can also tailor our training to be delivered on-site for your design team.
To chat more about enhancing your Axure or Sketch skills, please get in touch.