Published on | Prototyping: From UX to Front End — Medium Justinmind

Wireframe testing takes no time at all and can save you reworks and money. In this post, we’ll show you how

Wireframe testing isn’t as common as a full on user testing session with interactive prototypes.

At Justinmind, we understand the importance of testing early and getting important feedback in these crucial stages. Wireframe testing can prevent needless reworks and save time, energy and resources and that’s always a bonus.

In this post, we’ll go over how to test a wireframe on users in 4 steps.

What is a wireframe?

Ah, good old wireframes. In many ways, the word wireframe tells you what you need to know. It’s a frame, the simple structure of a product. It doesn’t have any fancy pictures or whizzing interactions like an interactive prototype might have. It’s stripped-back and skeletal.

A wireframe acts as the bare bones of your product before you make any big design decisions. Usually, the purpose of wireframes is reduced to showing the functionality of a product or the navigational flow. That’s it. Nothing more, nothing less.

If you start getting more complicated than that, then you’re probably creating something more than a wireframe.

Why do wireframe user testing?

User testing is a valuable endeavour for UI and UX designers. A little investigation can go a long way especially when it comes to getting early feedback for your product. A small mistake caught early can pay off in the long run.

In fact, it can cost you 10 times more to fix something later in development than early in the design phase.

You might think there’s nothing to test since a wireframe by its very nature is naked and bare. But, you’re in for a surprise because there are plenty of reasons to carry out some initial user testing on wireframes.

Test your wireframe in seconds. Download Justinmind.

Benefits of user testing a wireframe on users

Whether you’ve got a budget as big as a CEO’s salary or you’re struggling on a shoestring, user testing is possible.

The beauty of user testing is that there are many different methods that you can choose from which fit all levels of budget. So, if it’s an easy-to-do observation session or a full on eye-tracking methodology, you’re going to find a method that fits your budget.

Because of the various methodologies available to you, there is no need for a formal lab or user testing room. As long as you have a paper and pencil, just book a meeting room and you’re good to go.

Other benefits of user testing a wireframe are:

Early feedback to iterate upon
Validating your ideas
Save time in the development stage
Identify key issues in navigation and functionality
Cost saving
Explore multiple, possible experiences
Identify which experiences to develop further

You can also use wireframes to identify missing or extra requirements.

How to test a wireframe on users in 4 steps

Now you’ve got your head around the basics of wireframes and what benefits they bring to a design project. It’s time to take a look at how you can go about testing your little skeletons on your users.

Design your wireframe

It might sound silly, and maybe it is, but before you can test anything, you need to create a wireframe.

You can develop your wireframe from a paper prototype or a pre-existing sketch. Maybe you’re a design maverick and you’re going to directly design the wireframe. Whatever your style, get your design down. Make sure to use a grid so you have some sense of proportion, too.

Don’t forget that whipping up a wireframe in Justinmind takes just a couple of clicks. With drag and drop widgets and custom widget libraries, you can get your wireframe skeleton ready to test in just a few hour.

A rather unorthodox, yet empowering, approach would be co-creation. This is where users and designers create products together. The main benefit to co-creation is that users are shaping the product they’ll eventually use.

Take a look at this 10 inspiring wireframe examples to get your creative juices flowing.

Plan and choose your user testing methodologies

When you’ve designed your wireframe, whether on paper or digitally, it’s time to consider which methodologies you want to use when user testing. Some traditional user testing methodologies won’t be necessary for a wireframe as there is limited testing you can carry out on a wireframe.

You’ll also want to plan your user testing session — so which parts of the navigational flow are you testing? How about the functionality of a particular screen? And don’t forget to create a script, even if minimal and a time limit.

You’ll need to also give your participants tasks and goals to complete. It’s usually best to stick to a single task during a user testing session to maintain focus.

Some common user testing methodologies include:

A/B testing
Focus groups
Heatmaps
Surveys
Observation
Usability testing

Set up your user testing session

Now you need to set up your testing session. You can do this in a meeting room or anywhere that’s sufficiently bereft of distractions.

You’ll need participants for your user testing session. At this early stage, your participants could simply be colleagues or people from another departments in the office.

You don’t have to go to the lengths of finding a big pool of people either. 2 to 3 users should suffice, especially for a wireframe.

Nielsen Norman Group recommends testing with just 5 users as anything more elaborate is a waste of time and resources. In fact, Nielsen discovered that from just one user you’ve already learned almost a third of all there is to know about the usability of a design. So small and frequent is preferable.

If you’ve made your wireframe in Justinmind, there are some useful sharing capabilities.

When you share your prototype with a quick link, the people you share it with have the power to leave comments on specific UI elements.

This can help you when you need to get quick insight into functionality and navigation flow. And you can leave comments both offline and online — all feedback is automatically synced to your account.

Usability.gov has an extensive run down on the ins and outs of setting up a usability test. Once you’ve set up, you’ll be ready to test.

Justinmind is fully integrated with your favorite user testing tools.

Iterate from your findings

After you’ve completed your wireframe testing sessions, you’ll want to analyze the session and results so that you can iterate on findings and carry out further testing sessions (remember, the more the better!) or decide whether the session itself needs to be tweaked to accommodate unplanned tangents.

As mentioned, if you’re co-creating with users, you can continue to build with them based on your findings.

UsabilityHub has a useful example walkthrough of a wireframe test, including heatmap analysis of their wireframes.

Conclusion

Wireframe testing will help your design evolve in a way that makes it more usable and functional.

When you find errors early on in the process, you’re going to save time and energy because you’ll have a firm understanding of your product much sooner than without testing.

Originally published at www.justinmind.com.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

How to test a wireframe on users was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to test a wireframe on users

Cool stuff, every week

More Articles