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.