Check out a free preview of the full Mastering the Design Process course
The "Wireframing" Lesson is part of the full, Mastering the Design Process course featured in this preview video. Here's what you'd learn in this lesson:
Paul demonstrates two quick wireframe tests, a 5-second, and first-click test, to determine page layout and whether or not users see a design's call to action. A student's question regarding how to factor in must-have text such as legal and cookies is also discussed in this segment.
Transcript from the "Wireframing" Lesson
[00:00:00]
>> You've got your content straight in your mind, it's all kind of beginning to form up in a bit of a wireframe. You haven't even thought about aesthetics yet, but that's okay cuz that's a problem for another day. We just wanna be sure that this wireframe is right, right?
[00:00:16]
And the reason we wanna be sure that this wireframe is right is A, we wanna deliver a good product. But B, we don't want our client or our stakeholders picking it apart later. We need solid evidence to back it up. Now, you could do a huge amount of testing on this.
[00:00:33]
You could do A/B testing, you could do usability testing, you could do all kinds of things. But to be honest, I think it can become a little overkill in that. And you end up doing testing for testing sake because that's what you're supposed to do, rather than testing that's actually useful in achieving our goals.
[00:00:54]
So most of the time there's just two really lightweight tests that I do on wireframe pages. And they can both be used with a tool called UsabilityHub. There are other tools available, but that happens to be the one that I use. And the two tests are called a 5-second test and the first-click test, really, really lightweight.
[00:01:16]
So let me explain the 5-second test first. So a 5-second test, basically, you take your wireframe of any key page, you might do it with multiple pages cuz you probably have wireframed quite a few. And you get a URL that you can send out to users through social media or email, friends and family, doesn't really matter.
[00:01:44]
It can be anybody that's not involved with the project for this kind of test, right? When we talk about aesthetics later, it needs to be the target audience. But in this situation, it really can be just anybody outside of the project. You send them a link, they go to a website, they're shown the wireframe that you're testing for five seconds.
[00:02:03]
I normally set it for a bit longer, right? I normally set it for eight seconds. The reason being is because of that research that says we've got about eight seconds to swing somebody to get them to stay. So eight seconds, show them it, then it gets taken away.
[00:02:19]
Then you can ask whatever question you wanna ask, right? So the two main questions I ask, depending on the type of website, let's say it's a marketing website. I might ask the question, what does this company do, and does it look appealing to you? Could be as simple as that, right?
[00:02:38]
The more common question, which is one that you can use in almost all circumstances, is the question, what do you remember from this page? Write a list of all the elements that you saw, right? So as a kid, I don't know whether you ever played that game where you put loads of things on a tray, you covered it with a tea towel.
[00:02:56]
You saw it for a few seconds, covered it back up, and you had to remember what was on the tray. It's that, basically, in a website testing form. So then you can pay attention, did they see all the key elements? Did they see what I needed them to see, right?
[00:03:11]
So from the top task analysis, I know that they need to see this, this, this, and this, did they see it, right? Great, hard evidence. So what that'll prove, you know the classic make my logo bigger, right, it's become a meme. So why do clients say make my logo bigger?
[00:03:31]
Cuz they're worried people will miss their branding and won't realize who they are, right? Do a 5-second test. Did people see the logo? Yes, they did. We don't need to make it bigger then. Solved it, instantly. But also it's like, that's below the fold, right? They might not see it cuz it's below the fold.
[00:03:50]
Did they see it? Yes, they did. Don't need to worry, right? 5-second test. The other tests I do is called a first-click test. Again, a really easy test. Does your navigation work, all right? Do people know where to go to find x, okay? Really simple to test. One of the most fascinating things is if somebody gets, first, let's say you're testing something really deep in your app, right, some hidden piece of functionality.
[00:04:20]
There is a fascinating piece of research that shows if they get the first click right, if they're heading in the right direction, okay, the probability of them completing the task jumps up considerably. So that's why the first click matters so much, right? So let's say you wanna test, are they gonna find this particular feature in your app?
[00:04:42]
You show the homepage or the feature or the, sorry, the homepage of the app or the overall interface of the app or whatever. And you say, let's imagine you wanted to do x, right? Where would you click? And then you see where they click on the page and you get a heat map back.
[00:05:02]
And the heat map will basically show you where they clicked on the page. Did they click on the right link to take them in the right direction or did they not? If they did, you know you're heading in a good direction with the interface, right? Now it's not that you didn't follow the user the whole way through yet, but that's okay.
[00:05:20]
You know that they got the first click right, and that's good evidence to show you're in the right direction. Those two tests you can set up and get results back that are valuable in under an hour, doing both of them, right? It is so quick and so simple to do.
[00:05:40]
And if you go, but I can't recruit the people, right? I don't know why you would do that, but yeah, I can't recruit the people. Well, like I said, you can use anybody, you can use friends and family. But even if you wanted to do people that were a bit more appropriate, UsabilityHub will recruit people for you to complete these surveys for like a dollar a person, right?
[00:06:06]
It's so easy, there is no reason not to do this. You think how many man hours have been wasted sitting in meetings, debating with various stakeholders about is the logo big enough or will people see this? Or will they understand that or any of these questions, stop discussing it, just test it, it's so simple.
[00:06:27]
And going back to your little micro tests, these kinds of tests are ideal for those scenarios, really simple to do. So yeah, don't worry, yeah, go for your question.
>> Yeah, how would you factor in annoying content like legal, cookies, or must have text?
>> Yeah, I work a lot in the financial services sector, which is highly regulated, and so I'm battling with this all the time.
[00:07:02]
You quantify how big a damage it's having, right? So there's a couple of ways of doing that. One is that you run your 5-second test, right? One without that information in there and one with it in there, right? And you do a comparison between the two. Do people not spot important stuff as often because of all the clutter of the legalese and terms and conditions around it, right?
[00:07:35]
So you could do a 5-second test and a comparison 5-second test, that's one way you could do it. The other way you could do it is you could do it through your A/B testing, right? We're gonna A/B test with that stuff there and with it out there. Now your problem is that A/B testing is gonna be more problematic cuz you might be doing that with live transactions on a live site.
[00:07:53]
So that segment of the audience will be non-compliant. If you're in that kind of situation, you probably can't do A/B testing and you'll do a 5-second test instead. You can also do something called a semantic differential survey, right? Which I'm gonna come to in a minute, which is a very pretentious name for a really great, easy survey.
[00:08:12]
And what you can judge there is how much through a survey like that of doing a comparison again. You can judge how much that legalese undermines trust or some kind of emotional response to it. So you can test both whether it's distracting people and whether it's making them less likely to purchase.
[00:08:33]
So I'll come on to the other survey in just a minute, but yeah
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops