in Prototyping

Some Thoughts About the Balsamiq Mockup Tool

There is, of course, a slight irony in that only a few days ago, I was writing about why I don’t use prototyping tools, and here I am writing a review of a prototyping tool. Well, not quite. I think Balsamiq is actually more of a sketching tool, partly because the artifacts generated from the tool don’t try to fool viewers that it’s a representation of the real thing. Some prototyping tools, particularly the higher end editions, pride themselves in being able to mimic the user experience of the actual application. Unless that simulation really truly mimics the actual user experience of the not-yet-built production version of the application, the feedback you get from users may actually be completely irrelevant. For that reason, I really like the Balsamiq approach of being overtly sketch-like, a constant reminder that this is an idea in progress, and an invitation to tear it apart as necessary.

Overall

Like McCain might’ve said, “the fundamentals of Balsamiq are sound.” No, but seriously, I think the fundamental concept of a light-weight tool with ready-made sketch-like widgets can be a very effective model for quickly roughing out and sharing ideas. Overall, I think Balsamiq is a tool with a lot of potential, and certainly a worthy competitor to Gliffy (or a complement, since Gliffy seems to focus more on diagramming.) In its current form (I was trying version 1.5), I think I’d definitely add it to my toolbox, but for reasons I list below, the times when it would make sense for me to use it would likely be narrow.

Access/Setup

Having to download an application like this feels a little old-skool. Seems like it should be possible to use the tool directly within a browser (and I’m guessing that’s something we’ll see in a future version.)

User Interface

Somewhat ironically, one area that really could use improvement is the user interface of the tool itself. The need to scroll horizontally to access widgets, for example, is simply not great. Additionally, a lot of basic UI issues, such as the affordances of the widget categories (both in terms of text size and “I’m-clickable” quality) really could use some work. The good news is that this is probably something that wouldn’t be that hard to fix. Here is quick mockup I created with Balsamiq of one possible idea for a redesign:

My proposed redesign of Balsamiq

My proposed redesign of Balsamiq (click image for larger view)

The main change I am making here: Applying a more standard application structure. Let’s keep the experimentation on the art board, and not force users to figure out the UI of the application itself. Additionally, I think the look and feel of the application UI should be obviously different from user-created sketch widgets – currently, it’s all a bit of a blur.

Actual Drawing/Sketching

Not being able to just draw freeform is almost a show-stopper for me. This just seems so fundamental to the idea of sketching, and becomes particularly critical for a tool like this, in which (as I discussed in my earlier post about prototyping tools) you will inevitably and possibly quite commonly need to add something for which there simply is not a good ready-made widget.

Sharing/Embedding

I wasn’t able to try sharing or embedding the tool, but from my experience using Gliffy with Confluence, if Balsamiq is anything like that, I think that definitely adds value to the tool.

Widget Library

I found the organization of widgets confusing, seeming to always be clicking between the Layout and Containers categories or whatever, hunting for the right widget. I think the ability to toggle a full-screen gallery of widgets might be the way to go. Also, despite being at the top of the page, the widget search feature is not obvious (possibly an affordance issue due to the lack of a search button.)

Paper Prototyping Template Maker?

One great use for this tool would be to create paper prototyping foundations. In other words, one would perhaps produce an application wrapper, and then print multiple copies of that to then physically draw application sketches.

Feature Wishlist

Some things I’d like see in Balsamiq (aside from freeform drawing) is the ability to define my own favorite widgets. Additionally, I’d like to be able to upload widgets I’ve created in other tools and not only add them to my library, but also post them to a community library, in which I would be able to browse widgets created by others. I also think the sketch pad background is cute, but not very practical. Would want to be able to turn it off, or create my own sharable background, such as a browser window shell.

Overall, I think Peldi and the Balsamiq team have done great work. Keep it up!

  1. Tea leaf photoshop’s UI is my suggestion.
    Also can the canvas be unlimited in size. That would help mucho amounts

  2. Hi Peldi – glad to see you found my feedback useful!

    Re. use on the web, I think the issue might be that it simply is not clear how to publish to the web or edit online. Perhaps this had to do with the version of B’iq I was using?

    Re. actual drawing/sketching: I think I just want to have a pen and eraser tool to be able to sketch quick custom elements, such as just adding a circle or an X or a line here or there. Drawing something in Illustrator or whatever, I think would be too time-consuming.

    Re. sharing/embedding , I think it would be good to generate a JS/Html snippet that one could plop into any web page.

    And yes, Quick Add definitely needs to be made more prominent.

    But as I said before, I think you’ve done great work with this tool – keep it up!

  3. Anders, thanks SO MUCH for the review, it’s just what I need in order to make the product better. Lots there so let me try to go through it:

    Re Gliffy: the Gliffy guys were my inspiration as a small “web office plugins” company, and I certainly think our offerings are complementary. They are a much broader tool which can be used for many types of diagrams, Mockups is extremely focused on GUI sketching.

    Access / Setup – you CAN use this on the web. Both in “demo mode” on my site (which is fully functional but with a nag every 5 minutes), and as a plugin for Confluence, JIRA or XWiki. The Desktop version is designed for when you are offline, or if you like to save your data on your hard-drive, old skool! :) Plus the Desktop version supports more keyboard shortcuts than the web versions and is a bit snappier, so you might want to edit offline then export/import into the web version for collaboration. A purely SaaS version of Mockups (subscription based) is not available at this point in time, I’m still on the fence on whether to offer it or not.

    User Interface – I know, I need some skinning love for the affordances…I’m not a great visual designer…that said, I am pretty happy with the structure of the app. I agree that the library might fit better to the right, and that the tabs might look better at the top. Let me try it out.

    Re: my UI blurring in the mockup’s UI, is it because of my use of dark gray? I cleaned things up a bit since your review, with a more consistent use of blue for highlights in the chrome (green is now reserved for the mockup).

    Actual Drawing / Sketching – can you tell me a bit more about what you’d want to sketch? Are the Arrows, Curly Braces, Scratch-Out and other controls in the Markup category not enough? For custom widgets, why not draw it in Illustrator/Photoshop/paper and pencil and bring it in as an image? Those tools are certainly better than what I could build for free-form drawing.

    Sharing/Embedding: yup, look at the videos of Mockups for Confluence, JIRA and XWiki on my site for examples of people collaborating on GUI designs with Mockups.

    Widget Library: so sorry you didn’t catch the power of “Quick Add”. It obviously needs to be highlighted / explained better – it’s not a standard search, it’s more like Spotlight or Quicksilver. It’s really powerful, for instance I work with the UI Library hidden at all times (View Menu), and only use Quick Add. I have a few ideas on how to improve the design to make this more clear, stay tuned. Thanks for forcing me to take another look at it!

    Paper Prototyping – yes! And now with 1.5 you’ll have a built-in “Print” support, streamlined! :)

    Community Library – I’m working on it with the help of a few customers, stay tuned.

    Sketch Pad: you can hide it today (View Menu)!

    Thanks again for the feedback!
    Peldi

Comments are closed.

Webmentions

  • Peter Van Dijck’s Guide to Ease » Blog Archive November 12, 2008

    […] Anders writes a good review of the Balsamiq mockup tool. […]