What is a Wireframe?
By now, I’ve mentioned wireframes a bunch. It’s time to explain what they are and what they are good for.
So that you know, I’m opinionated about wireframes. There are lots of ways to use wireframes. I use them the way that I do for a particular set of reasons. And I do not deviate from that methodology. In my experience, the way that I do it works for me. Individual results may vary.
What is a Wireframe?
A wireframe is a low fidelity representation of the thing you are trying to build so that you can test it with users. It is the next step beyond paper prototyping.
Why do I use wireframes?
They are cheap. Its a quick and easy way to find out if what I want to build works as a concept. Because they are “sketchy” by nature, they are easy to change and keep the discussion about function, not color or typography. Finally, with modern tools, it’s easy to collect feedback and keep it organized so that I don’t forget what I’m learning.
Here are the keys to a good wireframe.
- It must be as functionally complete as possible
- It must be low fidelity
- It must be accessible based on its context
- It must be easy to communicate about
Yes, some of my requirements are about the tool, but that plays an important part. To not bias anyone, I’m not going to tell you what I use, email me directly to find out. Instead, I’m giving you this explanation so you can see what the tool you’ll end up using should do.
It must be as functionally complete as possible
A wireframe must include all of the functions that you want to build. Including logins, account views and the final functions of the application. Include all of it so that when you develop your wireframe, the tool is clear to your users. If you leave it out, I guarantee that your users will ask you about it and then you will end up having to pretend. So make sure you include all the features so that you can have complete discussions with your users.
Know that you will end up filling in what you hadn’t thought of. Know that there will be a moment where you realize you have to add more into the wireframes based on feedback.
It must be low fidelity
If it looks too nice, you’ll be answering questions about color and typography. Those will have to come later. Right now, you want the user to focus on flow and function. How does it feel to use this amazing thing you are building? So, the lower the fidelity, the better. I like tools that use almost silly line art to represent things like buttons, form fields and the like. If you can’t stomach that, no worries. Make it look pretty but use all grayscale.
Keeping the conversation about the flow is so much easier when the flow is all you are looking at.
It must be accessible based in its context
If you re building an application that will work on mobile, tablet and desktop, your wireframe should represent mobile, tablet or desktop. You can not make any assumptions because you will be wrong. Your user may or may not be able to “guess” what you are doing in a particular context, and you probably don’t want them too as it will only cause more confusion. The best tools make it possible to experience your wireframe in multiple contexts. So, you can create the multiple versions and share them via the context that is relevant for testing.
It must be easy to communicate about
You have to be able to communicate about the thing you are working on in the thing that you are working on. The wireframes that I create have the ability to comment on the wireframe. So comments are included on the actual view. Your comments are stored contextually, and that make is SO much easier to actually integrate accurate feedback into the work that you are doing.
The biggest reason to wireframe?
If your wireframe doesn’t make sense… fix it. If you can’t fix your wireframe, pick a different solution.
Wireframes have saved me 100s of thousands of dollars over the years. And I’m probably underestimating that at this point. Primarily because I can find incorrect assumptions quickly before I’ve hired anyone to do anything.
Join the Conversation
This is the from the archive of an ongoing series called Making Things That Matter. Each week I will send you an email with another step in the process of building products and launching ideas. Signup here to join the conversation.
