Skip to content

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?

newbg

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.

iphonedemo

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.

image

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:

image

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).

P35P14 Bulk Filer Mockup

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?

Published inOld Evolved ISV PostsUncategorized

7 Comments

  1. If you are an Eclipse user you should try WireframeSketcher. It’s a plugin for creating screen mockups and UI prototypes. Written in Java it’s fast and snappy. It has less features but there are some advanced features like master screens that you won’t find in other tools.

  2. mike mike

    Hi Peter,

    I’ve just taken a brief look at WireframeSketcher. It honestly looks good, although I don’t use Eclipse. I don’t use Java much these days, but it’s worth remembering.

    My main drive about Java is that this would have been an option for multi-platform deployment for Balsamiq. Adobe Air is ok, but just doesn’t hit the mark.

    Even better (from my point of view) would be if Balsamiq used Visio and released Visio mockup templates/stencils. That would solve everything, and there’s a big market out there for Visio templates/stencils…

  3. Hi Mike, thanks so much for the review! This kind of feedback is exactly what I need in order to make Mockups better, so I appreciate it.

    I have made a point about your requests for a simple free-hand drawing tool, better chart customization, control coloring (some already support it) and more right-click support.

    As for performance tuning, it’s something I need to spend more time on. AIR is not the snappiest, but I’m sure some of the blame should go to my code. Like you said, both are 1.x products, so not very mature…I’m working on it! 🙂

    Thanks again for the review and the great feedback!
    Peldi

  4. mike mike

    Hello Peldi,

    You wanted honest and factual critisism (you ask for this on your website), so you got it, I’m afraid! I am overall very positive about Balsamiq Mockups and I’d like to encourage anyone reading my review to check back (the Balsamiq website) regularly for updates. It’s early days, and I hope to see Mockups move to a move powerful “designer” over time.

    One other thing I missed from my review was the ability to “clip” and anchor controls to each other. For example, if I could anchor an annotation arrow to a button and then move the button I would like the arrow to expand/contract to keep it’s anchor point with the button. Visio does this and it’s great.

    Also some stencils for basic architecture (database, computer, user, router, phone, PDA, clouds) would go a long way to improving the scope of the Mockup from just “screens”/GUI to systems analysis. Then you’ll get a whole new crowd considering it too.

    Best,

    Mike

  5. Hi Mike,
    Thanks for the review…I know it’s several years old now, so I just wanted to let you and your readers know that the Balsamiq team have been investing heavily in their product over the past few years. It’s evolved into a powerful, but still quick and intuitive prototyping application that we use to design for our complex, transactional, B2B application. It’s still built on the Adobe Air platform to my knowledge, but I suspect because of improvements in Air, Balsamiq, and commonly available hardware these days, the performance for simple mockups like you show is actually very good. It’s only when you get to extremely complex layouts that I do wish performance was better.
    As an aside, other than writing great software, I’ve found that the Balsamiq team has shockingly good product support. They actually incorporate feedback from users into the product and, when you have a problem, have real, live, knowledgeable, and helpful people to assist you. I was quite frankly stunned by the level of support they provide, which just illustrates how passionate they are about their product.
    I’m not affiliated in any way with Balsamiq…just a user like you who’s trying to get his ideas on “paper” on a day-to-day basis.
    Best,
    Steve

Leave a Reply

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.