if you can sketch
and let's face it everyone even those that say they can't
can sketch then you can build paper prototypes
well there's no great mystery building them there are a few techniques that you
can use to help represent UI elements
similarly interactivity and make the process a building them
a little easier I want to start by covering some other construction
techniques to use
so I'm even grab one on the paper prototypes that have created here
in by turn this around you can see the back cover is just read a little
cardboard
matter fact the tape from the box so they cut this off
is a is still there now the reason I like using this cardboard
is it gets a little bit weight and have to it it makes it feel a bit more real
to the testing subject
and it's gonna be a lot more durable over the course love
multiple days of testing on top of this I printed out
template of just a regular handheld tablet
since the application or billing is a tablet-based ap it's really kinda nice
to have that on there
its gonna give a little bit more context to the user when they're using it
they're gonna feel
little bit more comfortable within that space they're testing in tablet based
app
now on top of this I've got a screen-printed I just wanna show you
the card stock today showed you as a little bit earlier was talking about materials
I've cut this down to the exact size the screen window itself
so when they need to assemble a screen I'll just take this draw on it when I
wanna take the UI elements that I want to it
and that can be added to all these templates to represent screen
now use restickable tape so these can peel off
and peel right back on so if I only have one up these templates to give to user I
can peel screens on and off
or if i have multiple i can handle multiple screens
so it's very handy to have your screens separate from your template like that so
there will be easier to construct
now I mention the UI elements one of things i wanna show you guys
the sheets that I was talking about earlier. So on these sheets i get 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 let's
takes a little bit time and frankly
the every intern has a really good job for intern but what I'll do
is all print these out cut them out and just build a library 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 checkboxes 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 matter fact you can see here on the login screen
you can see I've got one of these guys right here with the tape so they're
really easy to peel off this way
and stick back down so once you have it a little bit tedious to set this library
of UI element up
but once you have it in plate you can just find a little organizer like
this
it makes it so easy to assemble screen you just find element you need
for little 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 these pre-printed ones
you can think a little bit about the how they need to be constructed
and you can do things like simulate this accordion so I have this accordion UI
element here
you most you can fold that out so somebody select that option you can fold
out shown more than
the content should 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 what's happening with the application and
that's another reason why I really like this tracing paper so you can see here
again I slow overly that I've made in for like the login screen if somebody
were using this
an they you now want to show them what would happen if the user name or
password didn't match
the center creating a brand new screen for that I can just draw something
directly on the tracing paper
overlay I can attach a little bit a tape if I wanted to
but essentially gives them a nice feel for what's gonna happen within that your
state
you know this interactive the there was talking about is a very important point
here
these are not people mock-ups their paper prototypes
and as such the really meant to be interacted with now
there are a few techniques that can help you when you're testing and evaluating
prototypes
and help me demonstrate this my good friend and producer Dan Weston
is going to give me a hand India staging toria I'm doing really good
I thanks for helping from fight so the first think they want
talk about when you're testing and evaluating our prototypes
you're gonna have to at least two people it's one person is going to be the
facilitator it's helping the test for a walk through it
the other person is gonna be actually testing application the first thing you
wanna do
is sent a few goals for them and leather know what the expectations are
this case dan we're gonna be prototyping a new application Camille assessed
and is designed to help people choose things to go with whatever they're
cooking and I so they're cooking chicken for example
helping kinda figure out what to have with it now the first thing on a dude
and just sent you
is just story of where you would typically start off in the application
and that would be login screen some just gonna go ahead and give you the template
and as a facilitator my job is to just sort of tell him
what's expected of them on the screen but not tell me exactly what to do
so this is a pretty typical login screen i watch it no I want you to give it a
look
and tell me if there's anything missing from a or if it's account what you
expect
K I am everything was pretty normal except for sis is my first time using
the application there's no way to create an account
so i cant 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 %uh the fact that is paper I can immediately make a change that so
let me come over and I'm just gonna
right equipment link here and this is one of the things I love
about those pre-printed labels that I was talking about earlier
you can kind of create just sort of pre-cut
a little pieces are these and then anytime you need to add something to
your pretty tight
you can write it down and then very quickly stick that on
feel like the placement other are few get negative feedback about it it's
really easy to change it again
we think dan I now feel like for creating a new account that work for you
yet our scrape I so the first thing you do is he just click Create New Account
now in this case if only had one template I would feel the screen often
put another one down
but I got two templates so I wanna show on the user profile template
so this will take you to the user profile page and here you be filling out
your user profile form
now before you start again I wanna go back to these on pre-printed labels
another thing that you can do as you can use highlighters
and you can arm serve cali's up a little bit and
damn is your clicking through the formal Mets ones that we were thinking about
is having these form elements highlight when you click inside to them
to come to show you where you are do you think that would be distracting or do
you think that's something that would actually help you
fill out this form I think be incredibly useful that's often
difficult to see where you are special in a mobile device cool alright
so we'll go ahead and make a know that make sure that we keep that interaction
and the other thing is when you click on this because it's a a tablet-based
device
you're probably gonna be keyboard comes up on the bottom as I can be distracting
you think that's gonna be okay
know that's typical behavior on attempt by so I can it be okay with that ice
that's not a problem again that's where these pre-printed UI on its really come
in handy
you can swap them out you can overlay them on the screen and simulate was
actually gonna be happening in the device so that's really cool
right so what you do again just take a look at the arm user profile page
and no give me some feedback as to whether it's ok very clear to you
you see what you're expecting are you have some questions about some other
are the top portion looks pretty much like are expected to but this
bottom portion I am a little confused
about where these different I'd argue sizzle question marks
okay good click on a I know when you click that amo when this gonna pop up
and this is what I really like post it notes for even if it's just spur the
moment you're thinking well more when they would work really well here
this post it notes are often the exact right size to do that so
fine just say okay damn post it notes this post in its gonna simulate a modal
window
what's gonna happen is this going to tell you are what a little bit more
detail about what your food preferences are
and the fact that this is optional it's not required to fill this out
it's optional so it's gonna let you give you a little bit more information and
feedback about that you think that's helpful
yes I do okay extremely helpful
so that will be clear how it is it's a little confusing you said that
I would have to open up the modal window a to actually see if it was required or
not
ok I would like to be able to see that from out this is this not to a fairly
clear that it's not as optional it's not require
correct okay awesome there are a lot of things that when you're testing and
evaluating your paper prototypes you can change right away
but some other changes like this one for example you prolly gonna evaluate that
think about it as a team and that's where my index cards come in
so and these index cards and as for testing and evaluating
if something are over problem like this comes up with us or to write it down
and I've got this board behind me air on the board we are some categories
that a group based upon the type of observation that's being made
so this one deals with interaction so it's gonna go in that grouping there
would you mind putting up on work for me
now the great thing about this is that you can place always up on the board and
then
after the testing is finished your team can go back take a look at these
and then reorganize and based on the priority now search going to focus on
for the next generation a prototype dan thanks a lot projectile meow
now what my favorite things about paper prototypes is the way they stimulate the
imagination
I think it's a vital part of the creative process in one of the reasons
that I like them so much
encourage you to play around the techniques that have shown you here as
well as coming up with your own techniques
for building creative paper prototypes
a membership to Linda dot com unlocks this entire course
and hundreds of others visit Linda dot com to learn more