I was recently tasked with looking for a tool we could use within our company to capture user interface requirements in focus group workshop sessions. The tool needed to be capable of generating interactive multipage web application wireframes, and as our final application is hoping to embrace many Web2.0 / AJAX features as possible, the tool needed to be up to the job.

Tools like Balsamiq and Mockflow seemed to be good at doing visual mockups but lacked the interactive modelling which we required.

Two tools were discounted early:

Lumzy, a great online tool which supports working interactive simulations but it didn't handle mouseover events, doesn't produce documentation and has a fixed set of widgets. On the plus side, creating accordions and tabs is a snip.

AppSketcher, again a lovely Adobe AIR based tool which would be better billed as a good place to start building jQuery UI frontends. All the UI elements afre from the jQuery UI library and so you can easily create complex components like accordions and tabs. It even supports jQuery UI's Themeroller. We may even use this as we approach the implementation phase of our project. Once again however, AppSketcher lacks a documentation/specification generator and can't be extended with your own widgets (UI elements).

Enter the 'big guns': the established Axure RP and the relative new kid on the block, Justinmind.

The competiton was close. Very close. Both had very similar feature sets. In many respects the UI of these two tools is very similar, with the usual panes for managing pages/screens, masters, widgets and widget properties, and interactions. Axure has a more traditional UI compared with, in my opinion, the sleeker looking Justinmind. Justinmind looks like its designers have taken a long hard look at Axure RP and tried to improve on it by adding more visual indicators and more drag and drop.

What is surprising about both of these products is the complexity involved in building accordion and tab controls, compared with Lumzy and AppSketcher. These types of components are built up from a combination of labels (for the tabs) and dynamic panels (for the content) and a heap of interactions. Not the most intuitive way. Even using pre-built widgets doesn't make it much easier, especially when you want to add more tabs or accordion sections.

Both tools generate good documentation, support definition of the flow/processes of the web application, and allow you to create data driven mockups. Axure supports multideveloper teams via a Subversion style checkout feature. Both support online collaboration and comment collation. Axure has a very tempting 'Sketchiness slider' which gives your wireframes the desired hand-drawn effect.

In the end, Justinmind won our beauty contest for the following reasons:

  • Justimind has done it's best to make it features intuitive and fun (i.e drag&drop) to use. Axure RP looks slightly dated and cumbersome in places.
  • Justinminds Simulations are built instantly compared with Axure RPs slow Generate Prototype feature. This helps when learning to use the tool and making lots of mistake/iterations.
  • Justinmind's support for defining data tables and creating CRUD pages was extremely intuitive.
  • Axure RP is similarly priced to Justinmind, has a long pedrigree and a large userbase, all of which made i a very tempting proposition, but Justinminds ease of use just gave it the edge.

Anyone reading this and deciding to go with either product will not regret their choice - both are very useful and capable tools. jQuery UI fans really should consider AppSketcher