Mockup Tools FTW #DesignGeek

The more I strive to meet customer expectations for excellent web-based applications the more I come to appreciate the value of mock-ups and prototypes.  While we were still dating my now-wife worked as a User Experience engineer for Dell and routinely batted me (a Dell software engineer) over the head with the subject of usability years before "Web 2.0"  and user-experience were en vogue.  She gifted me with Jakob Nielsen books and offered (unasked-for) assistance in critiquing my own applications.  Back then low-fidelity prototypes and early user feedback were still a novel idea.  Now, however, I find them to be nearly-indispensable steps in satisfying customer expectations...

Clearing The Air and Setting Expectations

Have you not used a mockup to help define customer expectations? They are almost magical in their ability to solidify requirements. The customer gets a clear picture of the solution you envision and either agrees with it or modifies it.  The result is a clear, unambiguous goal of (at least some of) what the application is expected to deliver.  What goes on under the covers is far less important to the average customer than what is seen on screen.

Choices, Choices
There are plenty of approaches to creating mockups.  The typical first approach is to simply create a basic UI with no backing code.  The programmer doesn't have to learn any new tools and the resulting mock-up is often spot-on regarding the proposed look of the final product.   This is the approach I relied on for years before considering dedicated mockup tools.  

I didn't truly arrive to the mockup party until 2008:  the release of Balsamiq. The product was notable for several reasons:

1. It was easy to use
2. It was inexpensive
3. It intentionally produced rough mockups rather than real-life mockups

Balsamiq produces intentionally "rough" mockups

It was the third item that really caught my attention at the time:  rough mockups.  Too many times before had I generated some proposed UI in MS Visual Studio and then found myself held accountable to make it look and function exactly like the proposed mockup.  With Balsamiq I could outline a proposed UI while making it clear that it was only a rough idea rather than a precise specification.  Any customer agreeing to a Balsamiq-produced mockup was obviously agreeing to the general idea rather than an exact duplicate of the pictured elements.

Since 2008 I've used Balsamiq to help zero-in on customer expectations as well as officially define customer requirements within various Scopes of Work.  Balsamiq has proven to be an invaluable tool for the starting price of $80.  Similar well-known tools ask many times the price.  Although products like the $600+ Axure provide more features, Balsamiq provides the basics while supporting products (Mockups2Android for $43) can inexpensively provide extra features as-needed.


Cloud-based versus Local Application
A notable Balsamiq alternative is the web-based GoMockingbird tool.

Mockingbird mimics Balsamiq in the cloud

Recently out of beta, GoMockingbird provides many of the features of the Windows-based Balsamiq but is available as a web service at $9 per month.  Not to be outdone, Balsamiq is now also available as a Chrome extension for only $5/month or $50/year.  I find the Chrome-based version of Balsamiq to be the more useful option as I can access and edit mockups from any PC I happen to be using at the moment (I currently work on eight different PCs on a regular basis).  Note that GoMockingbird is free to use for a single project up to 10 pages.

Of the two products, Balsamiq currently offers more advanced options but for basic mockup needs GoMockingbird compares favorably.

 
Tablets...Don't forget the Tablets
Always on the go?  Or perhaps simply always looking for new ways to justify that $500+ iPad purchase?  Well the afore-mentioned Mockingbird is tablet-ready with its HTML5 Cappacino-driven engine.  If you're an iPad owner, though, you'll want to pay equal attention to iMockUps as well as OmniGraffle.

If you've got an iPad and develop software try out the tablet-friendly mockup tools I mentioned above and leave a comment below with your impressions.  I'm still using my Android-based $189 Vizio VTAB1008 while saving up $399 to invest in a refurbished iPad...