Tuesday, September 2, 2008

Wireframes Using Balsamiq Mockups

I think one of the most difficult times during product development is during the initial user interface design, specifically the period between napkin chicken-scratches and high-fidelity mockups. It is during this period when you are typically deciding on application workflow and beginning to expose that workflow to people outside the product team.

The problem is that napkin chicken-scratches don't give enough of a sense of the real use of the application. Conversely, high-fidelity mockups don't provide people with enough imagination latitude to think about other possibilities. My solution in the past has been to use Photoshop to do line-drawings mockups like this:

Photoshop Wireframe

They are good in that they enable people to "fill in the blanks" with their imagination, which we can capture with further iterations. The problem is, though, that they are still tedious and time consuming to edit. For a long time, I've wanted a tool that gave me the ability to do these line-drawing mockups but much easier.

Not too long ago, I stumbled across Balsamiq Mockups and quickly fell in love. It offers the "use your imagination" lines of a whiteboard with the reusability and easy editing of a document. Take a look:

Balsamiq Wireframe

The current feature set is reasonble. It gives a good editing environment with a nice set of controls. It has really hit about 90% of what I need.

Perhaps more relevant is that, in the month I've been using it, that number has gone from 80% to 90%. The author is very good about developing and deploying new features. Balsamiq is a one-man micro-ISV, but the level of support he gives puts any other software shop I've worked with to shame. Peldi gets a big "ataboy" for that!

So, what's missing? Really, only two things:
  1. First is importable images. Images are all placeholder boxes, which aren't quite sufficient on visual applications. This feature is currently in development.

  2. Second is application workflow. While I can create mockups of the ten screens in my app, I can't show how or why a user transitions from one to the next. I currently have to do that out-of-band from the application, which slows my work. Balsamiq has also indicated that this will be addressed in a future version as well.

That's it. Sure, there may be some other controls that are missing, but every piece of software has that. Given the quick turn-around on many features, I don't think there is much to worry about there.

If you do much application UI brainstorming, definitely check out this tool!

No comments: