Architech Solutions

Review: Balsamiq Mockup, the Screenshot Mockup Tool

John Tobin | February 20, 2009

Balsamiq Mockup is a screenshot mockup tool, designed to allow people who might not be competent with graphics programs or people who aren’t particularly creative from a graphics design perspective to communicate their needs or ideas for software user interfaces and layouts. I used the tool over the last couple of weeks to create a couple of screenshot mockups and to communicate some ideas I’ve had at Architech for a piece of demonstration software relevant to our Web 2.0 and Information Discovery practices. Here’s my review of the tool.

If you’d like the skip the details and would just like the executive summary, here it is: Balsamiq Mockup is an excellent tool, well designed, well put together, and almost perfectly suited to the task for which it is to be used. The icon for Balsamiq Mockup is a little smiley face. Your face will be smiley too once you use this tool.

It’s rare that I really like a piece of software. Very rare. So there it is.

If you’d like to know why I think this software is so good at what’s it’s for, and where the software has room for improvement, please read on.

Balsamiq’s Approach – and why it works

Balsamiq Mockups is not designed to put together a clear graphical look and feel for a piece of software (web based or otherwise). It’s not designed to show precisely how a screen should look and exactly how real estate should be used. It is designed to allow people to communicate about user interface elements in general terms. As such, the mockups that the software produces are ‘pencil drawings’, almost sketches, of the UI in question.

This approach works really well.

Mockup creators

People creating the mockups don’t get hung up on precise layout, graphical detail, colour, or being ‘pixel perfect’. The creator has made sure their ideas ‘fit’, in the sense that they’ve confirmed that there’s reasonable room to show the menu or list, the number of buttons, make sense, a particular graphic would be legible in the real estate portioned off, and so on – proportions of controls / widgets and information, essentially, are considered – a really important thing to do when brainstorming UI layouts!

With a tool like this, the creators of mockups could be anyone, including (and perhaps most importantly) the business users. It could also be a UI designer (their mockups would be followed more strictly in terms of layout and control choice) or just someone with an idea. A creator can markup and add notes to their mockup to more fully communicate less well defined needs or thoughts about the kinds of data or information being presented on the parts of the screen.

Mockup consumers

Consumers of the screenshots (such as graphical designers and software or web developers) don’t get dictated precise layout or even, necessarily, exact control choices and are given the latitude and freedom to apply their own skills sets appropriately to the creation of the real software. Instead, the mockup consumers focus on understanding the ideas of the creator, the kinds of information they’re trying to communicate, and the general style of the application. They’re paying attention to the needs and ideas of the mockup creator – which is exactly the kind of communication you want from screenshot mockup creator to screenshot mockup consumer.

The fundamentals

• Balsamiq runs on any platform that runs Adobe Air (it’s a Flash app) – that includes Windows and Mac

• According to the Balsamiq team, a web based version of the tool will be available soon, it’s in beta now (the trial is available online)

• It costs $79 for a full license (which means you avoid annoying popups and can save and export mockups to picture format). Balsamiq Studios is fairly liberal with these licenses however for non-profit groups, educational facilities and people willing to review or blog about the tool (that would include me, which I should disclose)

• It can export screenshots to picture format (PNG)

• It can be trialed for free online or on your desktop

• Check them out: http://www.balsamiq.com

Great usability

It’s easy as pie (if indeed pie is easy, I’ve never really understood that phrase) to create a mockup. And it lets you make mockups quickly – really important when you’ve a lot of them to do and lots of ideas to get across.

All the common user interface controls (or widgets) that you’re likely to want (dialog boxes, scrollbars, drop down list boxes, and on and on, even the cover flow control) are arrayed across the top of the screen, can be searched for, and are grouped into useful categories. Simply drag the control to the page and edit the parts of it that you can change.

Some controls have custom properties, like whether to show a scrollbar in a dialog box for example. These are all easily accessed in the controls toolbar that appears whenever a control is selected from the page.

This controls toolbar has been well thought out too. It’s far easier to use than most of Visio (which is usually far too complex for generating quick results, more on Visio below). Tools like grouping components, duplicating them, lining them up with others, locking them in place, layering them, and various others all just work, and they work on all the controls in the tool – and even on grouped controls (at least the many different kinds that I used). That’s refreshing, I like tools that just work as you expect and work every time.

I loved the way light coloured lines appeared when you move a component in the drawing – they indicate when the component lines up with the top, bottom, or side of another control in the drawing. The Visio version of this never seems to work so well.

Duplicates of your current mockup can be made at the click of a button (no copying files or ‘save as’). This is great for showing changes to a screen or interface in different conditions.

Aligns with agile development

At Architech, we often use agile development processes and methodologies such as Scrum with our clients. A tool like Balsamiq mockup aligns perfectly with the goals and ideas of this kind of process. Scrum is about getting across the ideas and needs of the business or the owners and users of the piece of software to the developers of that software. It’s not about religious, detailed requirements planning, all done well before you ever write a line of code. It’s about understanding the reasons the software is being built, what it’s supposed to do normal">for the user, and then starting to build pieces of it so that the business owners can determine if the reasons have really been understood. Scrum asks product owners to capture ‘user stories’ to describe their needs, stories which communicate what the software should be doing, for who, and why.

In this sense, a mockup tool like Balsamiq is a perfect fit. The tool is ideal to allow non-technical (and technical) users alike to communicate ideas about user interface and information layout, and add notes about why this layout and information is needed. Scrum experts specifically recommend using tools like sketches to communicate ideas when capturing user stories. Balsamiq is a great way to stick to the spirit of sketching, but to capture those sketches electronically.

What about alternatives?

This wasn’t a research article on mockup tools, or on tools suited to Scrum, and I really didn’t look for any in particular. I stumbled across Balsamiq as a referral from someone a while back and thought it was well worth talking about.

One other tool I’ve had to use in the past, however, and that I’ve seen people frequently use, is Microsoft Visio. Visio is not good for simple or casual mockups. If you’re drawing software architecture drawings, infrastructure diagrams, conceptual drawings to show information flow or ideas, for example, then Visio is okay. It’s not great, but there’s not a ton of competition for it out there that I’ve see, and when it comes to being able to quickly mockup ideas for screens, it’s normal">really not good. Controls are to real looking, there’s not enough available (in the default install at least) and it’s no where near as fast to work with or as usable as Balsamiq.

Other great features and benefits

Integration

There’s plugins to enable integration with the Atlassian collaboration tools Jira and Confluence (here), and also with XWiki. I’ve not played with these features, but we use Jira here so I’m sure I will be. This will be very helpful if we decide to use this tool as a standard for mockups going forward in our agile processes.

Drawing format

One of the neat parts about Blasamiq, is that all the drawings are stored in a proprietary (but openly documented) XML markup file. Just like Microsoft office recently tried to do in office 2007. This does mean that the information in the mockups created can be read by computers, really easily.

Anyone could create software that pulls in this information – markup notes could be extracted as an example and stored in some kind of requirements or user stories wiki or database. Better still, anyone is free to build something that renders the Balsamiq XML differently. Someone could render the controls and elements more formally or with a different style (like skinning the mockup differently). Perhaps the UI designed takes over from the business and makes changes to more fully communicate the design. After these changes, the option would be there to present a different and slightly more formalized skin to indicate that the next level of consideration to design has been presented. A presentation tool could easily strip off markup (notes) from the display and only show the core user controls. A final possibility might be that the XML could be parsed and use to create an initial layout for a screen in a visual code studio. Obviously I’ve not tried this, but all this potential exists when file formats are readable and accessible.

Full screen view

I loved this feature, the ability to put a mockup on a full screen view. When you do this, a big blue arrow appears as a pointer. Great stuff. I could practically hear the collaboration meetings, ‘and here’, point, ‘is where we can put advertised links, but only if we make the map smaller’, point, ‘and move the legal links that were here’, point, ‘to here’ point.

Flexible

The Balsamiq developers seem to acknowledge that they might not have thought of everything a user wants. To that end, they’ve clearly put in an effort to make the tool somewhat flexible. Images can be imported (and with one click made to look more like a pencil drawing) in lieu of a missing control – and items can be grouped together to make more complex controls. So far, the team has been really responsive to my questions and can be contacted on Twitter (@balsamiq) and Facebook. They claim to add and deploy features in the tool that users actually ask for – novel idea!

Community

Mockups to go http://mockupstogo.net is a site Balsamiq has setup to share mockups. On the site are a few controls made of simpler widgets that can be downloaded (it’s where I got the source content for the screenshots above, thanks Michael Bourque). It looks like a fairly recent community, but there’s been a bunch of uploads this year.

Room to improve?

Every piece of software has room to improve. Some more than others. Balsamiq really seems to do the job, and where I couldn’t find a simple or quick way of mocking something up, I could usually find a work around. Here’s a few ideas, however, of some things that could be added:

• Canvas sizes: the idea that you can control the size of the space in which you’re working – just so that you can keep screen mockups proportioned to others in a series, for example.

• Remove bold text: The font used on controls seems to be in bold by default and I couldn’t figure it out how to turn this off – you can control text objects in that way, just not labels on buttons or tabs from what I could see (it’s useful to turn off for sizing purposes). In fact, it might be nice to have a little more control over fonts in controls generally, so I could have made some smaller buttons.

• Control over tag cloud: great control – but it would be nice to be able to somehow indicate to the control which would be the most popular words to show.

• Smaller icons: the icons didn’t go small enough for me. I wanted to create a small round button with an x in it – like you see next to words in a search interface to remove words from a filter list, and I had to fashion something by hand that could go small enough (in my mind, indicating proportions is a useful benefit of making mockups).

• Ability to create ‘real’ controls: might be interesting to open up the ability for users to code and create controls for the tool (that get added to the toolbar) – much like the plugin capabilities of Firefox.

• Lines and boxes: Just being able to draw a simple line, and a simple box would be great. Surprisingly, I only ever needed to draw a line once during my test, but it would have been really handy.

 

I’d love to hear any tips people have for using the tool. Has anyone done any work on re-skinning or reusing the XML output of this tool? Is the XML format clearly documented in XSD or similar? As always, please share your thoughts.

Filed under: Agile, Design