Running with Code Like with scissors, only more dangerous


A Review of Balsamiq Mockups

Posted by Rob Paveza

Balsamiq was kind enough to provide me with a free license for Mockups a while back on the condition that I reviewed it. I'm embarrassed to say it is WAY longer than I would have expected if I had been the one providing the license. That said, I definitely still owe them the review, so I think I'd better get on it! (I had originally intended to do a videocast of using Mockups but I'm not particularly good at that sort of thing).

My daily job responsibilities have never been 100% on wireframing or feature design. Up until I was introduced to Mockups, I had tried out Axure RP Pro (I think around version 5), and during my time at Terralever, we used Omnigraffle extensively. I first was introduced to Mockups when we were partnering with MySpace on If I Can Dream. I was impressed initially by the extremely rapid prototyping that we were able to do as a collaborative team. I had spent probably about 30 hours doing the initial Facebook-based proposal, which was, in fairness, far more extensive than the MySpace integration ended up being (sorry JT). That said, we were able to put Mockups up on the projector and it was really easy to make some interesting UI components very quickly.

Since then, I've used Mockups at Terralever as well as with my own consulting business. Generally, I've found that Mockups is ideal when I'm looking for:

  • Very rapid prototyping, to help conceptualize something that I'm actively coding and just need to give myself a fixed visual.
  • Prototypes that I'm going to deliver in PDF format, because of the automatic internal linking it provides (more later).
  • Any kind of prototypes that are going to be "internal only." If I need to perform a "real" usability consultation, I prefer Omnigraffle; I think that what I can find in Omnigraffle generally looks a little more polished.

The Prototyping Experience

Absolutely exceptional. To be honest, I think it's the best aspect of Mockups in terms of its speed advantage. If the components are there in the library, it's incredibly fast to go from nothing to something good. Let's take a simple example of a common navigation element: the tabs list. Drag-and-drop from the library onto a fresh canvas, and this is what we're presented with:

You can see that there are four items in a comma-delimited list. What could be more intuitive than that? Well, I'll type some comma-separated items in and then hit enter:

Okay, that's pretty good; but I think I should be able to have the Mockups tab selected. Lo and behold, the very simple property editor window saves the day:

You can see in this image that Mockups is selected (and it is highlighted in the "Selected" field of the property editor as well). But what's also very neat about this control (and other similar ones) is the "Links" property set. See how there's a field for each one of the tabs that I created? Every one of them can link to another Mockup in the same folder. When I choose to export them to PDF, those links will be live, and I'll be able to navigate between mockups by clicking on the linking element. In my opinion, it's one of the coolest interactive features, and it's readily surfaced. (I suspect that there may be similar features in Omnigraffle but I've never used them if they do exist).

Also very cool for preserving your "sketch" feel is the ability to "Sketchify" (okay, that term isn't in the UI, but it fits) any bitmapped image you drop into the app. It's actually very good and accurate. Take a look at this (original images courtesy of Amazon and Google Shopping).:

This is tremendous for those of us who want to use images to get the point across but are terrible at using Photoshop for anything other than taking someone else's image and using the "Slice" tool.

I've found the locking and ordering mechanism to be very intuitive. Mockups is also very good about letting you select the element you want with the right-click menu, which lets you select down the visual hierarchy even if the element you're trying to get (for instance, a Web Browser surface) is occluded by something else.

The Library

The UI library is adequate. There have been times where I've longed for the ability to add a control to it, which invariably leads me to creating a "Library" mockup that contains my custom "controls." The drawback to this model is that you don't get the very nice programmed editing capabilities. For example, suppose I wanted to wireframe the feature that Facebook uses when you've auto-completed a friend (you know, the highlighted background with an X to the right of the text). I can make something that looks like it. However, I don't get the great features of the intrinsic controls: I can't make only the text editable, and I can't make the X hotlink to another wireframe. There may be a way to develop these kinds of extensions, but I haven't found it. The lack of extensibility in this sense is a detractor compared to Omnigraffle (compare Graffletopia), but at the same time, it's a good challenge to be able to do more with less. (I love Graffletopia's diversity in components, but it can also give you a library that is much, much too large).

Still, I think that, while there have been times that I've really wished for some specific controls, it's generally given me what I've needed. And when it didn't have quite what I needed, I was able to fake it.

That said, there is one thing that stands above the others: the Text Paragraph control:

You can see inline the italics, hyperlink, and bold format specifiers that can automatically be applied. I've found this enormously useful and I think the inline links are particularly handy (it's not something you see everywhere). But without a doubt, the best part is that you can get them while you're typing: no need to stop and use the mouse to select a text range just to get a special format like that.

How it stacks up

I realize that as someone who almost exclusively develops on the Microsoft stack, I should probably at least occasionally wireframe in Expression Blend's Sketchflow feature. I'm mildly ashamed to admit that I've never tried it; I think I'm afraid that if I start working in Sketchflow I'll get the urge to do some real programming, or I'll spend too much time on an animation and not get the actual prototyping done. So with that in mind, I'm going to compare it to Axure and Omnigraffle, because those are the other two tools I've used.

Axure: Mockups, even the first time I saw it, was miles ahead of Axure in appearance. Noted that it's probably 2 years ago that I tried Axure, but it sometimes felt like I was literally working with the .NET Windows Forms or Web Forms designer controls (the radio buttons stand out in my mind as looking like they were pure Windows-based controls). I have seen the end-result of some Axure work recently and was a bit impressed (I think they've added some sketchlike appearance support in a recent version). That said, I get the general impression that Axure's prototypes are meant to look a bit more like the real thing than wireframes that you might generate using Mockups or Omnigraffle.

Omnigraffle: Like I noted above, I tend to like Omnigraffle when I'm consulting for a client. Mockups produces visuals that are very sketch-like in their appearance, and while this is generally a Good Thing, sometimes that rounded edge or drop-shadow that you can include in Omnigraffle makes the product really pop. Still, Omnigraffle is only available on Mac and iPad, and while I have an iMac, I tend to be developing in Windows. The reboot required to go into OS X makes it cost-prohibitive to use when I'm going to be the consumer of the wireframes. Mockups, being an Adobe AIR application, can run on either platform. As a result, when I need to give myself some visual guidance, I tend to do my rapid prototyping in Mockups.

One note: Since installing Mockups on my new laptop, I was surprised to see that Comic Sans is no longer the default font. In some ways this saddens me. I realize that most customers were probably unhappy with that as the default because it made them hesitant to show their mockups to customers. I thought that it was a bit charming in its own way - another not-so-subtle reminder to "not take this visual too seriously". Oh well :)

Thanks, Balsamiq, for the Mockups license! Keep the goodness coming!