You should be using Balsamiq Mockups

Michael C. Neel — Thu, 09 Apr 2009 02:50:00 GMT

I’ve heard many people rave about Balsamiq Mockups, an Adobe AIR app that helps design user interfaces, but until today I had never looked into using it myself. Like many developers, I don’t mind opening up my IDE to build a prototype and us that to tweak my user interface from. I felt that I was saving time, since the prototype was the same codebase that would become the app I was getting my design time for free.

That’s a common mind set, but it’s the wrong one. You’re not saving time and instead spending more time because the tool isn’t the right one for the job. Instead of focusing on the user interface you deal with getting the CSS property correct, or the font setting right on the WinForms control. Even Blend, a tool for creating UI, clouds up your process by distracting you with color options and drop shadow effects. It gets worse; since it takes so much effort to get something to look the way you imagined in these tool, you won’t change everything to fix a problem. You accept a subpar user interface and the app suffers.

Today I tried, ranted against, and rejected Seesmic Desktop, the latest twitter client. Like all twitter clients I’ve tried, it was very proud of it’s UI – to the point it was in the way. I might be a minority, but I use twitter website almost exclusively, and don’t want a client taking up half a monitor. I have been thinking of writing a twitter client for me, and I’ve even given it a name: Damn Simple Twitter. I have an idea what it would look like, so I tried out Balsamiq with a quick mockup:

This was a very quick mockup – as in it took me no time at all. The Balsamiq UI is very intuitive, and I had little trouble finding what I was looking for. The export features are nice, which include both xml and png and an export to clipboard feature for pasting mockups into emails (and blogs). There is a full screen mode, and I can see using Balsamiq in a meeting with end users and stake holders to great effect. Once I’ve mastered the hotkeys, I will be putting this theory to test.

Then, the real magic kicked in – looking at this crudely drawn mockup I started to see faults. I had moved the user images out of the way of the text, but the UI still felt bulky. I had a chat window open, and thought “what would a twitter chat client be like?”. Quickly, I changed my mockup to reflect this, and then i started wondering how I would use this app. How can I add a tab? What if I want to manually refresh? How would I setup my account? After about 10 minutes of mad mocking, I was left with:

I fell pretty good about it too. More importantly, had I created the first version in code I would have never been able to make it through all the revisions that led me to this design. The power of right tool for the job.

I’m now using Balsamiq for a larger project at work, and finding that finalizing the user interface and scope to be much easier. When you have all the proposed features on screen at once, it is easy to see what’s redundant and awkward. That’s something bullet points and a text description have a hard time exposing.

I’ve given a pretty glowing review of Balsamiq, and I must disclose that I was given a free copy for review. Actually, I wanted to check out Balsamiq, and hit up my “connections” to get me a free copy (i.e. I begged and abused my blogger status and MVP-ness). Balsamiq has a free trial version and is currently $75 to unlock the full version. I don’t have any negatives, but I do have some things I’d like to see added in a future version:

Currently you can only save a mockup individually; I’d like to save and load a set of mockups
The current method of a “master template” is really just creating a background image and loading that for all mockups – real templates would be nice, similar to slide masters in PowerPoint
When viewing a mockup in full screen mode, page up / page down should cycle through the open mockups – this would be nice in a meeting / review setting, to move through each screen of the app while explaining the user story

ViNull, Off the Record : review

You should be using Balsamiq Mockups