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.

Comments

[Ryan Kennedy]

Thanks for the post. I prefer regular lines to pencil-style sketches too but know usability professionals who can't get enough of them.

PS the link in your first para is off.

cheers
Ryan

[Joshua Ledwell]

Thanks for the tip! The link is fixed now.

[Rob]

Sorry Joshua, still not fixed :)

The requested URL /usability_blog/2009/01/usability_blog/2008/09/so-far-wireframing-web-apps-are-disappointing.html was not found on this server.

Comic Sans was the first thing I noticed as well, heh!

[Giacomo Peldi Guilizzoni]

Hi there, thanks for the review and the constructive feedback, it's just what I need in order to make the software better!

Let me address some of your points:
- "no way to draw your own shapes": true, there's no free-form drawing tool, but you can draw an image in your favorite tool (which includes pen and paper) and bring it in, as I show here: http://www.balsamiq.com/products/mockups/help#images
- "shapes cannot be broken apart": what do you mean? Can you give me an example?
- snap on center: it's on my TODO list, I'll bump its priority up :)
- Keyboard shortcuts. Ahh, the eternal curse of Flash-based apps. The old (and unacceptable) answer from Adobe is "the browser eats those keys and doesn't pass them to any plugin". The ONLY flash app that has solved the problem well is Buzzword, and they swear that they wouldn't wish the work to make it work on their worse enemy (it's a GIANT, horribly bug-prone hack). I'm not trying to divert the blame, I knew this full well when I chose Flex/Flash as the platform to build Mockups. The lack of keyboard shortcut support is the reason I have copy/paste/delete icons everywhere in the UI, and it's a big part of the reason why I built Mockups for Desktop. In Adobe AIR, keyboard shortcuts are supported properly, and they do work in Mockups, on the mac, windows or linux. Here's a list of supported keys: http://www.balsamiq.com/products/mockups/help#shortcuts
- Collaboration: yes, I am working on a few ways to make collaboration easier in 2009. Here's a blog post about it hot off the presses: http://www.balsamiq.com/blog/?p=539
- Comic Sans. Aside from the "Use System Fonts" solution, which was really intented to support non-latin character sets, I recently added a way to choose any font on your system: http://www.balsamiq.com/products/mockups/help#air and scroll down to "The BalsamiqMockups.cfg configuration file" section. Not super-easy to set up, but if you're really allergic to Comic Sans this should ease the pain.
- Sketchy UI: it's worked really well so far (in fact, others are starting to copy it). The mockups created scream "I am just a draft, criticize at will, I won't get offended", which I think is a good goal for the app. That said, I have heard this complaint before and I am considering building a "straight blue lines" skin in the future.

Once again, thanks so much for the review and the feedback, I really appreciate it.

Peldi

[Joshua Ledwell]

Thanks for the detailed comment Peldi. I'm impressed by how hard you work to make Mockups better.

Regarding "shapes cannot be broken apart," I was using the Playback controls shape, which has three circular buttons for reverse, play, and fast forward. I wanted a layout that would space the buttons out more, and I was thinking I could "ungroup" the three buttons. It was a habit of thinking left over from Microsoft Visio.

I was able to approximate the layout I wanted using three Buttons with angled bracket labels, so it wasn't a big problem.