Software Review: Balsamiq Mockups

Writing professional software for a living is tough, especially if you write software for other businesses. Before a software developer can be paid, an end user needs a deliverable. Before anything can be delivered, the software developer has to build it. And software should never be built without a design plan or specification. Sounds easy, but getting these specifications together can be a time consuming and repetitive task even the best functional specifications are usually boring and dull. Great ideas scribbled on the back of a cigarette packet or napkin need to be formalised into screen layout mock-ups and this takes time. My usual method is a mash up of Visio for architecture, flow, entity relationship and state diagrams and using Photoshop/Paint.NET/GIMP for applying finishing touches and of course, Visual Studio 2008 for any actual forms that might need to be prototyped.

As a solution to this prototyping mock-up problem, Giacomo ‘Peldi’ Guilizzoni achieved notable success last year with his ISV’s first software product, Balsamiq Mockups which has reportedly sold 2,500 licenses by the start of this year. Impressive stuff, certainly, but was I going to like it?

I’ve been using Balsamiq Mockups now for exactly a week and to be fair as possible, I have incorporated it into my daily work routine. Over the past week I have been splitting my time between three projects; a customer-facing specification for a stock broking firm, a mock-up for some bespoke features in Gateway Solver’s upcoming PAYE module, and some miscellaneous sketch-work and brainstorming. The last seven days saw me working on average, 12 hours a day (excluding Sunday, which is family day) so I don’t have any time for messing about.

Balsamiq Mockups gives you a canvas on which to drop a wide smorgasbord of user controls. When I say, “user controls” I mean “sketched representations of what user controls look like”. At first this seems counter-intuitive; why would I want to hand one of my customers a drawing of a new software interface that looks like an eight year old scribbled it? But once you’ve gotten started with Balsamiq Mockups you’ll start to appreciate why all the circles aren’t perfectly round and the descriptive labels you can attach to the canvas are, in fact, yellow post it notes topped by a strip of red tape (note to Balsamiq: Post-it notes don’t need red tape to stick in real life!). You see, you’re not writing software, by their very nature a Mockup is a layout, a design, a thought process of how your software would look put to paper. It’s a perfect blend of a hand-drawn pencil drawing where you can drag your hand-drawn elements around after you’ve drawn them. The imperfect hand drawn controls have a soft appeal to them and infer an “unfinished” look, but yet is still consistent and professional.

Drag-and-drop your way to your very own iPhone fart app in minutes!

Suffice to say that I was extraordinarily displeased on downloading Balsamiq Mockups to see this desktop application uses Adobe Lead as the delivery system and platform for Balsamiq Mockups. Adobe Anvil might mean that you can host your application in the cloud, on various wiki’s, deploy on Mac and Windows, but it comes at a price. The first thing I noticed after installation was that Balsamiq Mockups was not just slow, it is epically slow. Dragging controls around on the canvas causes a massive spike in CPU usage. It’s not unusable, far from it, but I get the feeling that a “Mockups for Windows” or “Mockups for Java” would run much more smoothly than “Mockups on everything” sat atop the cludgy Adobe Air delivery platform. The slowness is not so pronounced on my uber-workstation but the upshot is that due to the poor performance of Adobe Air I would not recommend running Balsamiq Mockups on a laptop, especially if you’re using batteries.

Dragging a control by the edge on a Dell XPS M1330, Windows 7, 4GB RAM, T7500 Core 2 Duo CPU @ 2.2ghz.
Not so good for brainstorming sessions on a mobile computer at Starbucks then…

Case Study #1 – The stock broking company’s specification

One of my regular clients requires some upgrades to their existing system (that’s based upon .NET and the Microsoft technology stack). Generally speaking these changes require some architectural modifications, some changes to windows forms, some new windows forms, new reports and the like. Committing an idea on paper does take a while. So I opened up Balsamiq to see what I could accomplish in 10 minutes, and this is the result:

It’s a report layout. I started by dragging and dropping a large title header onto the form and changing the text of it. Easy enough. I gave it a subtitle using the same method, easy. Dragged on a grid and this is where it starts to get interesting – some controls (like grids) are modified by double clicking them and typing out the columns and rows as a set of comma separated values. Each control is pre-set with some data for you to lead you by example. You can change column types, inserting text, numbers and checkboxes. For the grid you can also specify an actively selected row too, change it’s opacity, resize and move it back and forward using the standard layout controls. All in all, it’s very intuitive.

I wanted a chart, so I found one and dropped this onto the canvas. I was surprised that I could not alter the chart in the same way that I could the grid. The chart is nothing more than a picture of a chart, and you can choose between different chart pictures. Oh dear, but this report isn’t supposed to have multiple columns with multiple colours. Tough. It has to have. Luckily I can drag a “cross out scribble” control over them to scribble over the bits I don’t want.

I didn’t like not being able to select a pen or highlighter control and drawing (or writing) on my own mock-up. I thought it was just me getting confused, but it seems that you cannot actually draw yourself. This is a huge oversight, especially as with a Tablet PC on a client site the ability to commit pen to paper (sorry, screen) instead of fumbling for the right control, would be invaluable.

There is one control that I liked especially, an picture box that allows you to search the Flickr API and retrieve virtually any imaginable image into your Mockup. It’s fast, and you have the entire Flickr library at your fingertips. That’s seriously useful. Maybe I could find myself a decent chart on Flickr.

Finally, annotating the design was easy with a whole selection of arrows and post it notes available with which to annotate your drawing.

When you’re finished you can (with a couple of clicks) export your drawing to your Windows clipboard and paste it into an email or document. You can export it (as a .png file) and save it natively as a, (and I’m not joking), as a “Bummel” (.bmml) file. It might be a language barrier thing, but in my career I have steered away from bottom-sounding file extensions.

Case Study #2 – The new PAYE Solver module

One of our new customers needs to file tax returns for 3,000 companies online, using our software. We are designing a custom interface with them in mind, and a bespoke data import routine. There isn’t any time to spare, and we still need a mock-up to design the form. I’ve given myself only ten minutes to do it (that’s less time than a UK statutory break time).

There, that’s it. A business line of application mock-up in about the time it takes to think about one. And despite the performance concerns of Adobe Heavyweight, I managed to turn over the above in 10 minutes. That’s without reading a manual or searching for controls.

Conclusion

It’s been a pretty quick and dirty review, but that’s only because I didn’t make up the above two Case Studies. I have some pressing work to get on with (this is the same work that’s currently holding up my 30 day challenge). I actually got to use Balsamiq Mock-ups in anger and here’s a quick summary of my findings:

What I liked

• Highly intuitive
• Control design is a perfect blend of readability and sketched informality
• Pre-prepared data in each control, just drag and drop
• Easy to edit data in controls
• Flickr integration
• Quick export via file and clipboard

What I didn’t like

• Adobe Air
• Lack of freehand drawing tools
• Lack of being able to change the colour of a control
• Lack of customisation on charts
• Transparency on the context edit window (it’s far too strong at around 90% transparency and hides itself when you’re not hovering the mouse over it – so it’s hard to mouse over the right edit icons). The edit window always appears in the same place anyway, so you’re unlikely to have it open over your drawing, which negates the need for transparency at all.
• No right click context menu

Score – 8/10

Any software that saves me time (and hence money) up front is going to be a win, especially if it can pay for itself quickly. I guarantee you that if you picked up a Balsamiq Mockups license that you’ll see an instant return on investment before you’ve even made a cup of tea. It’s that good. I want to give Balsamiq Mockup a million points, but I had to remove 999,992 of them simply because of Balsamiq’s choice of the Adobe Air delivery mechanism and the subsequent performance thereof.

Balsamiq Mock-ups has an excellent product and no doubt many ISV’s are inspired by the success of it. However, it’s still early days, Mockups hasn’t had it’s first year birthday yet, nor experienced the software tantrums of the terrible two’s. I highly recommend Balsamiq Mockups to anyone who works within the software industry, especially those who spend time working with customers and documentation. Don’t get me wrong, I’ve been critical in the review, but I love Balsamiq Mockups. It just needs a little cosmetic attention in the areas I mention above, and perhaps needs to consider going to the gym to lose some (Adobe) weight…

…speaking of the gym, I’m out of here!

Where can I find out more?

• Balsamiq Studios: http://www.balsamiq.com/
• Demo Balsamiq Mockups here: http://www.balsamiq.com/demos/mockups/Mockups.html