Monday, October 20, 2008

Need a tool to build your application mockup?

     How many times when you start a project have you needed to build a rough draft of the user interface.  You know what I am talking about, a mockup to show the user and to solicit their input.  I have always found issues with the mockups I have seen in the past.    

Mockup on Paper / Dry Erase Board

While this may work in a planning session, it doesn't exist past that point in time. Sure you can keep the paper, take a picture or capture what was done, but it isn't very open to change.  Additionally, you may be a horrible artist and your drawing causes more confusion than clarity. 

Mockup in Visual Studio

This seems to be the most common way developers build their mockups.  While it may sound like a good idea I find it problematic.  First, when the user gets a look at a mockup built in Visual Studio they don't consider it rough anymore.  The user sees an interface that looks like many finished applications and will most likely assume the application is farther along than it actually may be, no matter how many times you tell them the opposite.  Second, the developer is usually more reluctant to change the user interface since they took the time to build it in Visual Studio.  Even worse, the developer has the tendancy to spend time implementing basic logic which moves beyond what a mockup is all about. 

Mockup in PowerPoint

I have occasionally used this approach in the past.  PowerPoint definitely keeps the basic look and feel that you want in a mockup, but again the user may be unclear by just seeing a few squares. 

Balsamiq Mockups

So what do you use?  While every situation is different, I was just introduced to a tool called Balsamiq Mockups.  The tool delivers the ability to create a realistic interface quickly and without risk of the user believing it is ready for production.  You can export to a .PNG (Portable Network Graphics) file so the mockup can be placed with your project documentation.  If you want to see it in action watch this video.  I have been playing with it an found it to be much better to the alternatives I listed above.  If you want to give it a look visit the website (www.balsamiq.com/products/mockups).  What tool(s) are you using for your application mockups?