In my job as a product manager one of my key responsibilities is designing high-productivity software that is easy to use and powerful. We work in a complex domain that involves massive amount of data, millions of dollars on the line, and tight deadlines. We attack these complex software with advanced technology, masked in easy to use software.

One of the challenges with user interface development – and all software development, for that matter – is that the further down the line in development something goes, the harder it is to change. Once a developer spends days or weeks working on something the resistance becomes huge as people are attached to their work – regardless of whether it is a good fit for the customer. To counter these problems, I’m a big advocate of building mockups in order to sort out the key design issues before significant development happens.

Over the years, I’ve used the following types of tools to do this:

  • Whiteboards with digital camera snapshots
  • Pen and paper sketches scanned
  • Photoshop / image mockups
  • HTML mockups
  • PHP prototypes

I use these various tools to build mockups for a variety of applications including native windows applications, classical web applications, and dynamic ajax applications. The more complex applications become, with complex widgets such as data grids, trees, and tabs, the tougher the hurdles are to crank out a quick mockup. The other problem I’ve seen is that the closer to ‘real’ a mockup looks, the more people are going to comment on the nitty gritty details instead of focusing on the key issues of workflow and usability – just like the problem of developers getting attached to something they’ve worked on, reviewers of super realistic models seem to often just assume that they can’t question the general structure and end up commenting on alignment issues, colors, etc.

I’m always on the prowl for new tools to use in this design phase, and have recently come across a product that is becoming a great addition to my arsenal of tools: Balsamiq Mockups. Balsamiq is a lightweight tool for building wireframes/mockups that look like sketches. The focus is on rapid creation of screen mockups that are easy to make and easy to change, encouraging feedback and rapid iteration. The product is available in a desktop version and also version integrated with Wiki software like Confluence. For the past few weeks I’ve been playing around with the desktop version – their website said that they’d give a free license of the desktop version if you promised to write a review, so here I am! Here I’d like to point out some of my likes, some annoyances, some features I’d like to see, and a weird little bug I came across.

First off, here’s a sample of what a mockup looks like for a fictional, non-sense product:

Balsamiq Mockup screenshot

In a way, Balsamiq seems to be very much inspired by Microsoft PowerPoint…but in a good way. You drag shapes from a list of about 75 widgets onto a page and then rearrange, align, and change properties for the items. The big difference is in the different types of widgets that are available. There are some basic shapes, but most of the widgets are things you would see in applications, like text inputs, dropdowns, radio/checkboxes, and then some more complex widgets like tabs, trees, data grids, and iPhone widgets. The result is that you can build things fast – the mockup above took about 5 minutes to put together.

What I like

  • Easy to use – the number one feature. As mentioned, the application uses many known paradigms from existing applications such as PowerPoint and other design apps. I was able to get going without reading the manual, going through a tutorial, or getting a lesson – the application explains itself.
  • Fast – ok, this is tied for the number one feature. Because of its ease of use, it is possible to create and iterate on designs very quickly. The ‘Quick Add’ feature really speeds things up by letting you type in the name of a widget without having to find it in the mix of 75 widgets – conveniences like this can make a massive difference in productivity.
  • Just the right level of realism – the mockups definitely would never be confused with a real application, but they are clean enough that they can convey to point very well and get people to focus on the key design and workflow issues early on in product design and development
  • Advanced widgets such as tree and data table – these advanced widgets are some of the items that make it tough to build mockups for advanced apps in languages like HTML without investing a lot of effort to use libraries like extjs, jquery, or YUI.
  • Easy to export to PNG – mockups can easily be exported out to the PNG format for posting on a wiki or emailing.
  • Editable – as compared to paper mockups, these have the major advantage of being editable, so you don’t have to break out the eraser or start over from scratch.
  • Translates well to traditional webapps, ajax webapps, and desktop applications – because the application

Annoyances…or things that aren’t necessarily bugs, but would make the application easier to use if they were addressed

  • After ‘Quick Add’ clicking f2 doesn’t go into edit mode – you have to click the widget first. If you drag items from the strip they automatically go into edit mode, it would be nice to have that for the quick add as well.
  • Dragging items from the strip doesn’t show the guides unless you place the widget then drag again, whereas normally when you are dragging you see guides to help you line up widgets
  • It would be nice if there were a better way to select a set of items without moving the item beneath it. If you have 20 widgets on a dialog box and you need to shift them over to make space, in order to select them all you have to first lock the dialog box, select the items by click dragging, drag, release, and unlock the dialog. If you don’t do this then the dialog box will just be moved. This gets more confusing if you have multiple boxes on top of each other. It would be nice if there were a way to move into selection mode which would allow you to select any elements that are entirely enclosed by a bounding box.
  • Related to the previous entry, you unlock items through a right-click menu (the only usage of right-click in the app?), but if multiple items are locked in the clicked area it just shows the item type in the context menu. In some scenarios I had 3 or 4 items showing up, some of which were of the same type. It would be nice to highlight the item when hovering over it in the context menu to let you know you’ve got the right one.
  • It would be nice if the tree could user smaller fonts – some of the other widgets allow for choosing smaller fonts to fit more text, but the tree uses a very large font, making it tough to represent even remotely realistic data.

Features I’d like to see

  • Ability to click through from one mockup to another to create workflow – while I don’t need to create an entire flow for an application, if I’m mocking up a particular feature it would be useful to show 3 or 4 screens that are linked together maybe with a generated HTML files or something of the sort.
  • Ability to regroup after ungrouping items – you can group items, but you need to ungroup to make any edits (unlike PowerPoint which allows you to change text or even move sub-items), but then you don’t have an option to regroup…meaning you have to go through the same fun of locking outer elements, and reselecting.
  • Radio and Check Box controls should allow adding multiple at once similar to Dropdown – since these fields usually come with multiple entries it would be nice to have the widgets allow for adding multiple ‘rows’ of data similar to dropdowns
  • It would be nice to have right-click context menus for some operations like grouping or ungrouping
  • Layers – it might be nice to have layers (like Photoshop) to help avoid some of the issues with moving items…this would add a lot of utility but it would come with the negative impact on ease of use and ramp up time.
  • Ability to add custom widgets – it would be nice to be able to add custom widgets…now if you create a widget by composing the built in widgets you have to save it as another mockup and then select-all and copy/paste into the destination mockup – it would be nice to be able to save the widget to the strip and give it a name.
  • Favorites bar in addition to the current ‘All’, ‘Big’, ‘Buttons’ – for many projects only a small number of the widgets are necessary. In my applications I have no need for things like the iPhone widgets so they just get in the way.
  • Maybe a way to switch from click mode to select mode for selecting multiple items

Bug

  • This was a weird one. If you type ‘scro’ into the Quick Add box and click the entry for the ‘vertical scrollbar’, the horizontal scrollbar is actually added. Surprisingly, if you type in ‘scrol’ or ‘scr’ it works just fine!

Conclusion

Overall I really like this application – I’ve found myself evangelizing to colleagues and used it for some real feature design and have gotten good feedback from all who have seen the results. Like all software, there are many things that could be improved and there likely always will be, but it seems that the application is in active development and the focus on usability and user productivity look like they’ll keep the product on the right trajectory. At $79 I think it is a bargain and justifies its cost in hours or days of use. It doesn’t necessarily replace all of the other tools in my mockup toolbox – to get to the finer level of detail I still need to break out the HTML occasionally – but this is now usually something that happens only after I’ve validated the basic design with Balsamiq.

Rating: 8/10