In a follow-up to 10 tools for creating wireframes and prototypes I did a quick comparison of some of the features I think are valuable in a wireframe/prototyping tool. Here a brief summary of the categories:
Master Templates: As any information architect knows, the home page is different. However most of the subpages have navigation and layout elements that are repeated. It’s nice to have a master page or template features that allows you to manage these common elements.
Multiple Themes: Whenever you test wireframes with users, a clean, professional wireframes gives the impression that the designs are final, and the users are apt to be less critical. Providing hand-drawn wireframes are less intimidating and show that it is a work in progress and users are more likely to comment on them. Some tools provided themes that made the wireframes look hand-drawn.
Basic Shapes: A good set of basic shapes and objects makes for less work and more time sweating over the details.
Custom Shapes You’ll always find something lacking in the basic set or you just prefer some objects to looks a certain way. More importantly, you may want some objects to be aggregated into usability-proven patterns that you use over and over again. Think Yahoo Design Patterns.
Annotations: As much as we wish all wireframes are self-explanatory, you’ll need to communicate the wireframes to stakeholders, developers, designer and others at some point. Being clear about how the elements are supposed to work is always better than a nasty surprise before launch.
Interactive Mockup: Testing the wireframes with users is the best way to get feedback on usability issues. Why not have interactive mockups created automatically as you create your wireframes? And if the tool generates HTML, your developers may love you more.
The list is organized in order of price. Can’t beat free:
|Pencil||Mac / Win
Works as Firefox plug-in
|Prototype Composer||Win||Free||Free||N||N||21||N||N||Y||Extensive project, process and requirements features|
|Gliffy||Online||$5/mo||Trial||N||N||35||N||N||N||Basic diagramming tool with libraries for UI, UML,
flowcharts, floor plans, networking etc.
|Wireframe Sketcher||Mac / Win
|Y||N||45||N||N||N||Requires Eclipse installation|
|Balsamiq Mockup||Mac / Win
|N||N||64||N||N||N||Easy to use;
|ForeUI||Mac / Win||$79||Trial||N||Y||27||Y||N||Y
|Nice paper rumple background|
|iPlotz||Online||$15/mo||Trial||Y||Y||57||N||Y||N||Online / desktop ver available;
Good commenting tool;
Task and team management
|ProtoShare||Online||$29/mo||Trial||Y||N||29||N||Y||Y||CSS Style editing;
Extensive interactive tools
|Lucid Spec||Win||$499||Trial||N||N||26||Y||Y||Y||3 display modes: Design, Simulate, Describe|
|Create, manage specs from annotations; Version control;
Good online widgets library
|JustinMind Prototyper||Mac / Win||$690||Trial||Y||N||39||N||Y||Y||Integrated functional scenarios and requirements tools|
|Create fully functional simulations;
Import data for simulations
You may ask which are my favorites? I think Axure Pro is the most comprehensive and UX professional-friendly, but a little pricey when you have to buy multiple licenses for it to be effective as a team collaboration tool. I didn’t like the fact that it’s Windows-only. When I was running a UX team a couple of years ago, really hated the fact that I had to decide between Visio (Win) and Omnigraffle (PC).
This is why I found myself leaning towards an online solution, iPlotz which overcomes the platform issue and also allows for online team collaboration and commenting. However iPlotz doesn’t have a strong interactive mockup features for testing with users, nor does it have the ability for custom symbols. If these additional features are planned for the future, it would definitely be at the top of my list.