Balsamiq starts to show promise

Rapid interface sketching tool Balsamiq allows anyone to throw simple clickable interfaces together quickly. But if decides to become a professional tool for interaction designers, it still has a way to go.

I made this mockup in seconds

Balsamiq is a tool for creating rapid interface sketches. Due to skilful social marketing, its reputation is spreading fast.  And at $79.99 it’s a fairly cost effective bit of software.

Balsamiq has found a great niche. A growing group of folk in the web and software business understand that they should be sketching interfaces before implementation, but feel they “can’t draw”. So making a dedicated piece of software for them is a good idea. Integration with various enterprise collaboration tools makes another nice USP.

Sketch really fast

Balsamiq genuinely allows you to produce sketch interfaces faster then any other tool I’ve seen.  You can add a window, say, then instantly customize the thickness of the status bar, and title bar, and add or remove the maximize, minimize and close buttons. You can chuck in a tree control and quickly customize exactly how many folders it is showing and what each one is called.  Everything lines up automatically so it looks fairly neat.

You can also make scrolling pages and string them together into clickable demos. That means you can mock up a simple website clickthough in a few minutes. Balsamiq also captures some of the fun and creativity that makes sketching such a joy.  Clever!

A few widgets from Balsamiq's colelction

But then what?

There are at least three good reasons to create interface sketches and prototypes:

  1. To get new ideas and quickly explore and enhance them in design sessions with colleagues. Balsamiq is right at home here.
  2. To usability test ideas with target users. Balsamiq is close to being very useful here.
  3. To explain, persuade and demonstrate to other project stakeholders. Balsamiq needs quite a lot of work here.

As an interaction designer, I also need a tool to help me when interaction design projects get big and complex. Balsamiq isn’t yet great at handling large, complex mockups and helping you to keep all the pages consistent and up to date.

Usability testing

Balsamiq mockups could be great for cost effective, early-stage usability testing. The interfaces are quick to create, and they look messy enough to allow users to give negative feedback if required. But usability testing a Balsamiq prototype has three problems:

  1. Fullscreen mode features a giant blue mouse cursor that turns upside down and a giant hand cursor for hyperlinks. This is weird and distracting for a user to contend with during a usability test.
  2. The giant blue cursor disappears when you try to touch a scrollbar, increasing the weirdness further.
  3. Highly visible hotspots, that show user exactly where to click, and tooltips that tell you the name of the page you’ll get if you do click.  These features “give the game away” in ways that are counter-productive in usability tests.

For good usability testing, Balsamiq needs a few tweaks
What I’d like:

  • ordinary mouse cursors
  • more normal scrollbar interaction in fullscreen mode
  • an optional back button in fullscreen mode, for usability testing website mockups
  • invisible hyperlink hotspots – let me define how obvious a link should be

Explaining, persuading and demonstrating

User experience design is at least 50% politics, if not 80%.  That means that an artful UX designer will use visual communication methods in different ways to get different results.  One result is the need to persuade. When you’ve collaborated and researched enough, and you’re comfortable you’ve got a good solution, you need to persuade management and the dev team that your answer is right, and should be adhered to.

A good pen sketch has lots of credibility and style.  “Wow, I can’t draw as well as that – you’re clearly a pro.”  But Balsamiq uses very rough lines and the dreaded comic sans font. As Andy Budd pointed out, Balsamiq’s mickey-mouse/kindergarten style will call your credibility, competence and skill into question.

What I’d like: A range of widget sets – “artist”, “wireframe” and “shiny” to match the different needs of an interaction designer at different stages of the design lifecycle.

Handling big, interactive prototypes

Interaction design is about making things that change over time, in response to user and system activity.  One way to model complex interaction is to create a lot of pages and look at them in a sequence – a storyboard.  Powerpoint is good at this.

Balsamiq recently added the ability to hold multiple pages of interface open at once, and create links between them.  That’s a minimum requirement to be a genuine interaction design tool.  The trouble is, there is still too much overhead in creating new states/pages.  You have to create a new file, name it and save it before you can link to it.
What I’d like: The ability to create lots of pages in a single Balsamiq document and navigate and link between those pages using thumbnails, rather than having to give every page an explicit name.

You create many pages showing a particular complex control or layout, and then realize you need to update all instances of that control. It’s a pain. Fireworks handles this quite well. You can create a library of your own objects. Then if you change the master, all instances of the object that you’ve used in your document are updated too.

What I’d like:  A way to create custom libraries of master objects, from which you can create instances that update when you change the master.

Taking it even further, I’d like to move away from a purely flat page approach.  If we could create prototypes with real interactive widgets, you could cut down on the number of flat pages you need to create.  Examples:  Axure.  Fireworks is also close.  And watch out for Silverlight 3 Sketchflow.

What I’d like eventually: Interactive widgets. Pull-down menus that can actually be pulled down, tabs that can actually be tabbed, etc.

Whither Balsamiq?  ;-)

Now of course, Balsamiq may decide it doesn’t want to try to grow into the behemoth I’ve described.  It may be better for it to remain just a digital crayon for creating rough, disposable sketches, and with a few tweaks, very quick usability testing prototypes. That’s a great niche with money to be made.

But professional interaction designers will probably be happier using more powerful tools, to support them support them through the politics and complexity of large projects.  That, and actual crayons.

6 thoughts on “Balsamiq starts to show promise

  • May 8, 2009 at 10:05 am
    Permalink

    For something similar to Balsamiq, there is iPlotz. The “sketches” looks a lot more “professional” and it includes linking between mockup pages.

    At the moment though, Balsamiq has more options but I like the cleaner look of iPlotz. Unfortunately the demo is very limiting, inlike the approach Balsamiq took.

  • May 8, 2009 at 12:43 pm
    Permalink

    With all due respect for a great tool like Balsamiq Mockups, it is indeed obvious that you need a tool for more interactive wireframes and prototypes.
    I hope you won’t mind if I point you to this just released tool called FlairBuilder. It supports both master pages and highly interactive widgets: buttons, links, text input etc, they all are real widgets and not mere images. Beside these, it also goes for more pixel perfect wireframes so it definitely addresses a rather different range of the UX design/prototyping process.

    You may give it a quick try online at http://www.flairbuilder.com/demo

    Cheers,
    Cristian

  • May 8, 2009 at 6:30 pm
    Permalink

    Perhaps you might be interested in taking a look at WireframeSketcher. It’s another wireframing tool. The twist is that it’s a plugin for Eclipse IDE.

    WireframeSketcher supports master screens and you can easily build a library of reusable objects with that. The latest version also has support for storyboards which function much like what you’ve described.

    Using Eclipse you automatically get projects, folders, version control, etc – things that all other tools are reimplementing from scratch.

  • June 30, 2009 at 9:04 pm
    Permalink

    I was looking at Balsamiq recently and I noticed they are adding integrations with other online tools, so you can do inline/collaborative wireframing online (for e.g. atlassian confluence integration), which is great for slotting into existing processes/tools. Don’t know if other tools have the same approach/flexibility.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>