The creation of wireframes is a fundamental method of UX design. Standing at the low-fidelity edge of the spectrum of possible deliverables, wireframes allow you to quickly simulate flows you intend to implement into your platform. Wireframes can be compared to building plans or models. They are much simpler than the final product, but they reflect all key attributes and can be easily changed when the need arises.
In this article, we will cover the topic of wireframes and take a closer look at wireframe testing, what it is, and how to conduct it.
What are wireframes?
Before we discuss the testing of wireframes further, let us provide you with a clear definition of what we mean by a wireframe.
In short, wireframes are low-fidelity likenesses of user interfaces.
Being low-fidelity means that they are not as costly to put together in order to iterate on your interface’s information structure and functionality. The main attributes of wireframes can be described as follows:
- Wireframes don’t focus on the visual design details (They typically aren’t in color, since color and similar graphical details are not the focus of this design phase.)
- The main focus is on:
- structural elements
- the overall layout of the page or view
- functionality of individual elements – what they are supposed to do, how they are supposed to behave
- organization of all necessary information, the navigation elements, etc. (Information Architecture)
- representation of key scenarios/flows (providing context on what and when will the user see)
Wireframes are to UX design what rough pencil sketches are to an oil painting before it’s put on a canvas—they do the job, but they don’t need to look fancy while doing it.
Why wireframe testing?
Since wireframes are low-fidelity, it means that they are cheap to make, as well as change. Calling them cheap may sound derogatory, but being cheap is actually one of the best attributes of wireframes.
Thus, because they are cheap, it also means that they are easy and quick to get ready, to simulate the key flows of your application, test them, change them as necessary, and test them all over again. Wireframes allow you to design your platform in many quick iterations. Each iteration provides you with invaluable information on what to change and what to keep. These quick iterations help you to fail fast and throw away the flawed designs that had no chance of succeeding.
The more design mistakes you discover in the wireframe stage, the more money you save.
Remember, now it costs the lowest amount of both money and time to fix these mistakes. With every next step, both these costs keep on increasing.
Don’t forget the paper wireframes
Sometimes a quick sketch on a paper, the most rudimentary version of your product, can speak louder than a thousand words.
These wireframes are especially useful during brainstorming meetings when even a Figma wireframe takes too long to create.
But one might ask, what if I can’t draw well? Can I still create a usable paper wireframe? Yes, you can! Jakob Nielsen authored a guide on creating wireframes, for those who can’t draw. The steps you should follow include:
- Identify your browser window or device aspect ratio.
- Draw the navigation and search.
- Identify and draw the largest elements in your design.
- Fill in the remaining details
Use well-known low-fidelity generalized representations of elements. For example:
- An image is represented as a rectangle with an x through it
- Dropdowns are made of a rectangle and a caret
- Headers are illustrated using thicker lines
- And more
For further details head to the guide linked above. Remember, that everyone can create a simple paper wireframe.
How to conduct wireframe testing?
There are several techniques great for testing wireframes, depending on your goals and preferences.
We will discuss each and every one of them in turn.
But before we get to that, there are some key factors to keep in mind regardless of the study type you are going to choose:
- You need to have a plan ready:
- Prepare goals and tasks
- Define any follow-up questions you want to add to gather additional insights
- Make sure you don’t include any unnecessary scenarios
- Figure out how you want to reward your participants (monetary rewards, gift cards…)
- Make sure to double-check your wireframes for any mistakes and typos
- If you are running a moderated version of any of these tests, make sure to remind your participants periodically before their time slots, so that you have as few no–shows as possible
Five Second Test
As we have already established, wireframes focus on the structural side of the design you have created. A significant part of this is the visual representation of your information architecture, specifically, the layout in which the information is presented. Wireframes allow you to pronounce one block of information more than another by moving it to a more prominent position on the page, either by making it larger or surrounding it with more whitespace, so that it isn’t swallowed up by the other content surrounding it.
Making sure that the information you consider important is “popping” enough from the screen can be difficult. The Five Second Test is an ideal way of testing that.
Simply take the wireframe that you have created and show it to the respondents for 5 seconds (or up to 30 seconds, depending on the aim of your test and the complexity of your page). Once the time is up, the wireframe will disappear and you can ask respondents about what information stuck in their mind during that short amount of time.
Can they remember the name of your flagship product, the motto of your company, or anything else you deem important? Before you can test a wireframe in this manner, be sure to prepare a list of questions that will let you see what kind of first impressions your participants get.
To get a better understanding of how five second tests work, check out this demo study.
Preference Test
Being cheap and quick are two of the most important attributes of wireframes. This means that you can create tons of them and compare the alternatives quite easily.
Are you in a disagreement with your fellow designers because they want to place a button on the left side of the page, while you would prefer it on the right? Quickly create two simple wireframes for these alternatives, pop them into the Preference Test, and let a higher power (your users) decide who is right by voting. They can also provide you with follow-up feedback about why they made a particular choice.
A well-designed Preference Test is not only fun for the respondents but also allows you to involve your users directly in the decision-making process. In the end, it’s the users who will be using your product, so you should listen closely to their views and attitudes.
An example of a Preference Test with UXtweak.
First Click Test
The prime sign of good design is its intuitiveness. And what is more intuitive than when the first click your user makes is the best one towards solving their task? Make sure that the layout of your wireframes is intuitive. Test them against the habits of your respondents. Check whether users will click on the CTA first as you would expect, or if the banner interests them more.
The First Click Test tool allows you to create hotspots (clickable areas) on your wireframes to automatically detect clicks on prominent elements. Create a hotspot for each element to see which one gets the most first clicks. No one but your respondents knows which placement for the solution user tasks is the most intuitive.
So don’t waste any time – first click testing is the fastest way of testing the intuitiveness of wireframes for individual screens. Also, if you add a post-task question, such as “What do you believe would be the page you would be taken to after clicking here?”, you will not only be testing the layout and intuitiveness of your wireframe but also the user expectations for functionality—another key feature.
If you don’t know what functionality means, it’s simply how each part of your wireframe works.
Prototype Testing
The most robust and complex test you can prepare for your wireframes. A wireframe can become a prototype if you make it interactive by linking individual wireframes together. It should then come as no surprise that you should conduct Prototype Testing with your wireframe only after you have tested the key individual wireframes by using either First Click Test or Five Second Test (possibly both if needed) to find the most glaring issues.
Prototype Testing is when it all comes together. Here, you test whether your wireframes work well together as a unit. Interlink them into a functioning prototype of an application or a website. You can do this by simply importing them into UXtweak using the public sharing link from Figma or InVision. Now you are ready to create your tasks.
The tasks for the wireframes shouldn’t focus on design details, but rather on the structure of your design. This is mainly because at this stage, maybe not even you yourself will know all the details of how your platform will look once it’s complete. Ask your respondents to do key tasks that are at the core of what users are going to be doing in your app or website the majority of the time.
Check our comprehensive guide to Prototype User Testing for more details!
For example: In a shopping app, it could be such a simple scenario like asking them to buy a product of their choice. At this moment, the details of the item itself are irrelevant—all you are focusing on is whether the respondent can find it and put it into the cart.
These tests will make sure that the user flows in your future platform are seamless and intuitive. It is important to remember that just because your wireframes perform well as standalone designs, it doesn’t mean they will do well as a team. You need team players in your wireframe lineup, not just lone stars.
Mobile Testing
If your wireframes are modeling a mobile app, you can test them using the Mobile Testing tool. Compared to Prototype Testing, you will get a screen recording instead of more analytical data. This method is compatible with basically any online prototyping platform, not just Figma and InVision.
Try these tools in the interactive demos🤩👇
Best practices for wireframe testing
When compared to tests using prototypes with higher fidelity, wireframe tests are not as different as they might seem.
When conducting wireframe testing, here are some key differences to keep in mind:
- It might be a good idea to specifically mention that the test your respondents will participate in focuses on low-fidelity prototypes. You can also describe what the aim of the test is (testing the structure, not the looks). This will help prevent negative feedback from the respondents, which originates in a misunderstanding. Comments like “Looks unfinished.” are what we are trying to prevent. You know it’s unfinished, it’s sort of the main point of it all. You can also remind your respondents about this in the task texts.
- Make sure your wireframes include only the level of fidelity needed for respondents to clearly understand what an element is, and what it is supposed to do. Do not include any extra design specifics; this will only dilute your results. If you add an image to a wireframe, it will take all the focus of your respondent away from the rest of the simpler elements.
- Remember what the goal of this type of test is. Make sure your task texts are focused on the layout, information architecture, user flow, or functionality.
- Gather additional insights using pre-study, post-task, or post-study questions. Make sure that you fully understand the reasons behind the behavior and decisions of your participants.
Tools for creating and testing wireframes
UXtweak is a great platform for wireframe testing that offers all 5 tools mentioned above.
Alternatively, check out these 6 best prototype testing tools.
There is nothing wrong with creating your wireframes using a pen and paper. However, there are a few tools on the market that will make your life easier, especially when you need to introduce changes to your designs.
The tools we suggest for creating wireframes are:
- Figma – An all-around great online tool. To start your testing, it allows you to create individual wireframes and export them to be used with First Click, Preference or Five Second tests. You can also easily connect these wireframes into an interactive prototype, which can be imported automatically into UXtweak’s Prototype Testing. Finally, once you are done with your wireframe phase, you can painlessly start raising the fidelity of your designs all the way to the realistic prototype.
- InVision – an alternative to Figma, which is also supported by Prototype testing.
- Balsamiq – a tool focused specifically on creating wireframes and mockups
- Adobe Illustrator and Adobe XD – this combination of Adobe tools offers you all the options you might need for creating wireframes and transforming them into high-fidelity prototypes.
- Sketch – Mac design application
Takeaways
So, you’ve now read about all the effective ways of testing your wireframes.
Here are some key points to remember about wireframe testing before you go:
- Focus on structure, not fancy design. Grayscale is your friend and it helps you keep the elements on the same level. Also, wasting your time on complex lettering and fonts at this point makes no sense.
- Wireframes are cheap in the best sense of the word. Make a lot of wireframes as often as possible to make sure you cover everything you need to test.
- It is never too soon for a wireframe test. You don’t need to have all the details of your ideas set in stone before creating your first wireframes. Wireframe tests may bring you inspiration and ideas about features you didn’t even know your digital product needed.
- Don’t be afraid to use paper wireframes and remember that anyone can draw one.
- Make sure the level of fidelity is as low as possible. Communicate only the details which are necessary to ensure understanding from the respondent. Use the notation reserved for images and objects. Don’t create your own symbols, since it may lead to confusion.
- After testing your wireframes individually with tools, such as Five Second, First Click, or Preference Test, don’t forget to test wireframe flows with Prototype or Mobile Testing as well.
And most importantly, remember that you can conduct all of these tests for free with UXtweak! Just register for your free account and start testing today!
