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?
