Illustration by Prabhat Mahapatra
We live in a world where our users expect great experiences, and the bar is being raised every day. It’s not enough to have an amazing idea; you also need to ensure that the user enjoys the interaction too.
One way to make that happen is to conduct user testing. The problem is that putting a high-fidelity interactive prototype in front of your users can be costly and time-intensive. If you’re not careful, it can lead to lost time and wasted resources.
So what’s the best way to get quick feedback that makes a difference? Try experimenting with wireframe testing. It’s a low-cost, speedy way to get new ideas in front of users so that you can validate (or change) your work. Let’s talk about how to get started with wireframing, why wireframe usability testing is valuable, and some of the wireframing tools we recommend for designers, both new and experienced.
What is a wireframe?
A wireframe is a schematic illustration of a page interface used to demonstrate the allocation of content and functional elements on a page. To put it more plainly, a wireframe is a way to view the layout and functions of items on a page in a very simple way. By wireframing, a designer can more easily communicate with other designers, developers, and stakeholders how certain elements on a page are related.
Wireframes are essentially the lowest-fidelity prototype. Rather than investing design and development resources creating an interactive prototype that may or may not be the final product, using wireframes (and, in turn, wireframe testing) allows for a quick and easy way to test a layout or design with users.
For a deeper dive into the value of wireframing before you design, check out this video with Talin Wadsworth, principal designer for Adobe XD:
The benefits of wireframes and wireframe testing
Wireframes are a comfortable middle ground between pen-and-paper sketches and a real, clickable prototype. They allow the designer and the user to experiment and test the layout and information architecture of a page without the distraction of images, copy, and other elements.
Wireframes are cheap to produce, fast to create, and easy to throw away. The real benefit in using wireframes is that you can change them and iterate on them as you learn more about your user and their current (and future) experience.
In order to create the most useful wireframe, it helps to have a few important things in mind before you begin. Ask yourself these questions to get started:
- Who is your user? What do you want them to accomplish?
- How can you organize your content to support these goals?
- What’s the first thing your user should see upon arriving?
- What is the call to action? Where is it located? In what form?
- What should your user expect from various elements?
Once you’ve got a paper prototype, you can go directly into wireframe user testing. There’s no wait to compile code, download user flows, or wait on color matching. You can put a paper prototype in front of a stakeholder or a user and get a critique right away. Looking to test a feature? Draw out the important parts, fill in the rest with placeholder boxes, and then get feedback. Take what you learn, make a new wireframe, and then test again.
To dig a little deeper, let’s say your team is designing a new landing page that is supposed to drive qualified leads to a contact form. You could go about this in two ways:
The first option is ideal for designers and teams that have time and resources to spare. You’ll need to get all of your stakeholders in one place, make note of everyone’s ideas and opinions, and hand off those ideas to a visual or user experience designer. Then you’ll have to wait three days (or weeks or months) for the designer to hand off their design files to a developer. Then, you’ll wait three more days (or weeks or months), launch your new landing page, and wait to see what happens. While this approach isn’t always the most conducive to getting quick feedback, it is how most large and established companies build new digital products and features.
The second option is ideal for teams that like to move a bit quicker or that may not have resources or time to spend on a drawn-out design and development process. The first step is to have your visual or user experience designer draft up some wireframes based on their knowledge of the user and the desired outcome. You can quickly do some wireframe user testing by putting those wireframes in front of actual users and getting their feedback. If your wireframes are clear, and if they generate the desired outcome, you can roll what you’ve created into a prototype. If not, you’ve only invested the time it takes to draw them out on paper. You can pivot, remake new wireframes, do more wireframe usability testing, and repeat the cycle.
Designer desk with website wireframe sketches. Flat layHow to create a wireframe
Let’s go over some wireframing fundamentals. Most designers start with the basics: pen and paper. These quick and accessible tools are the fastest way to get your ideas out of your head and into the world. There’s no need to complicate the process. All you need to know how to do is draw squares and squiggles.
The goal here is to illustrate your structure and page layout, including the information in it, without getting too fancy. Some simple guidelines to keep in mind:
- There’s no need for color. Keep it all in greyscale. That means black, white, and the grey shades in between. This makes it easier for the stakeholder or user to see how things are arranged without getting distracted by what is arranged.
- Keep your typeface choices simple. One serif and one sans-serif should do. You can still use font size or styling (bold, italics, etc.) to convey the hierarchy of information on your page.
- Use symbols. Instead of including images, best practices recommend using only simple rectangles and squares as placeholders with an “x” through the middle of the box to show where an image will be placed. Likewise, you can show where you’d place a video by using a triangle as a play button at the center of the box. Placeholder boxes like these simplify both wireframe creation and wireframe user testing.
The next step in the wireframing process can go one of two ways. Some designers prefer to use templates and grids (again, on paper) to translate a rough sketch into something that’s a bit more uniform and relatable. Smashing Magazine has a long list of device-specific paper templates that you can download and print. Likewise, design websites like Sneakpeekit and Sketchize offer more generic grids and layouts that can work with almost any device.
The second option is to take those sketches and make them digital. While this approach may take more time at the beginning, it allows you to share (and test) with stakeholders and users who aren’t as familiar with the design as you. This increases your options for wireframe testing. (There are some recommendations for tools that can ease this process in the next section.)
One important thing to remember: Wireframes are meant to be temporary and impermanent. The goal of wireframe usability testing is to get feedback and make changes if and where necessary. Don’t be afraid to crumple them up and toss them into the (real or virtual) recycle bin. The more paper prototypes you can test with your users, the better your final product will be.
Our recommended wireframing tools
Whether you’re just starting out with wireframes or you’re an expert with hours of wireframe user testing under your belt, here are a few tools you might find useful.
Balsamiq (macOS, Windows, Web) is another great tool for beginners. If all you need to do is create a wireframe to share with your stakeholders, Balsamiq is a fantastic choice that’s more professional than pen and paper but not quite as advanced as some of the other tools we’ll talk about below.
If you’re looking to invest a bit more time and energy, you might find Moqups (Web) a good fit. While on the surface it looks like a plain wireframing tool, the real magic is in its Diagram tool. This unique feature allows you to show logical markups on your wireframe. That means you can demonstrate where links and interactions will live and how the UX logic will flow within your design.
If you’re looking for a tool that’ll not only help you with wireframes but also help you eventually turn them into a clickable prototype, we like Adobe XD. Adobe XD allows you to draft your product at every level of fidelity—wireframe, mockup, and prototype—in the same design file. Adobe XD also allows you to publish your prototype and share it with your stakeholders and users so they can interact with it and give you feedback.
Try wireframe user testing for quick feedback
Drafting wireframes and getting them in front of your users and stakeholders is an easy way to get quick feedback without a significant investment of time or development resources. The process from idea to evaluation takes hours (not days or months), and it allows you to quickly validate your work or pivot toward a new direction.
By using wireframing tools during the wireframing and prototyping process, you can decrease the total amount of time and energy it takes to get your idea out into the world and in front of your users. Wireframe user testing helps you find weak points in your product, and time and effort invested there is time and effort invested in improving the user experience.