Lecture 3.1: Paper Prototypes and Mockups (12:47)

Hi there, welcome back!

Early on the course, I outlined a design process that favours rapid exploration early on.

Now let’s learn how to actually accomplish that.

In this video, we’ll dive into three techniques for rapidly producing prototypes.

Over the course of your project, the fidelity of the prototypes that you create is going to increase,

and you’ll want to pick tools that reflect where you’re at in terms of the design process,

not using stuff that’s too high-fidelity and too time-consuming early on.

So, for example, you might start out by storyboarding, which is the first technique we’ll learn today.

That will give you a sense of the tasks and the scenarios you’d like to support.

Then you might move on to paper prototypes, and from there digital mockups.

Then, if you’re in the web domain, some static HTML.

And, only then, get dynamic — add in the database and the other fancy parts.

Picking the right tool for the job helps you focus on the questions that you have

at that particular stage of the design process.

So, in the video we’re going to talk about storyboarding,

creating and testing paper prototypes,

and moving on to digital mockups.

One of the easiest mistakes to make in interface design

is to focus on the user interface before you focused on the tasks that the interface’s going to support.

And, if you got one thing out of storyboarding,

the piece to understand is that storyboarding is all about tasks.

Here’s an example from the “Lifealyfics” project team from my Stanford HCI class in the Fall of 2011.

They were interested in user interfaces for behaviour tracking,

and here are a couple of the early storyboards that they produced.

What’s nice about a storyboard is

in just a few panels you can convey what the user interface will help a person accomplish.

And a good storyboard is nearly always going to have an actual person in there.

Another thing that you can see in these storyboards is that they communicate flow:

Much like a comic strip, it’s showing what’s happening at key points in time.

One of the biggest worries about creating storyboards is that they’d tell me “Ugh, I can’t draw!”

But storyboarding isn’t about beautiful drawing; it’s about communicating ideas,

and I think that everyone can learn how to visually communicate ideas.

In some ways, bad drawing is actually an asset, because then all you can do is focus on the content.

I said that good storyboards nearly always include a person who’s actually using the interface,

and so, to get you started, I’d like to teach you my favourite trick for storyboarding.

I learnt this from Bill Verplank. Bill and I taught together at Stanford for several years.

And Bill, [inaudible] for generations, has taught people how to draw “Star People”, and it goes like this:

[Professor Klemmer starts drawing a “star person”]

We call it a “star person” because the body of the person is kind of like a star,

and you can have them doing all sorts of things, so somebody can be holding something,

or they can be reaching up to touch maybe something on a big screen.

You can add any dynamics that you want.

If you need to, you can show where people are looking.

If you want, you can distinguish different people in the scenes —

so you can colour them in a little bit, or you can add a sheriff’s badge.

And, when you put it all together, you can get something like this.

These are some images from the storyboarding guide that we’ve linked from your assignment.

One of the very first things a storyboard should do is to illustrate a goal.

Like in this storyboard, it’s “Let’s check out places in SF!”

You can show how a task unfolds, and here you can see some “star people”,

and they’re explaining what they’re doing, so here they’s saying “Here we’re in San Francisco.”

And by the end of the storyboard you’ll want to show how they accomplished what their goal was,

or, in some other way, have a satisfactory outcome at the end of the storyboard.

And as a mall shows,

even with a really simple visual language, there’s a whole lot you can do to get your point across.

So, storyboards should accomplish three things:

First, it should accomplish the setting: Who are the people involved?

what’s the environment? and what tasks are they trying to do?

Next, it should show the sequence: What are the steps that they do to accomplish the task? —

Not necessarily what user interface’s exactly where the buttons and widgets are,

but what role the user interface plays in helping them get their goal achieved.

And one the the first steps is going to be: What leads somebody to use the app?

In the mall’s example, that began with somebody saying “Let’s check out places in San Francisco!”

That’s the springboard that clearly motivates people to go to the application.

And then your app can easily and clearly show what’s the task that the idea you have is supporting.

And then finally, at the end, you’ve got the satisfaction —

How does what motivated them to use the app in the first place,

how does that connect to their achieving that in the end of the sequence?

Questions your storyboard can help you think about are:

“What is it that enables people to accomplish, and what need does your application fill?”

I really like storyboards for their holistic focus;

it enables you to think through how you might support a task

without committing to a particular user interface —

that’s the magic, and this is especially important when you’re designing as a team,

because the idea that’s in your head may or may not be the same as the idea that’s in somebody else’s head.

Or, you may have this great idea, but people don’t know what you’re talking about yet.

Once you’ve got it out on paper and concrete, it makes it much easier for poeple to have common ground,

and agree on how to move forward.

When you’re storyboarding, I suggest imposing extremely harsh time limits on yourself,

like 10 minutes for a storyboard.

It can be easy to try and get everything beautiful even if you’re sketching out with pen and paper,

but that’s not the point!

Once you’ve got a rough idea of what your application’s going to accomplish,

you can start to think about how you’re going to implement that,

and by implement I mean “What’s it going to look and feel like to the user?

What’s the actual user interface is going to be?”

And for figuring out the user interface at an early stage,

the very best technique that I know is to use paper prototyping.

Paper prototyping is exactly what it sounds like:

You’re going to make a mockup of the user interface, and, instead of doing it on the computer,

which can take a lot of time and encourage you to try to get it beautiful and exact,

you’re going to use paper, Post-It notes, and markers, to sketch things out really quickly.

Here’s an example, it’s again from the “Lifealyfics” team.

These are the paper prototypes that they made:

(Lifealyfics / Discover What Makes You Happy / (Begin)

Here’s How It Works / 1. We’ll send you random texts throughout the day, at the frequency you select. / 2. You input your [illegible] and activity / (Then What?)

3. At the end of the week, we’ll send you your results, and you’ll realize what makes you happy and fulfilled! / (Start)

Step 1 of 3 / Enter phone number [text field] / (Next)

The more texts you respond to, the more accurate your personal graph will be! / How many texts per day do you want to receive? [dropdown]

Step 2 of 3 / How many times per day do you want to get a text?

Step 2 of 3 / How many times per day do you want to get a text? / (Next)

Step 3 of 3 / Earliest text: [dropdown] / Latest text: [dropdown] / (Next) )

Here’s some tips for making effective paper prototypes:

First, store all your materials in one place.

You’re going to want to get a bucket of markers, maybe some Post-It notes or index cards.

If you’ve got a mobile device that you’re simulating, you might even make a mockup of something like that,

and you can slide in and out different interface widgets.

Just like the storyboards, it’s important to work quickly.

And if you had a widget that you’re going to use a lot of —

like radio buttons or sliders or something like that —

sometimes it can be faster to photocopy them on a photocopier,

so you can make one version and then photocopy it to have a whole bunch.

Sometimes, good paper prototyping is kind of like playing make-believe as a kid.

So, if you’ve got something that’s complicated or highly interactive,

you can just imagine what it would be like,

and so you can role-play that out with the person who’s trying out your application.

It can be helpful to have a frame to put your interface widgets in.

Here we have a mobile frame.

You can also stick things right on the device itself,

So, if you want to make a mobile screen shot here,…

Mobile user interface!

Or, if you have a desktop user interface, you can take, like, a 11-by-14 sheet of poster board

and put all of your elements on that.

Good paper prototyping is also like collage — you can mix and match fidelities.

So you can use printouts of actual screen shots; draw and annotate on top of that —

anything that you want that can get your point quickly.

And to help the person who’s trying out the prototype

make the conceptual leap between the sketch on paper and an interactive system,

you can add in a little widgets and chrome of your user interface

to convey that it’s part of a larger operating system.

Paper prototyping is not only fast and efficient;

it’s also really fun, and you can get really creative in figuring out different ways to convey interactions.

If you’ve got layers in your user interface, you can use transparencies as a way of showing them.

If you have popup menus, you can make the back sticky,

so that can stay on the right place on top of the main interface.

You [can] use any kind of marker or pen you want;

you can have things be coloured, [or] just black-and-white — Anything you can think of.

You can use poster board (like this), or cardboard, index cards, foamcore —

anything you want as a backing material.

Things like tape are handy to have around.

If you’d like to be able to have repeatable user input, you can use whiteboard markers or transparency pens,

and have a whiteboard or a sheet or transparency that the user input goes on,

and then you can take it away when you’re done.

To be able to add structure to your user interface, you can have line widths of different thicknesses.

So, you can have a thicker line that’s for the major elements, and a thinner line for the minor elements.

And you can have a stack or either Post-It notes or index cards to show the tab panes of your user interface.

So, the different layers can be on sheets beneath.

Here you can see a wonderful widget from the “Lifealyfics” team,

where they’ve created a sliding window inside a mobile phone mockup

as a way of conveying how something would change over time and in response to user input.

The other thing that I’m going to show here, and I’ll touch on several times in this course,

is the importance of trying out multiple different alternative prototypes

as a way of getting more valuable feedback from the user.

So, here are different ways that you could present the data that a live logging system is gathering.

Another reason I really like paper prototyping is that everybody can be involved.

So, if you try out designs with users, give them a pen and have them modify the interface!

Or if they’ve got stuck or think something is weird,

grab a sheet of paper and make any modifications that you need.

You can bring paper prototyping tools into the boardroom, you can bring to clients —

any of the stakeholders that are involved in user interface design,

you can get them involved in paper prototyping.

That helps them get their ideas into the system

and empowers them to play a more active role in the design process.

Once you’re ready to move on from paper prototyping, a useful next step can be to make a digital mockup.

Here’s an example of some mockups

that my research team made for a collaboration with anesthesiologists in the medical school at Stanford.

The first thing I’d like to point out about this

is that you can see that a lot more time went into this digital mockup

than into the paper prototypes that we’ve been talking about so far.

And that’s one of the reasons why I think paper prototyping is so important.

But there does come a time where you’ll want to get more specific about pixels,

and that’s when digital mockups can play an important role.

As your prototypes increase in fidelity — from storyboards, to paper prototypes, to digital mockups —

the kinds of evaluation and feedback that you’re going to get from people are going to evolve also.

So, early on, you might be talking about scenarios with people.

And then, with the paper prototype,

you might be running these informal “Try these out, here’s three alternatives” tests.

These prototypes can also be useful for critiques within your design team.

And as you get to higher and higher fidelity mockups,

you can have the opportunity to get to more formal experimentation techniques.

Rapid prototyping techniques are probably the most valuable weapon you’ll have

in a human-centred design process.

And if you’re interested in learning more, here are some resources that I recommend.

I’ll see you next time.