Balsamiq with everything?

One of the questions that people in this field often ask is 'what is the best tool to wireframe with?' As with most questions relating to usability, the answer is 'It depends'.

I asked this question this week on a group in LinkedIn, and received (as usual) a wide range of responses. To summarise, the responses fell broadly into three categories:

  1. Low-end visual programs, for simplicity and sharing (PowerPoint being a good example)
  2. Mid level vector drawing programs, for flexibility and control (Visio and Axure being two of the most common, at least on Windows platforms)
  3. High level graphics software (Illustrator, Fireworks), for more complete visual control and easier integration with the next steps.

All of them have advantages and disadvantages, and it really depends on what you are trying to achieve, how much you need to design/change, who you are working with, timeframes for the project and a dozen other variables.

In my case I was looking at tools best suited to rapid prototyping and testing, for which Axure is good but possibly not the best. Protoshare is one tool I'll be investigating next month, but another that popped out of the woodwork was one I'd never heard of, Balsamiq Mockups.

Tools such as Visio provide you with two real options for wireframes; simple clear architectural models (boxes, shapes and stripped-down text) or more realistic prototype displays that look like the finished article. Axure in particular is well suited to this, since it lets you generate pages and play as if it were a real website. Whilst this does take longer than architectural wireframes, the benefits of being able to generate and then use the prototype for testing - almost instantly - can be huge.

Balsamiq on the other hand, makes it very clear that you're not looking at the finished deal, and aims squarely in the middle of these two design choices.

Using a deliberately loose and hand-drawn approach, Balsamiq allows you to draw wireframes that are a mirror of the paper prototyping approach, but in a much smaller timeframe. You can quickly create designs that are visually richer than standard wireframes and should be easier for stakeholders to understand, without getting into the visual layer and those arguments over colours/fonts/flaming, spinning logos.

The good What Balsamiq does well is provide a drawing tool for rapid modelling of an interface. That's what it sets out to do, and I believe it does it extremely well.

I can envision this being an excellent tool for workshopping with stakeholders to create interaction models - in fact, I trialled this briefly on an interactive touchscreen, and it was a dream to play with.

Unlike the boxy wireframes you get with Visio or Axure, you can actually get a sense of the interface far more with this half-way house design. And users shouldn't be scared of knocking it and moving parts around - something I believe Balsamiq is aimed squarely at.

There are lots of useful pre-built controls, and you can import your own images. In addition the people behind Balsamiq and the community supporting it seem to be very active in adding in missing controls and developing the product further. A site exists (mockupstogo.net) for users to share and download mockups, which should develop into an excellent resource.

In addition controls can be modified, ordered, grouped and configured, with the basic configuration options all being there - for example you can quickly drop on a menu, edit in the options (or paste them from text), and then set one to be selected.

There are various plug-in versions of Balsamiq, and an online demo to try it out. Balsamiq say they are working on an online model for the future; good, in that it would be easier to share and collaborate on projects and potentially test, but personally I hate the subscription pay model unless the price is reasonably low (and I MEAN low).

Basically Balsamiq offers a wonderful tool to take paper prototyping into the digital age, and I'm looking forward to using it in anger sometime soon.

The bad What Balsamiq doesn't do well is the prototype testing stage, something that Axure excels in - and a direction I'd love to see Balsamiq move in a little more. Balsamic lets you link various mockups together in a simple fashion, and use the keyboard arrow keys to move back and forth between them. This is similar to the linear prototyping you get with PowerPoint, okay for very basic user processes but not ideal for more complex models. It's a good start, but I think it should be developed further.

There are a few niggles with the design of Balsamiq too, most (for me) around the use of the UI library. The library scrolls horizontally along the top of the screen, taking up valuable screen real estate when you're trying to design. It forces a lot of scrolling, especially as you don't have options on how to display controls so they take a lot of space. It would be good to see options for placing the library on the left or right, and switching to labels or small icons to save screen space.

There are also some niggles with the placement of controls - for example you find comboboxes and a date field under 'Buttons', but a textbox under 'Text'. It would seem to make sense for all 'form' controls to be grouped together.

The final gripe I have with Balsamiq is it's lack of a freeform tool - something that Axure suffers from too, although Axure's variant box shaping does make up for that somewhat. If you want a triangle shape within Balsamiq, you need to draw it elsewhere and then import it.

Overall But considering the primary purpose of the tool, these are relatively minor gripes. Balsamiq provides an excellent early prototyping tool, and at just $79 per licence, it is definitely worth picking up a copy.

Gary Bunker

the Fore