What's a Mockup For?

Back when I was at Microsoft, I participated in a couple of UI design competitions. Someday, I'll write about the one where we had 15 minutes to design an interface from scratch in front of a live audience. But, today, I'm writing about one where we had the luxury of a whole week to design an interface from scratch.

I was assigned, at random, to a team of four people, competing against three other teams of four people each. We were given the challenge on Monday morning and we had to present it to the entire group on Friday. I have to confess I can't remember exactly what the challenge was, but it was something to do with databases.

We had to analyze the situation to determine the key pain points, come up with an approach to address those pain points, design the user interface that would accomplish that, and create a complete presentation with showcased our interface and explained why it was the best possible solution. We had a decent, balanced team, with people with different strengths, so it was not hard for us to do those first few things. By Tuesday, we knew what we wanted to accomplish and we had sketched out a design on the whiteboard in my office. We were on our way! But, while many teams had artists, our team didn't have one. We'd seen some pretty slick presentations in previous weeks and we knew there was no way to pull that off.

We decided that our best course of action was to present hand-drawn interfaces, much like we had on my whiteboard. So, after trying a few different techniques, we ended up drawing pieces of the interface by hand, scanning them in and then adding text in PowerPoint. It made for a pretty effective presentation. It got our points across, but the drawings didn't look like we were trying to show off.

Recently, I ran across a tool designed to make UI mockups that captures the same spirit. It's called Balsamiq Mockups. This week, I needed to draw some UI mockups and I thought I'd give it a try. First the bad news: Balsamiq is not a perfect product. It has some interface flaws that make it clunkier to use than it should be. Case in point: rather than a toolbar or a fixed property pane, Balsamiq Mockups has a "Properties Inspector" which appears and disappears, moves around, and changes its content depending on what you have selected and where. When it first appears, it's basically a gray-on-gray mess and nothing in it is targetable until you move the mouse pointer over it. It's a bad attempt at interface innovation (and a bit surprising for a product for people creating interfaces).

But don't let the bad news discourage you. The fact is that it's a pretty good start. He's got a healthy set of interface elements, a good way of editing them quickly and efficiently, and a nice automatic gridding system that helps you lay out your interface elements. And, none of the flaws got in the way of my knocking out some pretty decent-looking mockups in just a few minutes, much faster than it would have been in the tools I use most frequently -- Photoshop, Illustrator, PowerPoint, or even just typing text (which is probably my most common mockup creation tool). The example below was done in about a minute. And the Balsamiq Mockups results accomplished exactly what I wanted to accomplish -- they let me play with my concepts and get my points across.


I'm hoping that the author (who refers to himself as "one guy in his studio") fixes some of the flaws and resists the temptation to make it into the next great UI design tool instead of a great mockup tool.

It's important to remember that a mockup is just that -- a mockup. It's not the final UI. There are times for pixel-perfect mockups and there are times for concept mockups. We already have some great products for the former; it's nice to see someone build a product around the latter. Now we just have to figure out when we should be using each tool.