The Interactive Prototyping Dilemma – A Review of Software Options, Part II: Balsamiq Mockups

Today we’re continuing our series on finding the best tool for creating wireframes, mockups, and designing interaction in a collaborative development environment. Since we’re primarily interested in solutions that fit the kind of fast and lean development environment we have at SitePen, we’re skipping some of the established solutions in favor of more down-to-earth software tools that are suitable for smaller teams and organizations.

Last time we reviewed OmniGraffle from the OmniGroup, which is SitePen’s swiss-army knife, the go-to application that we use for most of our initial wireframing and interaction design.

OmniGraffle has traditionally been SitePen’s go-to application for wireframeing and initial mockups, offering a swiss-army-knife functionality that lets us brainstorm, build basic wireframes, increase wireframe complexity, and eventually proceed to pixel perfect mockups (by pulling in graphical elements created in Illustrator, Photoshop, or Fireworks and skinning them onto our detailed wireframes). OmniGraffle has been reliable and powerful, but we’re always on the lookout for new tools that can speed up the design process.

This time we’ll be looking at a spunky little contender called Mockups by Balsamiq. Balsamiq is helmed by Giacomo Guilizzoni, a former employee of Adobe Systems. Mockups differs substantially from its competition in that it is specifically intended to produce less polished interface wireframes that actually resemble pencil sketches. Sketches can be exported as a PNG file or as an XML file which calls on Balsamiq’s library of elements (but which is not going to produce a workable web-ready mockup on its own).

The application is perfectly designed to allow for the extremely rapid creation of quick interface sketches based on a library of included interface elements. Included elements cover all of the basic interface types you’ve probably encountered on the web or in basic applications. In the library of elements you’ll find tab sets, play controls, dialog boxes, and even a visual representation of cover flow, among other controls.

Building a sketch in Balsamiq is simply a matter of selecting the interface elements that are needed and dragging them onto the canvas where they can be positioned, stretched, and where labels can be modified. As long as the design you are working on consists of standard, well known interface types, Mockups’ library probably has you covered. In only a few minutes, a designer can crank out an efficient and highly comprehensible interface sketch suitable for brainstorming and even for collaboration with developers.

The reliance on a predefined library of interfaces is at once Mockups’ strength as well as its weakness. As long as you stick to what is in the library, creating an interface is fast and fun, but currently the application has no way to create your own interface widgets.

To a lot of designers, this won’t be a huge problem, but anyone creating “something new” will quickly find this to be a big roadblock.

Still, the library is comprehensive enough that you shouldn’t run into many such issues. In a worst case scenario, designers could simply leave a spot in their sketch for their unique interface design to be added later, export their sketch to PNG, and use the sketch in another application that allows freeform design.

The interface widgets that are available, however, have a great text-to-design feature that really makes the application shine. The interaction really has to be seen to be understood, but basically it allows a user to expand on the default values of any widget by simply adding text. For example, let’s say the user selects the Button Bar Widget, which is basically a row of three buttons labeled One, Two, and Three. By double clicking on the widget, the graphical version of the widget switches to a text-only input mode which displays “One, Two, Three” as a text field. To add more buttons, the user just adds more comma separated words. After pressing enter, Mockups automatically generates new graphical button sketches for each additional entry.

If you’ve ever spent thirty minutes redesigning a data grid wireframe just so you can add an extra row or column, this feature will seem like a revolution. Instead of having to draw a new column or row, move your text, and then enter your new values, you just click your data grid and enter comma separated values wherever they are needed. Hit return and Mockups renders the data grid with all of your new entries in the right place. It doesn’t get much easier.

Another nice feature of Balsamiq Mockups is its price. At $79 for the desktop version, it is extremely affordable. In fact, the price is low enough that a small business could give clients a license in order to let them help make edits to sketches (tread carefully here, designers). Additionally, Balsamiq is available for Confluence, Jira and XWiki, all of which are collaborative environments that offer tantalizing opportunities for designers working as part of distributed teams.

But ultimately, Balsamiq Mockups’ real strength is as a high impact replacement for your paper and pencil sketching efforts. That may sound like a modest achievement, but improving on the time tested standby of notepaper and graphite as a rapid mockup tool is no small feat. For most interface sketches, Mockups will actually be a faster tool for brainstorming than a paper sketch, and that’s saying something.

The entire philosophy behind Balsamiq Mockups is to provide an environment for creating rapid interface sketches meant to convey the gist of a design. Nothing that we’d build in the Mockups program will even vaguely resemble a ready-for-primetime style, perfected visual mockup. Instead, the application excels at creating doodle-level sketches, the kind that you might produce in a brainstorming meeting. And for that purpose, Mockups is a perfect solution.

Looking at Balsamiq Mockups, there are some obvious pros and cons:

Pros:

• Extremely fast layout creation that allows the user to bypass aesthetic worries in favor of simple interface models
• A comprehensive library of most major interface elements found in digital products today
• Impressive text-to-design entry feature that let’s users alter widgets via fast text entry
• Easy to use, even for non-professionals, potentially offering the chance to let business focused clients express their ideas and initial thoughts visually
• Low product cost
• Can help keep clients and users in the “this is just a preliminary design” frame of mind, which is great for early design phases

Cons:

• Inability to create your own interface controls, which is a big obstacle if you are creating something outside of the mainstream
• Sketches will necessarily have to be recreated as more detailed wireframes / mockups in another application, as there is no real export functionality beyond the ability to save sketches as PNG files
• A minor nit here, but Mockups’ default background is an image of a spiral notebook. This only stays cute for a little while before I really want a plain white background

So considering these advantages and drawbacks, can we find a good place for Balsamiq Mockups in our business process? The answer is a firm yes. Although Mockups does not fit the bill as our desired “best tool for creating mockups and prototypes” in SitePen’s process, it could very likely become our go-to tool for the preliminary design phase. Mockups is perfect for the initial design push, when ideas and concepts are being tossed around in rapid fire bursts, torn down, rebuilt, and redesigned. It is in this capacity that Mockups can really shine, and in which I would highly recommend its use.