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?

Comments (27)

Conferencing part 2 - SXSW | April 1, 2009

Every year SXSW takes on a slightly new dimension so it’s never the same experience twice. Change is inevitable and I always have a good time at the event. However I always find myself harking back to years gone by. I guess that’s age for you.

This year attendance had grown by around 30%, and numbers fluctuated between 6,000 and 12,000 depending on who you spoke to. One things was certain though—it was big. With 20 tracks spread over three floors of the conference centre and expanding into the Hilton, SXSW obviously hasn’t been affected by the current economic climate. In fact I’d say that it’s probably benefited from it. After all, it’s pretty cheap for a 5 day event.

This year over 300 Brits attended, which was a big increase from the dozen or so who made it over in 2005. At times it was like a Friday down the pub in Brighton, being surrounded by so many UK friends. I’m not complaining, but I did find myself hanging out with the Brits far too much. I can now see why the San Franciscans always end up moving around in tribes. It’s not through cliqueness. It’s just very difficult not to, especially if you’re showing people the ropes for the first time.

The sessions themselves were predictably average, bar a few notable exceptions. Author and previous dConstruct keynoter, Steven Johnson, gave an impassioned speech about the state of the newspaper industry, mirroring my thoughts a lot more eloquently. The session from the Obama design team was excellent, not least because they mentioned using Silverback during the campaign. I also really enjoyed Nathan Shedroff and Chris Noessel’s talk on sexual interfaces in science fiction, aptly named make it so. The Zappos keynote was predictably good, as was Chris Anderson on the price of free. However the surprise stand-out this year seems to have been our very own Paul Annett, who gave a talk on design delighters called Ooh, that’s clever.

The Great British Booze-up was back for a third year, this time sponsored by Boagworld, NakLab and ourselves. It’s always an honour to see so many of our friends in one place so I’m just sorry I didn’t get a chance to speak to you all. As with previous years, the value of SXSW was more about the socialising that it was with the sessions. Speaking to the UK Trade and Industry digital mission the day before things kicked off I spelled this out, explaining that SXSW was a place to meet people and make long term connections rather than sign deals. That being said, SXSW was a lot more businessy than previous years and was awash with social media consultants peddling their wares.

Cogaoki was my favourite party, followed closely by the closing shindig from the guys at Media Temple. I also had a fun evening out on the RVIP Bus which was strangely sponsored by by fellow panel members. Definitely a novel way of driving people to our session, although I’m not sure how much affect it actually had.

SXSW for me is always about seeing old friends and making new ones. It really is the Glastonbury of Geek. Big, noisy and overwhelming, but nevertheless fun. Each year I say I probably won;t go back the next year, yet 6 months later I can’t wait for March to come round. Let’s see what happens in 2010.

Comments (0)