My First Impressions of Balsamiq | April 24, 2009

I recently received a wireframe from a potential client outlining their plans for a new homepage, which in itself was pretty impressive. It showed that the client had knowledge of the industry as well as a good understanding about the importance of planning.

To produce this wireframe our prospective client had used a relatively new tool called Balsamiq, which aims to capture the sketchy nature of hand drawn wireframes with the utility of a GUI application. On the surface this seems like a really good idea and it obviously allowed the client to produce something relatively quickly with little or no prior experience. As such, I think a tool like Balsamiq does have a place in the non-professional market. However I think the tool has a number of fairly fundamental problems.

First off is the styling. As I mentioned Balsamiq tries to capture the sketchiness of a hand draw wireframe by using artificially wavy lines, comic icons and hand drawn fonts— in this case Comic Sans.

As a designer my initial reaction was one of horror, as it should be when confronted with the use of Comic Sans on anything other than a children’s party invite. Obviously I’m being ironic here, but Comic Sans is an incredibly ugly font that offends most designers aesthetic sensibilities. That being said, I understood the logic so didn’t judge the app on it’s choice of font alone.

The logic is obviously to make the wireframes seem hand sketched so people don’t become too obsessed by the visual representation and focus on the content, hierarchy and functionality instead. Unfortunately the design for me had completely the opposite affect. Instead of feeling rough and hand drawn, these wireframes felt incredibly stylised — just not in a good way. In fact, rather than saying “sketch”, they said Fisher Price to me. It was as though the whole cast of Sesame Street had given up their day jobs to start careers as UX designers. I literally had images of Big Bird sitting down at his desk and designing “My First Wireframe”.

For a tool that’s supposed to communicate ideas in a clear and concise manner, this initial reaction was large and overpowering. However I struggled through, assuming is was just my own designer biases getting in the way. Sadly, the problems didn’t go away.

The stylised lines and boxed added an incredible amount of clutter on the page, while the typography proved jarring and uncomfortable to read. Even the small details like images or form elements were annoying and vied for attention. Try as I might to ignore the design and focus on the content, it kept forcing it’s way into my consciousness making the wireframes almost impossible to consume.

While a sketched line on paper feels organic and natural, unless done incredibly well it feels artificial on screen. We all know that computers are much better at drawing straight lines than sketchy ones so the whole concept felt like artifice, like a jarring attempt to recreate something natural in one medium that is completely unnatural in another. Like an uncanny valley of UX design.

Apart from the design hindering rather than aiding the comprehension of the wireframes, I think the designers and some of the champions of the tool may have missed the point of sketched wireframes. Possibly even developing a fundamental attribution problem. A UX equivalent of cargo-cultims.

There is something very natural about using hand sketched wireframes. They are incredibly quick to produce and destroy. The quality of the lines give them a human feel and, most importantly, a shared vocabulary. We all know what we’re looking at with a sketched wireframe. There’s no artifice, no duplicity and no stylisation getting in the way. They’re pure, unadulterated wireframes, just the way nature intended. However their sketchiness is a natural artefact of the drawing process. It’s not the point of their existence in the first place. In an attempt to recreate this sketchiness I believe the developers of Balsamiq have missed one of the fundamental purposes of wireframes — to communicate.

The purpose of a wireframe is essentially threefold.

1. As a visual tool for exploring content, hierarchy and interaction problems.
2. As a tool for sharing and communication possible solutions to stake holders.
3. As a tool for envisioning and testing the proposed experience.

Now I fully believe that the first purpose is the most important and that wireframes should be used as an ideation tool before a communication tool. So if you’re happy with the style of Balsamiq and it doesn’t inhibit your problem solving skills, then feel free to use it to work out your interaction problems. However I find that real sketching on pen and paper is much more efficient here, and it’s a nice excuse to get away from the screen for 5 minutes.

If you’re using wireframes to communicate information, I personally believe that the visual clutter of Balsamiq gets in the way and is a hindrance to comprehension. Instead, clean lines and simple typography fade into the background and allow the person using the wireframes to focus on the content and meaning rather than the presentation. As such, if you feel the need to use a GUI application, tools like OnmiGraffle are perfectly suited to this.

I’ve heard people say that clients get confused with wireframes, thinking that they are actually the final designs. In fact this is one of the reasons people suggest the sketchy nature of Balsamiq. However I don’t think the problem is in the tool, but than the way you use it. If you create extremely high fidelity wireframes using OnmiGraffle that look designed, and then don’t walk your user through the process, of course there’s a chance they’ll get confused.

I’m not a huge fan of OmniGraffle or Visio wireframes either, but that’s got nothing to do with the tool. I just think they are a bit of a halfway house between sketched wireframes and a fully interactive prototype. We occasionally use them but more often than not we’ll start with hand sketched wireframes and then move onto HTML/CSS wireframes if we need to envisage or test complicated interactions with real users, which is actually quite often.

The last problem I have with Balsamiq is also to do with it’s stylistic treatment, although this time it has nothing to do with comprehension. The wireframes produced by Balsamiq looks cheap and amateurish. This is obviously just presentation biased, bit I find it difficult to take any User Experience developer seriously if they present wireframes that look like they were developed by an early learning tool. Furthermore, I imagine a good swath of clients would feel the same way. In a time when we’re trying to build up the integrity of this profession, I wonder if tools like Balsamiq actually do more harm than good?

Posted at April 24, 2009 2:26 PM

Comments

Abhishek said on April 24, 2009 2:43 PM

IPlotz seems like a better option

csleh said on April 24, 2009 2:43 PM

side note - an image would be helpful.
The balsamiq samples seem rather heavy handed, hitting you over the head “I’m a wireframe!!”. If they just made everything a gray tone and made lines .5 or even 1 point it would be much easier to focus on the content. Which is supposed to be the point, of course.

Robert Castaneda said on April 24, 2009 2:47 PM

You raise some good points for the product to be more appealing to the professional wireframing market.

My experience with the Mockups tool is only positive, especially because the primary user of the tool is not a professional wireframer and is one that would normally struggle to communicate any aspect across to a technical team and usually only contribute a paragraph of text and lots of opinions later on.

Having a customer know what they want is one of the biggest challenges in IT - Mockups aids the user to know what they want.

I don’t think it is meant to be the Enterprise/Creative Suite version of a Wireframes tool (at least yet, anyway), hence why it is called ‘Mockups’ not Visual Wirefarmes pro++.

Chris Parsons said on April 24, 2009 2:47 PM

Hmm. Maybe Balsamiq offends a designer’s sensibilities, but I’m not sure I’m convinced that they distract non-designers in the same way. Many pure development shops without specialist designers seem to love and use Balsamiq a lot.

Agree about comic sans though, there are plenty of better ‘sketchy’ fonts.

Balsamiq mockups have the advantage of being fast to produce, and very easy to share electronically. If I’m in the same room as a client, I’ll use a whiteboard, but if not I find it’s easier to throw out a balsamiq mockup than to sketch + scan + email.

I don’t use it often, but I do think it fills a decent gap. Can understand you not wanting to use it though, and thinking about it if I got sent balsamiq mockups from a pro UX/design shop I would be a little surprised.

-Chris

sil said on April 24, 2009 2:51 PM

I assume their idea with Balsamiq was to do something like the napkin-theme people did for Java apps: http://napkinlaf.sourceforge.net/. This was done squarely to address your point above of clients not understanding that wireframes are not the finished product. The napkin stuff doesn’t have the Fisher-Price feel, at least; I wonder if a web tool that takes that sort of approach might be better?

wandster said on April 24, 2009 3:00 PM

advantage of napkin sketches is that it’s a quick way to scamp up the designs whilst keeping that rawness of a work-in-progress.

example scamp at http://blogs.conchango.com/richardwand/archive/2009/03/04/sketching-user-interfaces.aspx

donna said on April 24, 2009 3:02 PM

This is a really good post and I think nails some of the reasons I’ve never used this type of tool, despite lots of pressure and lots of people asking about whether I use it for my design process.

I have two really distinct phases when I do any design work:
1. thinking ideas through
2. writing them down

In phase 1, I really don’t care what I use as long as it communicates the ‘hey, what do you think about this idea’. It may be drawings on a whiteboard or rough ideas in something like balsamiq (though I have not used it).

In phase 2, I really care that the detail in my head is translated into detail in the developer’s head. And doing that with wobbly lines and silly typefaces is just not going to work.

Charles Roper said on April 24, 2009 3:11 PM

I think you hit the nail on the head when you said “However I don’t think the problem is in the tool, but than the way you use it.” You only have to look at some of the wireframes on http://www.mockupstogo.net/ to see it used well. To me, some of the stuff here looks great, for wireframes. It would be interesting to hear what actual clients think of the wireframes Balsamiq produces.

For me, as someone who has been building websites for the best part of 14 years, it’s a perfect fit and something I’ve been looking for for a very long time. I’ve never liked using full design tools to do wireframes and I absolutely loath using pen and paper. Truly, I hate it. I very much like to push elements around, tweaking them and working by feel. If I try to do this on paper I find it monumentally slow and inefficient - I have to keep starting from scratch for every change! Ugh! Something like Balsamiq fits my needs and, for me, I don’t think it either unprofessional or damaging in any way. Quite the contrary if it helps me get my work done faster, more efficiently, and more enjoyably, then I’m all for it. It’s a case of horses for courses, I guess.

To my eye the wireframes don’t look cheap or childish (provided you change from Comic Sans to, say, Tekton), but that’s purely subjective and, besides, surely what matters is what the client thinks in this regard?

Interesting discussion, though, whatever your viewpoint.

Peldi said on April 24, 2009 3:17 PM

Andy! First of all thank you for moving the discussion over to your blog, Twitter was definitely not up to the job.

I also want to thank you for your feedback on Mockups, it’s exactly what I need in order to make it better.

Let me try to address some of your points.

First off, Comic Sans. I don’t like it either. I spent many hours trying to replace it with another font (see http://www.balsamiq.com/products/mockups/support#comicsans for the full threads), and right now I offer users of the Desktop version a way to switch it with any other font of their choosing, but if you read those posts you’ll hopefully agree with me that I have no other viable option at the moment. Flash Player 10 includes much better font embedding capabilities so I plan to switch to a different font when enough people have it installed for me to require it, hopefully by the end of the year. That said, I believe that in the same way that details have no place in a wireframe, the font choice shouldn’t really matter in them as well.

Next, the Mockups skin (which is BTW based on my wife’s hand-drawings). We have three goals, which I think you’ll agree with: remove detail, encourage feedback and encourage iterations.

To remove details we use thick lines because that way you won’t have room for too much detail (see http://www.37signals.com/svn/posts/466-sketching-with-a-sharpie for instance).

To encourage feedback we use hand-drawn elements which were intended to look “rough”, not stylized or like Big Bird drew them. Maybe it’s because I don’t have a trained eye, but when using Mockups I don’t get distracted by the look of the elements…which parts of it exactly grab your attention so much? If anyone reading this can send me some annotated screenshots I’d love to see them!

The point here is to offer a look that no-one is afraid to criticize. Mockups is almost as fast as paper and pencil (I’ve been told it’s faster for some tasks), and is designed for all those times in which you cannot sit in the same room and use pencil and paper (like in the case of your client doing some initial brainstorming on their own, for instance). Wireframes created with Mockups should also feel like “they are incredibly quick to produce and destroy.” I will be sending you a license for Mockups for Desktop for you to try, hopefully you’ll agree that at least they are fast to produce.

As for the stylized look, I actually don’t mind that the app has a little character. I think it’s part of the reason so many people think that Mockups is fun to use (http://search.twitter.com/search?q=balsamiq+fun), and I think it serves a purpose: if the app is fun people will spend more time on their wireframes and hopefully iterate and produce better results. Also, Mockups was mostly designed for non-technical users, people who don’t already use Omnigraffle, Axure or other tools.

I think the issue is that while I designed mockups mostly for brainstorming, some people use it for project documentation as well. For that, I agree that a cleaner, more streamlined skin might be needed. Unfortunately I cannot seem to find a proper skin that IA / UX experts all agree to be “IT”, the best one (Konigi’s excellent Omnigraffle stencils are the closest thing I know about: http://konigi.com/tools/omnigraffle-wireframe-stencils). I would love to see some of your wireframes, or anybody else’s for that matter. They are really hard to find on the web. If anyone is proud of their wireframes and is willing to share, please oh please email me at peldi@balsamiq.com, I promise not to share them.

I have to run out but once again thanks for this post, I enjoy this discussion and everyone’s comments.

Peldi

Derek O'Brien said on April 24, 2009 3:39 PM

As a lecturer in multimedia specializing in web design/dev.

I find balsamiq good as a tool to interest students in wireframing, especially students who would rather boot up some software than pick up a pencil. What I find is majority of these students often swap to pencil and paper soon after on their own accord since working with a pencil is quicker and they can add features the software don’t offer.

Reverse psychology, so bonus!

Ali said on April 24, 2009 3:49 PM

I usually use SmartDraw for wireframes but for a quickie, balsamiq is most excellent (no scanning required)! Clients love it and I do love the post-it notes…. the faux sketched style works for me - says it’s just an idea.

Philip Morton said on April 24, 2009 4:06 PM

I use Balsamiq Mockups and I find it extremely useful. If you treat it as a tool for doing initial sketches that you can share easily with others, then it’s fine.

The comic style stops you from getting too carried away with the details. Sure, it uses Comic Sans, but in the context of a sketch, I don’t think it’s too much of an issue.

Best of all, the people that make up Balsamiq are awesome. :)

Andy Budd said on April 24, 2009 4:31 PM

Robert Castaneda — Nobody is suggesting that Balsamiq should be a pro tool. However there is a big difference between a tool for amateurs and an amateur tool.

My main point was about the negative affect your chosen presentation style has on the comprehension of your mock-ups. As such, the ability to choose a different style would fix most of those.

Charles Roper said on April 24, 2009 4:41 PM

Forgot to mention: I think saying ‘Comic Sans is an incredibly ugly font that offends most designers aesthetic sensibilities’ is a little harsh. It would be fairer to say Comic Sans is a terribly abused, overused typeface. As comic-style fonts go, it’s actually pretty well designed ( by Vincent Connare ) and quite appropriate in the right context (it would almost never be my first choice if I needed a comic font, however). Contrast that to Arial which really is a nasty knock-off of Helvetica. Now that’s an offensive typeface. ;)

AJ said on April 24, 2009 5:47 PM

I’ve played around with it; it looks like an interesting idea, but the Adobe AIR interface absolutely gets in the way of using the product. I’m not a fan of the “big horizontal element browser” at top with less than useful icons and those fade-in/fade-out contextual menus.

In the end, is it anything you can’t already do with InDesign and a well-designed library, that lets you drag-and-drop UI elements onto, say, a standardized 960px equivalent grid? I’m finding INDD my go-to program for wireframing these days…especially since the EightShapes Unify template system was released.

Pete Shaw said on April 24, 2009 5:52 PM

Although maybe not the tool of choice for esteemed designers, I think this can be really handy for amateurs like me or Boag.

Peldi said on April 24, 2009 7:01 PM

Hi Andy, Peldi here from Balsamiq. In case you didn’t get my comment here, I also posted it on my blog: http://www.balsamiq.com/blog/?p=1240

Nathaniel Flick said on April 24, 2009 7:39 PM

I think you’re confusing web design, and graphic design in general, with interaction design. Interaction design is not about “look and feel” (eg. your comments about the ugly Comic Sans or the distasteful “hand drawn look”). Interaction design is about the interaction itself. Balsamiq is made for this purpose alone.

Read Bill Buxton’s “Sketching User Experiences” for a primer on Interaction Design as you need to understand this process in order to comment on it more effectively.

If you have used Balsamiq you know that you can change the Comic Sans to your “system font” which usually defaults to Arial; a pretty standard, run of the mill and easy to read font. A pretty simple answer to your concern, yes?

Also, any mockups you create in Balsamiq are designed to elicit reactions and responses (even yours!) so that an interaction can be further refined down the road as a hi fi mockup. The IxD team I’m on uses Fireworks for this task, not Balsamiq.

Your points would have been spot on if you’re talking about graphically designing an interface, with the look and feel completed. But your arguments are akin to blaming a car for not cooking eggs very well; they are out of context and lead you to erroneous analogies. You’re missing the point of Balsamiq.

Disclaimer: Yes, I’m a total Balsamiq fan-boy and my comments are partially colored by that. But I’m also drawing from 6 months of experience working with the software, and it’s been a godsend getting management and developers in line with Interaction Design, its principals, and how it can make software better overall.

Andy Budd said on April 24, 2009 10:33 PM

Thanks for the lecture Nathaniel, but I’m not confusing graphic design with interaction design. In fact I think I’ve got a pretty good handle on the difference between the two. I’d suggest you read the article again before commenting!

DannyT said on April 25, 2009 1:43 AM

Whilst I don’t share your same opinion, I do think you make some very valid points and it’s got me desiring a tool like Balsamiq mockups that produces cleaner, more professional looking mockups. Hopefully this is something we see in Balsamiq’s product in the not too distant.

However I do disagree with your point about Balsamiq Mockups doing more harm than good. Even taking on board your thoughts about the tool, if you take a wider look at how the product is being evolved and the openness of the company I would definitely say the industry needs more products like this. Near weekly updates to the product based almost entirely on customer feedback, openness and honesty of the successes and scale of the company and how the owner has completely embraced and addressed the community through email/IM, twitter, blogging and getsatisfaction are all commendable traits of an online business.

I don’t think you were implying anything against the company and merely solely questioning the value of the tool but I think it’s worth considering the potential of a tool inclusive of how it’s being managed and the company behind it when assessing a products worth.

Thanks for the insight into your assessment :)

Cristian Pascu said on April 25, 2009 9:51 AM

Although I do like Balsamiq Mockups, and have used it myself too for a while, I do have felt in a similar way: the lines are a bit too thick for me. I couldn’t have expressed the feeling better than you did.

A solution might be, as few others have noted, thiner lines and, I dare to say, the option of line colors.

For instance the borders of this comment when you hover it: The font color is slightly darker than the color of the border. I am not a designer but, IMHO, I think that wireframes, be it sketchy or not, will not suffer with these subtle touches. It’d take more time to create but where it really makes sense it will also result in better feedback.

On the other hand, the huge amount of people that like Mockups makes it clear that there is a market share that is not confused by the “horror” in the wireframes. On the contrary. This is why in the end, Peldi is the one that has to make the business decision on the path that Balsamiq will follow with this product.

As for interactive prototypes, it’s true that DHTML offers you the greatest flexibility. But beside the fact that is a bit more time consuming comparing with a tool like Mockups, DHTML also require the know-how which may not be a strong point for every UX designer. That’s way I created this tool called FlairBuilder, aiming for both ease of use and interactivity. There is still a long way to go with complex interactions, effects, etc., but as for the interactive feeling that HTML offers, I dare to say that I got there already.

Thanks a lot for your blog post. It was indeed a pleasant reading as well as an in depth view of a tool that have pushed the bar for rapid wireframing tool way up high!

Cheers,
Cristian

Louise Hewitt said on April 26, 2009 3:45 PM

Hi Andy,

Nice expansion on the Tweets.

You mention:

“I’ve heard people say that clients get confused with wireframes, thinking that they are actually the final designs. In fact this is one of the reasons people suggest the sketchy nature of Balsamiq.”

And I think this is essentially where any ‘styled’ wireframes, Balsamic included, are problematic. We understandably want our deliverables to look slick and communicate something about the professionalism of our own brand, but the style of the diagrams can become inseperable by a client from the communication of their brand through an interface.

‘Web 2.0-ey’ deliverables say one thing; linear, unshaded boxes another. This sketchy style says “fun” to me - like the comic sans it uses - which could be absorbed by a client as a message about the interface design. Fine if you’re building online games I guess, but not so good for academic repositories.

I think I’ll stick to lines and leave the shiny stuff to the cool kids.

Lou.

Kevin Dietz said on April 27, 2009 4:55 AM

I did this 2-part screencast with Balsamiq and Jing.

Click Here for Screencast

I don’t mind the look of Balsamiq. I kind of like it. It took quite a bit of patience, however, to piece all the screens together into a screencast.

A couple of issues with the screencast … the video is too large - I haven’t figured out how to get Jing to scale it down. And the volume is a little low. Turn up your speakers.

Steve Brownlee said on May 1, 2009 7:13 PM

Andy:

Thanks for sharing your opinion. While I completely disagree with you, I believe this article is doing great thing to increase the awareness of the Balsamiq tool.

As more people start using the tool, then constructive criticism can be generated to make it better.

You’re expressing an opinion about a tool as an expert in a specific field, but you need to realize that you are in a vast minority when it comes to people who need to create mockups for customers.

I believe it does a fantastic job for people who need a quick, easy-to-use tool to create mockups for customers who need to be shown how the proposed solution will work… not always how it will look.

Eoin said on May 10, 2009 12:40 PM

I enjoyed reading the article and the comments. I think morale of the story is to adapt your design approach depending on the client’s culture. Horses for courses!

Eoin

Kyle said on May 20, 2009 4:32 PM

Balsamiq, at first glance, looks pretty useful to me. I think I like the display and interface- though it isn’t as intuitive as I would prefer.

Thanks for pointing this out- I’m going to share it with cohorts from my online BS Web Design and Development class.

Appreciate your efforts Andy! Keep it up!

Rebecca said on May 20, 2009 11:30 PM

I’m a developer, and I love Balsamiq for quick mockups for my personal projects - I’m no whiz with graphic design tools, and I’ve no need to shell out big bucks for enterprise-level software, I have everything I need in Balsamiq.

Sure, it isn’t for everyone. But personally, I think it’s great. Portable, too.