It seems like I’ve been doing a lot of user-experience (UX) design at my day job lately.  It’s not an area I consider one of my core strengths.  Up until recently, I would actually say it was a major weakness, but I was fortunate enough to take a HCI (human-computer interface) class while working on my masters degree. That class got me pointed in the right direction (I think).  I still suck at matching colors and coming up with pretty graphics, but I like to think that I can usually come up with good ideas for how things should be laid out and what the user experience should be like. 

One of the valuable practices that I picked up was using rough mockups to prototype the UX.  When I say rough, I mean it.  I’m talking about prototypes drawn with simple lines and boxes in MS Paint.  Many people don’t even go that far and will instead stick to paper-and-pen.  I’ve even read about design sessions where they literally use paper, glue, and odds-and-ends lying around the office to come up with new UIs.  The benefit to taking such a low-quality approach to the prototypes is that it helps people focus on the interaction and experience instead of tripping over issues like button color and fonts. 

While MS Paint works, and I’ve done quite a few mockups using it, making a mockup in Paint  is not a fast process.  It involves a lot of copy-and-paste, and a lot of try-this-didn’t-work-undo-it.  Fortunately there are tools to help you build rough mockups.  Today, I’ll be doing a review of one: Balsamiq Mockups.

About Balsamiq Mockups

Mockups is a tool for creating mockups with a pen-and-paper feel, but using a more productive drag-and-drop approach.  There are a variety of versions available.  There is a free (but limited) web version, a desktop edition, and plug-in versions for a variety of wiki and bug trackers.  According to their site, the current version features over 75 controls, 150+ icons, and a slew of keyboard shortcuts, which I’m still trying to learn.

Impressions

I have been using the online version of Balsamiq Mockups for a few odd things over the last couple of months, but I only recently took the plunge and got the desktop version (thanks to Balsamiq giving me a license so that I could fully evaluate it!).  Mockups is an Adobe AIR application, so not surprisingly, the web version and the desktop version feel almost identical.  The bulk of the UI is across the top while the canvas occupies most of the remaining space below.  In the desktop version, there are tabs across the bottom for each open mockup.   Getting started is easy: simply drag a control onto the canvas, and you’re off!  Controls like labels and text boxes that can hold values will immediately go into edit mode.  Clicking on an existing control brings up a floating panel with fairly standard options: move to front, move to back, group/ungroup, etc. 

For advanced users, there is also a quick-add box that allows you to type the name of a control and add it to the canvas.  Once you have a good feel for what controls are available to you, you will probably find that this is faster than hunting for controls with your mouse.

Things I liked…

Overall, I was very pleased with Mockups.  Building a prototype UI with it was significantly more efficient than my old method of sketching things out in MS Paint.  I found that most of the controls that I wanted to use where built-in and flexible enough (for the most part) to support what I wanted to prototype.  Unlike the web version, the desktop version supports multiple open documents via a tabbed interface, which is really helpful when you’re fleshing out multiple screens for an application and want to quickly switch between them. 

One of the cool things about Mockups is how open and flexible Balsamiq is with its development.  They issue new releases almost weekly (as can be seen here), and bugs, suggestions, and questions can be submitted easily through their Get Satisfaction portal.  They also have a community-driven site for sharing mockups and new controls called Mockups To Go. 

Another area where the openness of Mockups shines is the native file format.  Your mockups are stored as XML and can easily be consumed by other applications.  In fact, there are numerous 3rd party tools that you can use to help take your mockups to the next step, such as Napkee and a tool to convert from Mockups to Image Maps.

One other nice thing I noticed is that I can actually drag-and-drop files on Mockups to open them.  Drag-and-drop works for both the native BMML files as well as XML exports from the web version of the tool.

Things I didn’t like…

First, and this is very nitpicky, I only counted 74 controls, not the 75 that are claimed (and yeah, I double-checked my tally twice).  Maybe the 75th icon doesn’t show up under “All”?  Fortunately the controls available via Mockups to Go more than makes up for the missing 75th control.

Probably the biggest annoyance I encountered while using Mockups was controls randomly shifting slightly when selected. Sometimes things appear to move by a few pixels even though they’re really still in the same place.  When selected, sometimes controls would appear to jump down and to the right by one or two pixels.  Tapping “left” to nudge it would cause it to bounce back up where it was before.  I know it isn’t actually moving since it doesn’t register with Undo/Redo.  NOTE: I didn’t notice it until just now, but this is actually a well-known bug, described by this issue.  I hope it gets fixed soon, because it is very annoying. 

Another random annoyance was the options panel.  While it manages to stay out of the way most of the time, I did frequently find that its default placement was very much in the way.  Especially when working in or near a corner of the canvas, the panel would seem to inevitable be right where I didn’t want it to be.  While you can drag it out of the way, it seems like it could position itself a little more intelligently.  I also question why the panel is needed at all.  Why not make it a context-sensitive toolbar or “ribbon” instead?  There seems to be plenty of free space available in the existing toolbar at the top of the application.

Another thing I noticed was that I sometimes received “file exists” warnings when saving a mockup even when the file actually didn’t exist yet.  Apparently mockups does not pay attention to the file extension, so trying to save “Mockup.bmml” into a folder that contains “Mockup.xml” will cause these incorrect warnings to occur. 

Suggestions

After making over a dozen different mockups, I have come up with a few things I’d like to see.   First, I’d really like to see some sort of toolbar or ribbon-like interface instead of the floating control properties panel.  Second, creating a tab for a new mockup can currently be accomplished by right-clicking on an existing tab and selecting the appropriate option, but I’d love to see a Firefox-like “+” button for adding a new tab with a single click.  Also related to the tabs, they currently order themselves alphabetically, but this isn’t always the way I want to order my open documents.  Being able to reorder them would be a nice, simple addition.

A final suggestion: consider lowering the price.  At $79, it’s too high for my impulse-buy reflex.  If it was priced at $30, for example, I probably would have bought it without spending more than a few minutes playing with the web version.  As it is though, $79 isn’t expensive, but it means that I have to think a little harder before buying it.

Final Thoughts

I still haven’t decided if Mockups is for me.  There are alternatives, such as Microsoft Sketchflow, and I need to spend time playing with those to decide which tool is really the best fit for me.  I do strongly recommend that anyone needing to do UI development consider some sort of tool for doing quick mockups, and Balsamiq Mockups is definitely an option to consider.