Review of Balsamiq Mockups for Wireframing

In this post I share my hands on experiences with Balsamic wire framing mock ups tool through detailing some of the pro’s and con’s I have encountered.

Whilst my experiences with Balsamiq Mockups focus on software development use cases, the tool is flexible and multipurpose.  As ever, feel free to share your own experiences and tips via the comments below

Pro’s

1. Simple and clean interface.  As shows, Balsamiq’s interface is minimal and clean.  It is best suited to working on a larger monitor – to realise the full potential of the software I recommend a 19+  inch monitor.  The main part of the screen is dedicated to the wireframes, with a dockable User Interface (UI) library (at the top) and dockable file browser (at the bottom) for easy access to other open mockups.

2. Ease and speed of creation.  The Balsamiq tool is really easy to pick up.  The tool comes with an inbuilt UI library of components (see Image 2) which can be dragged, dropped and layered to create any complexity of interface design.  Components can be locked into position to avoid accidentally moving them and can be grouped for ease of moving and duplicating.  While the components lean towards webpage and software application design, they could be used to mockup anything – e.g. badges, questionnaires/forms, diagrams, etc.  This tool is ideal for business analysts and people working in an Agile way – enabling quick modelling of requirements and an iterative approach to design.

3. Markups.  Markups are a way to annotate a mockup in Balsamiq.  Example markups include post-it notes and callouts.  These are useful to overlay additional design information, such as order of intended interaction or interaction notes.  Markups are saved as a separate layer, and can be turned on and off with using the icons to the top right of Balsamiq (see Image 3). Markup could be useful for making notes during a user experience review.

4. Exportability.  Balsamiq provides a host of export options for sharing (see Image 4).  The option I use most option is to “Export Image to Clipboard”, where I then paste the image into a Powerpoint deck.

5. Extendible and reusable.  While the default set of UI Library components will enable you to create fully functional mockups, Balsamiq does not assume that it can provide all of your UI needs out of the box.  Aggregate components can be created using UI Library components and custom icons, and then grouped and named.  Named groups can then be converted to new Symbols which appear under the “Project Assets” tab in the UI Library (see Image 5) and can be reused.  Converted symbols are powerful components – enabling inheritance and changes in one place – allowing templating for often used components.  In addition to custom symbols, Balsamiq hosted MockupsToGo connects a community of users enabling them to share their custom symbols and components to enable others to extend their UI Library according to their mockup requirements (see Image 6).  One such library used by XAP is the Twitter Bootstrap components – which is a UI library used in the portal.

6. Simple yet flexible.  Balsamiq is easy to use and dynamic enough for simple page flows – giving end users a feel for what they should expect without getting hung up on the detail (e.g. flashy graphics and colour).  This enables a quick and agile speed of delivery for mockups – for example removing all the intricacies of cross-browser formatting and distraction of colours and fonts through producing a simple sketch style image that focuses on data, layout and interactions.  Components such as the data grid (table) have numerous advanced formatting options: such as column widths, text alignment, row heights, row shading etc.

7. Stable. One feature I was pleasantly surprised to see was the stability of Balsamiq.  A quiet, unassuming autosave feature paid dividends when my PC unexpectedly crashed.  Post PC restart Balsamiq autorecovered the file losing no changes between the last save (an hour previously) and the crash.

Cons

1. Time to create reusable, complex components.  There is a one-off overhead when creating complex components, particularly if you add/create custom icons.  That said, for mockups with reusable components (e.g. website header, application menu, navigation bar) this overhead should be seen as an investment where by altering the component can then be done in one place and inherited in all mockups using it.

2. Limits to complex customisations.  When creating advanced and detailed mockups it is possible to find limitations in what you can express using the default components in Balsamiq.   In these cases I tend to draw new components from scratch – e.g. advanced tables.

3. Interactivity of components.  Alternative wireframing tools such as iRise enable interaction with components in mockups.  For example a drop down select box would be functional and clickable when the mockup is run.  Balsamiq’s lo-fidelity approach means that while such components can display different states (e.g. open/closed), they are not interactable.

4. Lack of iPad application.  A tablet application would provide the ability to create, review and adapt wireframes in front of stakeholders and users – providing a tactile and interactive approach. If Balsamiq can capture the functionality and usability of their desktop app on a tablet app then life as a user experience designer would be much simpler.  Alternative wireframing tablet apps exist – for example mockups.me – that said, in my experience mockups.me is a cheap imitation of Balsamiq with limited functionality.  An official Balsamiq iPad app is on the Balsamiq team’s roadmap – but no dates have been shared for this.  For now Balsamiq is focusing on its subscription, web based myBalsamiq product.

Gallery

[su_custom_gallery source=”media: 147,141,146,142,148,149,145,144,143″ title=”always” width=”200px”]

So how do these pro’s and con’s match up with your experiences with wireframing, and in particular with Balsamiq?  Are there other neat features that I’ve neglected to mention above?