In my current job, one of my roles is to take people’s needs and turn them into software. I’ve helped develop and evolve the software engineering process in my company over the last ten years, and I find it interesting that of all of the documentation we produce, the most critical artifact tends to be the mockup (a.k.a. the ‘prototype’, or ‘storyboard’, depending on what industry you come from).
On the importance of mockups
Mockups are crucial to building intuitive, relevant software for your target audience, and here’s why: when you’re brought in to design software, you begin by exchanging ideas, needs, scopes and budgets with your client. You spend a good chunk of time doing nothing but talking about objectives, stakeholders, features, and risks – and by the end of your analysis, your client believes that you know everything that you need to know in order to build what he/she needs.
The reality is, of course, that it’s not so simple. By the end of your needs analysis, you’ll definitely know a lot more about the client’s work and needs than you went in – but there’s a difference between understanding the gist of a person’s work and being able to do that work. Although you have an appreciation for the complexity of that person’s job, your software’s intuitiveness and completeness will be limited by your high-level understanding of the process and information the job involves (unless you come from that domain, naturally). Conversely, your client may have conveyed her needs to you, but she has no means to gauge whether 1) you’ve understood them or 2) you’re able to translate them into something intuitive to use.
This is where prototyping comes in: now that you understand the concept, you can start to design the interface that will be used by the client to interact with the system. If the design is good, it will reflect the underlying business logic of your solution. The client will therefore be able to gauge your understanding of her domain and comment on whether your design is intuitive and practical… or not. This avoids the cost and frustration of having to re-design your designing software based on misunderstandings.
Convinced yet? If so, allow me to share the name of a tool I’ve been using very happily: Balsamiq. I’m not affiliated to the company in any way – frankly, I’m just that impressed with what they’ve implemented. Worth checking out at any rate.
Balsamiq is not for designing graphical user interfaces, as one would with Dreamweaver, Eclipse or Visual Studio. It is specifically built to design mockups – there’s a difference. This is the kind of output you might expect from Balsamiq:
When people are shown realistic-looking interfaces, they tend to focus on fonts, colors and choice of image; and although these are certainly an important part of making the solution user-friendly and pleasant to use, those are easily changed later. When you show your prototype to clients, you want them giving you feedback on things like navigation, content and layout, because these are what will make the difference between something that will be used on a daily basis and something that will do the virtual equivalent of collecting dust in the back of the office.
It’s all about speed, speed, speed
The purpose of prototyping is to save time. You can create mockups with nothing more than a pencil and paper, so there should be a reason why you’re using prototyping software. I’ve found that with Balsamiq, I’m able to create prototypes at a fraction of the time it takes me to design the interface by hand (or using GUI designers like Dreamweaver). Not only that, but the interfaces are rich enough to be recognizable by the client – although you don’t want your prototypes to look too realistic, it’s no good if people spend most of their time trying to understand what it is you’ve drawn.
Balsamiq runs on most common operating systems. For those of you who use Ubuntu, you may be disappointed at first when you realize the Adobe’s dropped its support for AIR on Linux. Do not be discouraged! AIR, and therefore Balsamiq, can in fact be installed on Ubuntu 12.04 using these instructions: http://www.liberiangeek.net/2012/04/install-adobe-flash-reader-air-in-ubuntu-12-04-precise-pangolin/
Do note that Balsamiq also works very nicely as an application in Chrome and can be purchased from Google Marketplace. The benefit of using the Desktop version, however, is in the links you can create between markups: you can set up your mockups to point to other mockups and therefore make the presentation of your prototype more interactive.
If there’s anything you should take away from this article, it’s this: prototype. Your. Software. I’ve lost count of how many times I’ve presented a mockup to clients and they’ve said “I can tell you’ve understood; but this isn’t quite what I had in mind”. I consider this a happy problem – because the alternative is showing up after countless hours of development only to find out I’m going to have to scrap a lot of my work and start afresh. Prototyping is not only cost-effective because it mitigates risk of project failure due to silly misunderstandings, but it also reduces a lot of frustrations between you and your client.