Join James Williamson for an in-depth discussion in this video Paper prototyping techniques, part of UX Foundations: Prototyping.
If you can sketch, and let's face it everyone, even those that say they cannot, can, can sketch, then you can build paper prototypes. While there is no great mystery to building them, there are a few techniques you can use to help represent UI elements, simulate interactivity, and make the process of building them a little bit easier. I want to start by covering some of the construction techniques that I use. So I'm going to go ahead and grab one of the paper prototypes that I have created right here and I am. If I turn this around, you can see the back of it is just regular old cardboard. As a matter of fact, (LAUGH). the tape from the box that they cut this off of is, is still there.
Now, the reason that I like using this cardboard is it gives a little bit of weight and heft to it. it makes it feel a little bit more real to the testing subject. and it's going to be a little bit more durable over the course of, multiple days of testing. on top of this, I printed out a, a template of, of just a regular handheld tablet. Since the application that we're building is a tablet-based app, it's really kind of nice to have that on there. It's going to give it a little bit more context to the user when they're using it. They're going to feel a little bit more comfortable within that space that they're testing the tablet-based app.
Now, on top of this, I've got a screen printed, and I just want to show you the card stock that I showed you guys a little bit earlier when I was talking about materials. I've cut this down to the exact size of the screen window itself. So, when I need to assemble the screen, I'll just take this, draw on it what I want or tape the UI elements that I want to it, and then that can be added to one of these templates to represent the screen. Now, I use re stickable tapes so these can peel off and peel right back on. So, if I only have one of these templates to give to a user, I can peel screens on and off.
Or if I have multiple ones I can just handle multiple screens. So it's very handy to have your screens separate from your template like that so that they're a little bit easier to construct. Now I mentioned the UI elements and one of the things I want to show you guys, are these sheets that I was talking about earlier. So on these sheets I've got all these various UI elements, all of them that I think I might need for a particular application. And I'll print these out and then cut each of them out individually. Now that takes a little bit of time, and frankly, if you have an intern it's a really good job for your intern. But what I'll do is I'll print these out, cut them out and just build a library of these UI elements.
Now also when I cut these out I leave a little bit of paper here that I can fold For elements like buttons, and radio buttons, and check boxes, and things like that, makes it easier to put glue on the back of them, and just makes it easier to pick them up and put them on. As a matter of fact, you can see here on the log in screen, you can see I've got one of those guys right there with a tab, so they're really easy to peel off this way, and stick back down. So once you have, it's a little bit tedious to set this library of UI elements up, but once you have it in place, you can just find little organisers like this.
It makes it so easy to assemble a screen. You just find the elements you need, put a little bit of glue on the back of them, and you're minutes away from having a functioning screen. So I love those. The other thing these do for you is they allow you to simulate interactivity. So if you have some of these pre-printed ones, you can think a little bit about how they need to be constructed and you can do things like simulate this accordion. So i have this accordion (UNKNOWN) element here. And you'll notice that you can fold that out so if somebody selects that option, you can fold it out, show them what the contents of that would be, and then fold it back up.
And, you know, it's really important to be able to simulate some type of interactivity or interactions in terms of whats happening with your application. And that's another reason why I really like this tracing paper. So you can see here, I've got a nice little overlay that I've made. And for like the log in screen, if somebody were using this, and they, you know, I wanted to show them what would happen if their user name or password didn't match. Instead of creating a brand-new screen for that I can just draw something, directly on the tracing paper, over lay it. I can attach it with a little bit of tape, if I wanted to. But essentially, it gives them a nice feel for what's going to happen, within that error state.
You know this inner activity that I was talking about is very important point here. These are not paper mock ups, they're paper prototypes and as such, they are really meant to be interacted with. There are a few techniques that can help you when you are testing and evaluating a prototype. And here to help me demonstrate this my good friend and producer Dan Weston is going to give me a hand. Hey Dan. >> Hey James, how are you? >> I am doing really good. Thanks for helping. >> Mhmm. >> The first thing we want to talk about is when you are testing and evaluating your prototypes you are going to have at least two people.
One person who is going to be the facilitator who is helping the tester walk through it. The other person who's going to be actually testing the application. The first thing that you want to do is set a few goals for them and let them know what the expectations are. In this case, Dan, we're going to be prototyping a new application called Meal Assist, and it's designed to help people choose things to go with whatever they're cooking that night. So they're cooking chicken, for example, help them kind of figure out what to have with it. Now, the first thing I want to do, Dan, is just set you, is just start you off, where you would typically start off in the application and that would be the log in screen.
So I'm just going to go ahead and give you the template, and as a facilitator, my job is to just sort of tell him what's expected of him on the screen but not tell him what to do. So this is a pretty typical long in screen. I want you I want you to give it a look and tell me if there's anything missing from it or if it's kind of what you would expect. >> Okay everything looks pretty normal. Except for since this is my first time using the application there's no way to create an account. So I can't even log in. >> You're right. There really isn't a way for you to create an account. Okay, well this is one of the places where paper prototypes really shine.
Because of the fact that it's paper, I can immediately make a change to that. So let me come over and I'm just going to write a quick little link here. And this is one of the things that I love about those pre-printed labels that I was talking about earlier. You can kind of create, just, sort of, pre-cut, little pieces of these. And then, any time you need to add something to your prototype, you can write it down. And then very quickly stick that on. If you don't like the placement of it, or if you get negative feedback about it, it's really easy to change it again.
What do you think, Dan? Now I've got a link for creating a new account, does that work for you? >> Yeah, that works great. >> All right, so the first thing you do, is you just click create new account. Now in this case, if I only had only template, I would peel this screen off and put another one down, but I've got two templates. So, I want to show 'em the user profile template. So, this would take you to the user profile page. And here you'd be filling out your user profile form. Now, before you start, again, I want to go back to these pre-printed labels. Another thing that you can do, is you can use highlighters. And you can sort of colour these up a little bit.
And Dan, as you're clicking through the form elements, one of the things that we were thinking about. Is having these form elements highlight when you click inside of them to kind of show you where you are. Do you think that would be distracting or do you think that that's something that would actually help you fill out this form. >> I think it'd be incredibly useful. It's often difficult to see where you are, especially on a mobile device. >> Cool, all right. So, we'll go ahead and make a note of that, and make sure that we keep that interaction. Now the other thing is is when you click on this, because it's a tablet based device, you're probably going to have a keyboard that comes up on the bottom.
Is that going to be distracting or do you think that's going to be okay? >> No, that's typical behaviour on a tablet device. >>Excellent. >>So I think I'd be okay with that. >> Al right, so that's not a problem and again that's where these pre-printed UI elements really come in handy. You can swap 'em out. You can overlay them on the screen and simulate what's actually going to be happening in the device, so that's really cool. Right. So what I want you to do again just take a look at the user profile page, and give me some feedback as to whether its very clear to you. If you're seeing what your expecting, or do you have some questions about some of it? >> The top portion looks pretty much like I would expect it to, but this bottom portion I'm a little confused about what.
>> Okay. These different items are. >> If you see those question marks? >> huh. >> Okay, go ahead and click one on. Al right now when you click that, a module window's going to pop up. And this is what I really like post it notes for. Even if it's just spur of the moment and you're thinking, wow a module window would really work well here. These post-it notes are often the exact right size to do that. So, if I just say okay Dan this post-it notes going to simulate a modal window, and what is going to happen is this is going to tell you in a little bit more detail about what your food preferences are and the fact that this is optional. It is not required that you fill this out.
it's optional, so it's going to let you, give you a little more information and feedback about that. Do you think that's helpful? >> Yes, I do. >> Okay. >> That's extremely helpful. (SOUND) So is that a little bit clearer? >> it is, it's a little confusing you said that I would have to open up the model window, to actually see if it was required or not. I would like to be able to see that from, this interface. >> So that's not too terribly clear that it's not, that it's optional, it's not required? >> Correct. >> Okay, awesome. Well there are a lot of things that when you're testing and evaluating your paper prototypes you can change right away.
But some of the changes, like this one for example, you're probably going to want to evaluate that and think about it as a team. And that's where my index cards come in. So I have these index cards, and as we're testing and evaluating, if something, or if a problem like this comes up, we'll just sort of write it down, and then I've got this board behind me. on the board, we have some categories that are grouped based upon the type of observation that's being made. So, this one deals with interaction. So, it's going to go in that grouping. Dan, would you mind putting that up on the board for me. Now, the great thing about this is that you can place all these up in the board, and then after the testing is finished, your team can go back, take a look at these and then reorganize them based on their priority.
And that's what your going to focus on for the next generation of the prototype. Dan, thanks a lot, appreciate your helping me out. >> No problem. >> Now one of my favourite things about paper prototypes is the way that they stimulate the imagination. I think that's a vital part of the creative process and one of the reasons that I like them so much. I encourage you to play around with the techniques that I've shown you here, as well as coming up with your own techniques, for building creative paper prototypes.
- What is a prototype?
- How prototyping helps user experience
- Defining prototype goals
- Sketching ideas
- Creating paper prototypes
- Building low-fidelity and high-fidelity prototypes
- Creating HTML prototypes
- Testing and evaluating prototypes
- Choosing the right prototyping tool