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.
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 relatively cheap to put together in order to iterate on your interface’s information structure and functionality. Wireframes don’t focus on the visual design details, but rather on the structural elements and the overall layout of the page or view. They typically aren’t in color, since color and similar graphical details are not the focus of this design phase.
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. They 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.
Wireframe testing with UXtweak
UXtweak has a whopping total of five tools that can be used for testing wireframes, depending on your goals and preferences. In fact, there are several perspectives to look at wireframe testing from.
We will discuss each and every one of them in turn.
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 designer 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 from UXtweak 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.
Not using Figma or InVision for your wireframes? You can also link any imported pictures with hotspots (clickable areas) that you set up in UXtweak.
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.
An example of everything you can test with UXtweak’s Mobile Testing tool.
Conducting wireframe testing: the “how to”
When compared to tests using prototypes with higher fidelity, wireframe tests are not as different as they might seem.
When conducting wireframe testing in UXtweak, here are some key differences to keep in mind:
- The predefined instructions message in UXtweak works well, but 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.
Tools for creating wireframes
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 into your designs.
The tools we suggest for working with UXtweak studies 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.
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 letterings and fonts at this point has 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.
- 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!
