Balsamiq Mockups - gui prototyping on steroids
Monday, 9. February 2009, 23:31:22
Are You a software developer, interface designer or maybe You are paying someone to deliver an app?If You answered 'Yes' to the above question then read on. I will tell You about an application that will remove the most boring, bug prone and difficult process of regular interface design for software.
In every application development cycle there is a moment when several different parties have to settle on a user interface. The problem is much harder then it seems and a simple chat on the phone or even in person might not be enough to get it 'just right'. The sides have to agree on functionality, usage and layout of widgets, field validation, implementation of business processes and much more...
Before You proceed take a moment to see the application I am going to talk about further in the post.
The screencast on the product page is probably the best starting point.
And some examples of GUI mockups created with it.
The following 2 screenshots are the result of my 1h play with the tool. Mocking up the Opera Mail client. Click to see a larger version.
Now, back to where we left off:
Most companies and independent software developers (and open-source software developers) have their own ways to approach this issue. Let's take a look at some of them:
- Paper & Pen / white-board
Many use paper and pen to sketch out the application - by far this was the most effective method I knew.
The problems with it are:
- many iterations of the design lead to lots of wasted paper
- harder to archive
- hard to keep track of iterations
- hard to share with people working at a distance (important for big companies and open-source developers)
- in a commercial setup - mostly unaccepted results to show the clients.
- RAD tools/WYSIWYG GUI designers
Some use the same applications that are used to create the final product.
- to much layout work with complex UI for just a mockup.
- in a commercial setup - the end user will compare the mockup to the final product and complain if they differ. And they will mostly differ because during implementation issues are discovered that force the change of some previous decisions.
- seeing a mockup looking realistic (like the final product) might set off some customers to think that You are almost done.
- Specialized software
I have no experience in the field of specialized software for this purpose but the ones I found were overkill for a mockup.
A new player in town - Balsamiq Mockup.
Balsamiq Mockups
"so freaking good"
- Create software mockups in minutes
- Collaborate with your team
- Focus on creating your product
Balsamiq Mockup is all about productivity. The idea is simple and implemented perfectly - design a user interface with 'hand drawn' components, tweak an rearrange them until You/Your team and Your customers are satisfied.
The interface of the tool is intuitive and straight-forward. I didn't need any documentation to get going - most features worked as expected and more complicated ones came with tool-tip help. In fact, the application is so easy to use that You can hand it out to Your client to provide initial mockups of things they want and allow them to modify Your proposed solutions for further review.
I tried the desktop version, which is available for free but with some limitations (no export, save, import and creating more than one mockup at a time). The software is written in Adobe Air so it runs everywhere where Adobe deployed it's product (Windows/Linux/Mac?). The installation was quick and painless. Once the app was running I decided to create a mockup of the Opera browser. I took it a little further and selected a specific part of the browser that contains a more complicated UI - the Mail client displaying the 'Sent' directory an open message and the sidebar open plus several open browser tabs.
It took me about an hour to finish my mockup. It was incredible fun.
The widget library is comprehensive it didn't lack any of the items I needed to implement the GUI I choose for this test. And even if it did miss some - it's nice to know that You can create Your own. The widgets can be grouped, rearranged, colorized and tweaked with many parameters available for the predefined ones. There are also many nice features built in like the ability to search and import images from flickr with the image widget. There is also a full screen mode that turns Your mouse cursor into a big blue pointer - great touch for presentations with the client.
The look of the final mockup doesn't leave any doubt of what it is - a mockup. And this is good because it doesn't create false specification for the product when it's implemented. There is nothing worse then a tester insisting that the widget isn't placed exactly like the one from the example in the specification...
You can design any user interface You want with this tool. Be it a desktop application, an iphone app, web page - anything. You are only restrained by Your own imagination.
In contrast with the pen and paper approach, You can export Your mockups and put them under version control. There are also many ways to run the app - even from the browser so there are probably many paths of collaboration built-in but I didn't search for them.
As for pricing there is a one time fee of $79 per developer and there are also good discounts if You want to buy more licenses at once. For most developers and companies this is in my opinion a no-brainer. It's worth every dollar they charge.
Be warned - If You try it then You will not want to go back...
WIDGETIZE