Can users navigate my wireframe design?

Mobile apps
Usability testing
User interfaces
Websites
Contributed by
UsabilityHub

Wireframes are a common way of quickly prototyping a website, app or system. They’re basic layout concepts, often with no color or branding applied to them. Their purpose is to quickly show how a system will work so that stakeholders and end users can give early feedback on the design without being troubled by more complex elements of design like color schemes, typography, and layering.

You can use almost any graphics or design package to create wireframes — in the example test, the wireframes were created with Adobe XD, but Sketch, Photoshop, Figma, Justinmind, Balsamiq, Powerpoint, and many others work just as well for wireframing. You can also simply sketch out wireframes on paper or a whiteboard, and take photos of them to use in tests.

UsabilityHub is great for testing wireframes because tests are quick to create and don’t cost a lot to run. You get the same kind of feedback and metrics when testing wireframes that you would when testing high fidelity design concepts.

In this test, a navigation test section has been created with a simple flow from a home page through to an info page, via a menu. Hitzones have been placed on the interactive elements so that test participants can click into the site to complete the task. This is exactly the same as a regular test of a fully designed concept.

When you’re analyzing test results from tests of wireframes, there isn’t anything special to look out for — except that you won’t get good data from questions about purely aesthetic design choices. Save these questions for a test with higher-fidelity designs.

In the example test, you can see that it’s been a fruitful exercise testing this design before going further with more work, as it’s clear that participants had significant difficulty finding the target page.

Don’t be afraid to put your designs under the user testing microscope as early as possible, just like in this example. Finding problems when still at the early wireframing stage will mean that there will be significantly less redesigning to do further down the track, and your end users will get to use a much better product.