The Institute for User Experience Collection of UX Tools & Notes

At the recent South African User Experience (SAUX) meeting, I did a presentation on Balsamiq Mockups after Gary Marsden’s highly entertaining and educational talk on “Doing UCD Differently: Working in the Developing World” and Phil Barrett’s great introduction on “What is User Experience?”

Balsamiq is the baby of Peldi Guilizzoni (previously leading the design and development of Adobe ConnectNow) who decided to go entrepreneurial earlier this year. If you are an intrepreneur, do yourself a favour and read his story. His whole approach on software development is inspiring to say the least.

I have tried numerous software for mockups (Designer Vista, iRise, Photoshop, Visio and others not even worth mentioning) and from a point of view of someone that wants to do quick and easy mockups, Balsamiq Mockups blew me away. It fell perfectly in a triangle of useful, easy and effective. Another plus in my book is the fact that Balsamiq is build on Adobe Air, which means that even if your are a Mac Groupie, a Linux Rebel or a PC Conservative, you can all use it.

The first thing you will notice about Balsamiq is that everything looks like sketches and that is excellent for two reasons.

1. Nobody thinks your product is final and aren’t afraid to critique it.
2. I don’t know about you, but when I have to draw mockups myself, I tend to take it too far. I want to start using colour and make it look pretty, because they are my drawings. But with Balasamiq, they are not your drawings and you don’t get that urge. This gives you the time to focus on the immediate important things like layout, functionality and visual flow.

Russel Wilson from Dexo Design recently did a quick comparission between 16 different mockup/prototyping software which included Pencil, Omnigraffle Pro, Visio Pro, Photoshop, Illustrator, Fireworks, Dreamweaver, Flash, Flex 3 Pro, Thermo, Axure, iRise Pro and of course, Balsamiq and his result didn’t come as a surprise to me.  In his mockup test, Balsamiq killed the opposition when it came to “Ease of use and fun factor” and “Time to create a mockup”. It took him 15 minutes to create a mockup “Tree Navigation” in Balsamiq, with Visio Pro a close second at 30 minutes. Everything else took an hour and longer and with some programs he even stopped trying.

It is important to note that Balsamiq does not cover the “Full Product Lifecycle”, but thanks to the tips of one of the Balsamiq users (Michael Hackney), you can now do interaction with the help of a little bit of HTML, Image Map and CSS.

Balsamiq has a simple interface with items that you drag onto your “paper”. Items like for example: tables, menus, dialog boxes already contains data, which makes it very easy to see how to use then and quickly add your own content. Selecting an item will bring up the appropriate “attribute” box and you can do changes like size, placement, choosing a selected item, change colour, etc. Now some of you might think that you can probably draw just as fast or maybe even faster than you can “sketch” with Balsamiq, but where Balsamiq will beat any sketcher is with making changes and duplication. Items can be grouped, duplicated, exported and imported in just a few easy steps.

And to tip it off, If you would like some new UI elements to be added to Balasamiq, join the creator on GetSatisfaction (another amazing website service) and make a request. What was really amazing to see was how Peldi used his own software to create a mockup of a new feature he wanted to add: “image import” and how users gave feedback by making their own examples with Balsamiq Mockups.

If you want more proof of Balsamiq’s greatness, check out the video demo for Balsamiq or the mockup examples (which include mockups of iTunes, Google, simple forms, Youtube, chat program and dialog boxes).