The Product Design Process

Testing Initial Wireframes

Paul Boag

Paul Boag

The Product Design Process

Check out a free preview of the full The Product Design Process course

The "Testing Initial Wireframes" Lesson is part of the full, The Product Design Process course featured in this preview video. Here's what you'd learn in this lesson:

Paul discusses different methods of testing wireframes. He recommends using first-click tests and five-second tests with grayscale wireframes that have real content and navigational elements. These tests help determine if users understand the purpose of the screen, if they can find specific elements, and what grabs their attention.


Transcript from the "Testing Initial Wireframes" Lesson

>> So when it comes to testing with those initial wireframes, those grayscale wireframes that we talked about. I don't tend to bother testing with those low fidelity gray scales, the ones where you don't have real copy in there and that kind of thing. It just is not really kind of worth it in my opinion, because there's not enough in the interface for users to really understand what they're looking at, which is the same reason why I don't tend to do testing with paper prototypes.

There's just not enough information in there to make it worthwhile. So I only test really with grayscale wireframes, which you've got real content in and navigational elements and that kind of stuff. If I've just got a wireframe that's not particularly interactive, maybe just individual screens or whatever, that oftentimes I'll do a first click test.

So I show them the static comp. And I say where would you click to create a new task or whatever it is that you want people to do on the app? And it records where they've clicked, right? So you can see whether people are clicking in the right place.

First-click tests are great. As I said earlier, if people get their first click right, then they've got a good chance of successfully completing the task. I tend to use listen for this test, it's super easy to set up. You're essentially just kind of uploading an image, setting the task and away it goes, and then it shows you whatever it is that you're testing as an end user.

It says, where would you click to sign up for Frontend Masters in this particular case. And then people click on the screen wherever they would sign up and then you get your results back and you can see where people have been clicking on the screen and whether they've been clicking in the right place.

Great, we now know that people know how to sign up for Frontend Masters, and that takes I know 5-10 minutes to set up. And then if you send it out using their recruitment tools, you'll get results back in an hour. Really lightweight, really quick. The other one that I sometimes do with wireframes is I do a five second test which involves showing the users a design for only five seconds.

I normally make it a bit longer. I make it eight seconds because I do, after which you ask people to recall any specific details they remember of the page and what was going on and whether they understood it and that kind of thing. So, it helps you to know whether they get what they're looking at and they understand it pretty quickly.

So what you're looking to understand, the kind of wireframing stage, well, basically, did they get it? Did they understand what the screen was about and what you were trying to do? Did they see particular elements, if there's a top task or something, you're worried that people aren't likely to see this, these kinds of tests will show you that.

And then what stood out the most, what things are grabbing people's attention and is it the right things. And five second tests equally, really simple to set up. You upload your graphic, you ask them to put in the question, which is essentially what did you see? It shows them a blank page with the instructions and then when they click on the button, it shows them the design.

And five seconds later, they're asked to then fill in what it was that they saw. And what you get back at the end of that is a word cloud like this, which has got basically is saying all the things, you know, all the words that people used. So for example, this particular example was a direct mail site.

So great, they've realized it was a direct mail site. I was a little bit worried about the fact that it had the word something written there, [LAUGH] which I didn't feel was very encouraging. But I could drill into the results and see what people were saying. And actually they were saying something to do with direct mail or variations of that.

So it wasn't, they were just going on, something. [LAUGH] So I was fairly safe on that. I mean, these days also you could download the whole of that, all those individual answers, throw them into a large language model and it would go through and tell you. You could question it, you could say, how many people said, what percentage of people mentioned direct mail, and what other things other than direct mail do people think it was, and that kind of thing.

So that's quite useful to be able to just question it like that. So that's why for instance that's the main test I do on those, I don't tend to do a lot of you know usability testing in the in the traditional sense because it just takes too long.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now