Basic Wireframing Routine
Mockups are easy to do, and everyone understands them. This doesn’t mean that you’ll be fine no matter what you do. I, for one, have made many costly oversights in the years since adopting this approach. Thus, this guide was created to help prevent you from making the same mistakes in your own projects.
What I recommend is that you use a basic proven routine for your projects. However, there are several points that you need to understand first.
Mockups can be done by anyone.
Think about it. Mockups can be as simple as paper sketches. Also, while I don’t recommend sticking to pen and paper, this approach proves that you don’t need any technical expertise to draw mockups.
Several weekends back, my nine-year-old son talked me into developing a battle-card game together. To explain his idea, he drew me an interface for the game, and he was quite adamant about what needed to be where and why.
It’s exactly the same situation with your analysts or subject matter experts. With mockups, they can simply show you what they mean, rather than telling you and relying on and assuming a mutual understanding.
You can afford to throw mockups away anytime.
Since mockups can be done many times faster than code, you don’t need to stubbornly defend them. When there are flaws, you simply rework your mockups. It’s so fast, you can even start from scratch when needed.
Therefore, the logical strategy becomes using every shakedown opportunity you can. Instead of shrinking from objections, you actively encourage them until you make your “prototype” watertight.
With mockups, your customers can’t avoid getting engaged.
Involving a customer early saves tons of trouble, everyone knows this. Having that goal is all well and good, but it’s far from easy to accomplish.
Instead of spending days writing documents that no one really wants to read, you can sketch a number of screens in a matter of hours and get back to your customer with something that they will immediately understand.
Also, mockups tend to make communication productive and down-to-earth. Early in a project, this can be an unbelievable blessing.
Mockups are only a communication device.
Early on, the mockups are about the only thing that everyone can understand. However, just using the mockups is, by itself, no guarantee of success. What you actually do with your mockups is more important.
Here is the basic procedure of how you should go about it:
- Sketch several related screens; scenarios are a good choice.
- Discuss and annotate the sketches. This is best done in live workshops, along with your customer.
- Flesh out the details over several quick iterations. Don’t try to get everything “correct” from the start.
- Repeat the same procedure for the next batch of screens.
That being said, each step has its own traps.
Several Related Screens Make a Digestible Package
Customers have very little time to take away from their everyday tasks. For that reason, lengthy documents terrify them, as well as anything even remotely technical.
On the other hand, three or four mockups at a time won’t scare anyone and your customer will be genuinely curious about what you have come up with.
At this point, your main goal is to get your customers’ attention and cooperation.
One obstacle at the beginning is getting everyone on the same page. It helps if the mockups that you discuss are related. This provides an immediate context for your customers to dive in – no explanations necessary.
The best way to start is with several main screens of the application that you are developing.
The best way to start is with several main screens of the application that you are developing. This way, your context is the big picture. Your customers will therefore share their opinions on the most important matters, such as when they recognize that you are not aware of some part of their business process.
Later, you will want to switch the context to get more depth.
A good way to proceed is to focus on individual scenarios.
A good way to proceed is to focus on individual scenarios. This shows your customers how real people will eventually use the application, which will further attract their attention. It will also make their feedback productive and genuine.
Note that I use “scenario” here as a rather loose, catch-all term. They can be user stories, or use-cases, or a number of other things. It doesn’t really matter.
What does matter is to:
- Get and keep your customers’ attention.
- Start with a big picture, and dive into details later.
Use On-Screen Annotations
You create the mockups, discuss them with your customer and prudently write down anything important that you discover, but where do you write it down?
Right there on the screen:
- When you have a question, put it on the mockup.
- If there is a dilemma, write a short on-screen comment about it.
- When a decision is made, document it on the mockup itself.
- More research is needed? On the screen, write who will investigate the issue and report back.
As simple as it sounds, the implications are huge. When you make your annotations as a visual part of the mockup, they are hard to miss and even harder to ignore.
Mockups Should Be Quick and Iterations Short
Iterations are a powerful concept. Everyone knows that it’s hard to paint the wall perfectly in one go, but by applying two coats of paint, the task can be achieved by anyone.
However, that requires doing the same thing twice, or even several times, on software projects. Can you afford that?
With mockups, you can. They are exponentially faster than coding, as is any rework that proves necessary. That is the whole point of mockups.
Work in short iterations. That is the whole point of mockups.
Thus, plan for this in advance:
- Work in short iterations.
- Agree with your customer to plan two workshops for each batch of mockups.
- Hold several rounds of less formal discussions between those more formal workshops.
The more iterations you make, the better the results will be. Fortunately, many ideas can be discussed by phone or email: “Here is a new version of that customer-details screen. Is it better now?” These are your micro-iterations. You want to have as many of these as you need, so don’t waste time on perfecting mockups for any single micro-iteration. Instead, focus on testing your ideas quickly and getting immediate feedback.
- Check out my book “Mockups 101: Help Your Customers Understand What They Are Going to Get.”
- Leave a comment, I’ll be glad to know what you think.
- You can share this article with others. To do that, just use the social buttons below.