More web wireframing: Balsamiq Mockups

Following up on a recent post comparing online wireframing applications, here's a look at another application. I began with particular criteria for wireframing tools:

• Share files and collaborate with remote coworkers
  
• Work from home on my Mac, and at the office on my PC
  
• Use web apps to build web apps! 

As I looked at different apps, I also found a few more features I really liked:

• Keyboard shortcuts
• Great customer care
• A cool looking interface

Keying on layout

Balsamiq Mockups, an Adobe AIR application (free to try, $79 for your own), presents shelves of widgets in a distinctive pencil-sketch style.  There's a wide array of widgets to size and add text to, but no way to draw your own shapes.  Also, shapes cannot be broken apart.

Laying them out works well and is pleasant to mess around with. The components snap into alignment with each other in a way that Microsoft Visio should imitate -- although it's not quite best of breed. Snap doesn't center to other objects, so in my mind it's not as good as the smart layout implementation in Apple's Keynote presentation software.

Keyboard shortcuts don't appear to work on my Mac.  The help says Command instead of Ctrl should work on Macs, but in Safari, the browser shortcuts rule. A few minutes of using the pulldown menus to copy and paste had me gritting my teeth in frustration. There's a one-click Duplicate icon, but still, keyboard shortcuts are the fastest solution for a productivity tool. I hope Balsamiq fixes them.

Collaborating with the tool is not as straightforward as it might be.  You can import / export file attachments and email them among teammates, and Mockups supports plugins to other collaboration systems. However, I'd prefer a simple way to give other accounts access to my work for editing directly.

More fun without the Comic

Balsamiq's getsatisfaction presence is a big plus. Getsatisfaction.com is a terrific way for companies that really care about customers to both do good and look good.  It's more usable and scannable than a message board interface, and more trustworthy that testimonial stories.  A couple minutes of browsing shows how much the company works to add features and please users.

For example, one of the tool's shortcomings is font support. The default Comic Sans font is tough to take seriously. Like others posting online, I found that my coworkers immediately noticed and criticized this unfortunate default type choice. The lead developer's struggles with font licensing, and his compromise solution, are clearly archived on Getsatisfaction, so even if you're not pleased with the "use system font" alternative, you can understand why the company chose that option.  It's an adequate fix for me.

Don't miss the full screen mode. It's non-interactive, so you can't edit, but it's great for presenting your work. Full-screen presentations online, without browser chrome, are cool features of the newest online platforms like AIR and Microsoft Silverlight.

Bottom line?

I like Balsamiq Mockups for its strong intangibles. Companies that care about customer support are rarer than they ought to be. However, the more I use these various online wireframing tools, the more I realize how important keyboard shortcuts are for doing real work. Balsamiq really needs to fix Mac shortcuts.

In addition, I can't get used to the pencil-sketch style of the wireframes. For me, boxes and gray lines say "wireframe," and an obtrusive computerized sketch style is unnecessary. This is just personal preference though -- I think other users will like the style.

I meant to also look at Rapidrabb.it in this post, but I had too much Mockups to talk about.  Next time!

P.S.  Sorry about the horrendous markup and formatting in this post. Typepad and I have some work to do together on my new template.