Sketch and Prototype Tools Review - Part 1 - Balsamiq

As a software designer and web developer I usually focus on the back end of web sites and applications and leave the User Interface and UX design to people more knowledgeable. Still, occasionally I have the need to do some sketching and drawing with a customer, for example when designing a web interface or when working on use case documents. While paper and pencil often work fine, they lack durability. Additionally, the result is hard to share, especially with "digital" clients or clients in a different country. Over the years, I've been working with a number of software design tools to aid me in this process. Since I get asked which tools I use every now and then, I decided to write a short blog series outlining a number of these tools, including Balsamiq Mockups, Axure RP Pro, Microsoft Visio with the 'GUUUI Sketchy GUI Shapes' stencil, Pencil, and Microsoft's Sketchflow.

In this series I'll be (re)creating a design mockup for the Management section of my web site with each of the tools, giving you the opportunity to compare their output. You'll find a screen shot of the existing Management section at the end of this article.

Today's tool: Balsamiq Mockups.

Balsamiq calls their tool a "low fidelity framing tool" because the wire frames it creates are deliberately "rough and low-fidelity", giving them a hand-drawn look and feel. This in turn should help getting as much feedback as possible as "...no-one will think you'll be offended by their input, they'll know immediately that you just 'threw it together' quickly".

Starting with Balsamiq is pretty easy. From the main Balsamiq web site you can get a trial of the Desktop version that runs on top of Adobe Air which you can download together with the tool. A few other versions are available as well, including plugin versions for Confluence, JIRA, FogBugz, and XWiki. The company is also working on an on-line version called myBalsamiq, currently in private beta stage.

Once you start Balsamiq, you're greeted with a screen like this:

The Balsamiq Main Screen
Figure 1 - Balsamiq Main Screen

At the top of the screen, right below the main menu you see the Application Bar that gives you quick access to commonly used actions such as cut, paste, delete, group and ungroup. The Quick Add box on the left enables you to quickly add new controls to the Mockup Canvas by typing just a few letters.

Just below the Application Bar you see the UI Library that contains dozens of controls ready to be added to the Mockup Canvas. Here you'll find controls such as Lists, TreeViews, date pickers, color pickers, splitters, fieldsets, common UI controls such as Buttons, Labels and Input box, a bunch of controls specific to the iPhone and more. You can find out more about the various controls in the Balsamiq Help Files or get additional controls from the community web site mockupstogo.

By dragging items to the Mockup Canvas, you can quickly create your mockups, adding notes and meta data as you progress. Each control has a pop up dialog called the property inspector that appears as a semi transparent window as soon as you click a control. This auto-appear feature can sometimes be a little annoying or distracting if you want to work with the control but don't need the property inspector. The property inspector changes depending on the UI control you've selected and provides context sensitive options to change appearance and behavior of the UI element. Figure 2 show the property inspector for the Data Grid / Table (the Grid with categories in the final mockup in Figure 5).

The Property Inspector for the Data Grid
Figure 2 - Balsamiq Property Inspector for the Data Grid / Table control

Many of the controls are very smart in the way they enable you to alter their content. For example, rather than creating each tab in a tabbed Menu control manually, you simply double-click the control and enter a comma separated list of tab names. You then get a list of tabs that looks like this:

The Tab Control in action
Figure 3 - The Tab Control

The control remains editable, so it's easy to add new items or to change the selected item (the Admin tab in Figure 5).

The same editing experience is available for other controls such as the List, the Accordion, the Combobox and many more.

Using Balsamiq is quite intuitive. Within a few minutes you'll be familiar with the most common tasks, enabling you to fulfill most of your mockups needs. For more advanced scenarios, such as text management, you need to consult the documentation. For example, I wanted to add some random text to a paragraph and quickly found the Lorem Ipsum generator. The help also provides information about text formatting (bold, italic, links etc), short cut keys, the numerous inspectors and so on.

Features I like

Here's a list of the features I find very useful in Balsamiq:

  • Quick Add. By typing in a few letters of a UI element you can add it to your design page. This makes it very quick to start sketching.
  • The smart features of the controls such as the Tabs Bar, the Menu Bar, lists and so on that let you create fancy UIs while maintaining a simple and editable text based representation of the content.
  • The Lorem Ipsum generator. Type lorem in a text area and you get a paragraph of Lorem Ipsum text.
  • The Export to PDF version works great and maintains internal links, enabling you to send the diagram for review to a client that doesn't have Balsamiq installed.
  • The UI stuff for the iPhone mockups. Looks like these controls have recently been added as they feature some smart behavior not found in many of the other controls (such as the ON button in the iPhone menu).
  • The On-line Controls library, found at http://www.mockupstogo.net/ where you can get additional UI controls created for and by the community.
  • The Search option in the Icon Library that lets you quickly search for the right icon.

However, even though Balsamiq is a good tool for quick mockups, there are some things that could be addressed to make it even better.

Things to Wish For

  • It would be nice if controls like the Browser Window or the Window / Dialog would act as a true container in which you can add other controls by pasting or dragging. That way, you could move the container and all of its controls would be moved with it. I know you can use grouping to accomplish something similar but it would be great if the controls would group automatically if you added them.
  • A "recent icons" tab on the Icon gallery that shows a list of icons you recently used.
  • The Label and Icon control could have two other layout options where the icon is placed below or to the right of the label and not just to the left or above it.
  • "Drag-copy" - By dragging a control with the Ctrl key pressed, a copy of the control could be made. Turns out you can do this with the non-standard Alt+Drag.
  • The DataGrid is really cool and enables you to create Grid like interfaces in no time. I really like the smart way to add checkboxes and radio buttons using [], (), [x], (x). One thing I miss is a quick way to add a button to a cell. I can envision something like {Edit} to end up as the buttons seen in Figure 5. Another thing that's missing is the option to span multiple columns for a specific row such as the paging bar below the grid in Figure 4.
  • It would be cool if you could customize the toolbar control. Right now, the toolbar has a fixed list of buttons and other controls, but I would like to be able to change the buttons, add or alter a drop down list and so on.
  • The Lorem Ipsum generator generates numbers in the text which looks a little odd. Not sure if this is a bug or a feature.
  • The tool has no programmability options. The target audience or mockups probably don't require this, but in some cases I really could use some programmable options. For example, to change the target of a linked item depending on the state of another control. Considering the price of Balsamiq, it seems reasonable this feature is missing though.

If you work with Balsamiq, or want to try it out, be sure to check out the official Balsamiq web site. While I find the site a bit funny looking (a look that people shouldn't be afraid to criticize if you ask me ;-) ) and can be a bit hard to navigate, it does contain a lot of useful information, including help documents, videos, sample mockups, avery active support forum and more.

The End Result

Which each of the tools I am reviewing, I am creating a mockup of the page in the Administration section of my web site that enables me to manage content categories. The page looks like this (click the image to get a bigger version):

The Management section of Imar.Spaanjaars.Com
Figure 4 - The Management Section of Imar.Spaanjaars.Com

Using Balsamiq, I ended up with the following mockup (click the image to get a bigger version):

The Final Mockup in Balsamiq Mockups
Figure 5 - The Final Result in Balsamiq Mockups

Summary

Balsamiq is a great tool for quick sketches and mockups. It's easy and fun to create mockups using the many available controls. The tool is intuitive to use, has good export options and has a very reasonable price tag. However, it also has a few limitations, First of all, it doesn't enable you to create complex and programmed clickable sitemaps as you're limited to simple links from one item to another document. This works well for more common site-map scenarios but may not cut it in more complex application-type mockups.

It also doesn't have a separate run-time option that you would use with a client to discuss the mockup and make updates or annotations. Balsamiq has the Full Screen Presentation option to show the mockup in full screen mode, but in that mode, pretty much everything is read-only (although internal links works of course).

Specs

Price $ 79 for the desktop edition. other versions are available as well.  
URL www.balsamiq.com  
Trial available Yes  
Application Mode Stand alone, desktop version, but requires Adobe Air.  
Documentation http://www.balsamiq.com/products/mockups/help  
Instruction videos http://www.youtube.com/user/Balsamiq#p/a/u/0/1mnlN4SJxFg  

Features

   
Linking Limited. You can link individual items such as a tab in a tab control to a whole new Balsamiq file. You can't program any logic behind it. Linked items remain available in exported files such as PDFs.  
Exporting Yes (PNG, PDF and the clip board)  
Run-time viewer and annotation options There's the Full Screen Presentation option that lets you view the mockups and navigate between them.  
Web Browser Control Yes  
Phone Support Yes, iPhone out of the box; other phones through the community web site.  
Programmability (to change click behavior in presentation mode) No  
UI Types Generic, iPhone  

Where to Next?

Wonder where to go next? You can read existing comments below or you can post a comment yourself on this article .


Consider making a donation
Please consider making a donation using PayPal. Your donation helps me to pay the bills so I can keep running Imar.Spaanjaars.Com, providing fresh content as often as possible.



Feedback by Other Visitors of Imar.Spaanjaars.Com

On Wednesday, May 19, 2010 10:55:11 AM Peldi Guilizzoni said:
Imar, thank you so much for the in-depth review!

Let me address some of your questions:
* we'll be working on our website this summer
* making dialogs work as containers is on the list. With the next release you'll be able to edit group contents, so grouping controls will help with this issue
* recent icons: good idea!
* Other placement options for Label and Icon control: why do you need them? Can you show me a screenshot of what you're trying to do? You could also create those with a label and an icon control.
* adding buttons to a datagrid is on the list (same for comboboxes, icons, etc)
* span multiple is a good idea, let me think about how to make it intuitive to use
* Customizing the toolbar: why? What would your customized toolbar look like?
* The numbers in lorem ipsum are intentional, they count the characters so that if you need "200 chars of lorem-ipsum" you can do that easily.
* No programmability is planned. We're a low-cost tool and want to stay that way. :) There are lots of other tools that let you do deep interactivity, but those are (a) inherently complex to use (b) expensive (they're more powerful = they need more maintenance = more people). If someone needs all that the other tools you're planning on reviewing next might be a better fit (get ready for a 8x price difference though). :)

Thanks again for the great review!
On Wednesday, May 19, 2010 12:54:02 PM Imar Spaanjaars said:
Hi Peldi,

Thank you for addressing my questions. Let me address yours in turn:

* Containers: yes, I saw there was a beta out with this feature. That's indeed going to help. Great.

* Icons: take a look at Figure 4, Figure 5 and at the top right of this very web site. Next to the QuickDocId label I have a Help icon. First, I tried this with the "Icon and Text Label" which sounded like the right control. However, I can't place the icon to the right. I then used a separate label and a separate icon and finally I found the Help Button in the library. But still, an "Icon and Text Label" with the icon to the right of the label (for example, as an entry point for a tooltip, or to indicate a required field) would be a useful option.

* Spanning multiple columns shouldn't be too hard, should it (from a user perspective that is)? Isn't that a matter of leaving out commas? E.g. consider for example this:

One, Two, Three
,,
Span Last Two,
, Span First Two
Span all

Each text component indicates a cell, and each comma means a column split. The first row would create three columns. The second one has three columns which are all empty. The third one has a filled first cell followed by an empty span of two columns. The fourth has an empty first cell followed by a span of two with some text and the final example has a row span of 3.
Just an idea; I am sure I am overlooking some more complex scenarios and edge cases.

* Toolbar: take a look at figure 4 of this review. It has a toolbar with some behavior: some buttons, a drop down list etc. Being able to configure those without creating my own panel with sub controls would be handy, especially when mocking applications where behavior can be detected by looking at the controls. Same goes for a Ribbon interface that starts getting more popular.

* Lorem Ipsum. Makes sense; although I still think it looks a little odd... ;-)

* Programmability: yeah, I see and appreciate your point. I understand other products that do offer this are going to be much more expensive, and much harder to use. Personally, I think Balsamiq is addressing a market that doesn't necessarily need this with an excellent balance between price and functionality. Yet, since I am reviewing multiple products, I had to include it in the list ;-)

Cheers,

Imar

Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the QuickDocId of the document.

For more information about the Talk Back feature, check out this news item.