Storyboards, Paper Prototypes, and Mockups

In this video, we're going to introduce prototyping techniques.

Over the course of your design project, you're going to start out at the beginning

with low fidelity prototyping techniques.

At the beginning of a design you don't want to jump right into code,

because it's hard to know exactly what you're going to do.

Nearly all designs pivot several times.

So at the beginning of a design project you might start out with storyboards

that show the overall interaction.

As you continue,

you may get to paper prototypes that start to specify the user interface.

And then build something that's a pixel level digital mock-up,

wire frames, then get to something interactive, but that has canned content.

And then over time you may add in the database and get it ready to launch.

So let's talk about storyboarding.

When you create a storyboard for

a design, people are sometimes shy because they're like well,

I can't draw, I can't do that part, but storyboarding's not about pretty pictures.

Storyboarding is about conveying an idea.

So, for example, here on the screen you can see an evening out in San Francisco.

And a user interface that helps you find restaurants and fun things to do.

What I like about story boarding is that the actual details of where the buttons

go, the exact interaction, the story board doesn't show that.

Because at a storyboard level what you're trying to figure out is,

is this the right idea?

Does it solve a real problem?

Does it meet a user need?

Is it sticky?

So what makes for a good storyboard?

A storyboard takes you from a setting, something that starts out

at the beginning where you've got a problem or a need or an opportunity.

A storyboard takes you from the setting through to satisfaction.

And the setting of the storyboard shows you who are the people involved,

what's the environment, and what's the task that they're trying to accomplish.

So in this example, in Amal's drawing, there's some friends who are out in

San Francisco, they're looking for something to do, that's the setting.

The middle frames of a storyboard will then show you the sequence.

What steps are involved?

How do you get from the setting using your design?

What would lead somebody, if you're making a mobile phone app for example,

what would lead somebody to use that app?

What's the task and how does it unfold?

At the end of it you have the satisfaction, you've gotten to the point

where the interface has helped alleviate whatever the problem was or

achieved whatever the opportunity was at the beginning.

This holistic focus helps you understand how the interface accomplishes the task

and avoids commitment to a particular user interface.

And it helps all the stakeholders, the clients, the developers, the design team,

the management, everybody, get on the same page.

If you have a storyboard that's compelling, you can then say yeah,

let's build this.

Here's another example of a storyboard from our online class.

And here's a third example.

This is courtesy of Patrick Mooney.

All of these storyboards take you from a setting to satisfaction.

I'd like to give you one tip in terms of creating your storyboards

that'll make it a lot easier to put people in them.

This is a strategy that I learned from Bill Verplank.

If you've got a person that you want to be able to draw,

we can create star people here, super simple.

A circle for a head, boo, boo, boo, boom.

You've got the star, and there's a person.

What's great about these star people is they can be doing all sorts of things.

So, for example, you could have somebody who is

holding a flag or they could have a hat.

There could be a sheriff.

There could be a newspaper reporter.

You can annotate them in any way you want.

So this person could be hungry, or sad, or excited.

If you're creative, you can add extra bits on top of that, so jumping out.

Any cartooning techniques that you want to try are great and

what you can see here is it doesn't really take any artistic skill.

It's much more about conveying the story.

Okay, so now you know what task you want to solve and

it's time to start to think through the interface to solve it.

Don't jump to code yet.

Among other reasons, that will make you psychologically committed to

the particular thing you've got.

What you want to be able to do is you're going to make a paper prototype.

And when I talk to students many years on who have taken this class,

what they say is most valuable out of this class often

is the idea that you can rapidly prototype things in paper.

So we see that here with this interface from Lyfalyze, which is a student project.

A paper prototype is exactly that.

You're going to take your user interface idea and draw it on a sheet of paper.

This is an example of a mobile phone interface.

It's much bigger than a mobile phone.

If you've got a phone because you're going to have it be drawn,

it might be more like eight by ten, or six by eight, or something like that.

And it's really fun to make.

So here you see a bunch of widgets, buttons, sliders, all sorts of stuff.

And in this video you can see how the dynamics of the interface unfold.

So what makes for a good paper prototype?

I think there are six things to make sure you focus on.

First, work fast, this is not going to take you a week.

You're not going in with the details to make a perfect drawing, boom,

five minutes, maybe ten.

To help you do that, it can often be good to go to a photocopy machine,

make a bunch of copies of reusable widgets.

If you've got a screen that's going to appear with lots of variations,

make copies of that.

Buttons, sliders, all sorts of stuff.

And then get a box to be able to put it all in together

because otherwise these things will get lost.

The next person to go in and

use your meeting room's going to find all sorts of little paper bits all over.

Some things are hard to do on paper,

which causes people to shy away from it, but don't.

If it's difficult to simulate, or as you're talking through something with

somebody and you need a new thing on the fly, just describe it or even draw it.

Having a background, the screen frame, something like that, can help

give a setting of what's going on in terms of the entire holistic experience.

And because these are early prototypes that are designed for

dialogue, they don't need to be all of the same fidelity.

You could have something that might be your old user interface out of pixels,

and you draw on top of that with sketches.

Or you can mix things that are hardware and software, things that are real and

things that are drawn in in real time, anything you want.

And to help people get in the mindset of thinking of this as a real system,

you might add in familiar operating system elements.

So if I've got my mobile phone UI here,

I might add in the carrier and my WiFi and time,

stuff like that, to make it seem more real.

Transparent are awesome for being able to add widgets on this.

You can use any materials you want.

There's really no rules here and a lot of it is about you and your team having fun.

Here's just some examples of some other stuff that you can use from

sharpies to poster board, index cards are handy, all of this stuff.

And the goal of prototypes, because you are iterating over time,

is you are making a prototype in order to get feedback from stakeholders.

That's other members of your design team, that's going to be users,

it's going to be your management, the client, everybody.

If you can bring in multiple different prototypes,

you're going to get much better feedback.

And you want to have an emphasis be on the conversation.

These prototypes in many ways are ice breakers

to be able to get people's creative juices flowing and get the conversation started.

They're not a okay, here's what we're going to build, done.

This is a great example again from Lifalyze where you can test multiple

prototypes to get value.

Here you see a sliding paper thing, super helpful.

And because this is so rapid, bring your Sharpies and photocopied paper,

and all of your design materials in to your design team and users discussions,

because you can have people on the fly make their own user interface.

And so if something doesn't work, or they have a great idea, you say all right,

here's your Sharpie, make what you think would work.

So once you've figured out the task that you're accomplishing with the storyboard,

and you've figured out the rough user interface experience that's going to

happen in the paper prototype, now it's time to go to pixels.

And here you can use Photoshop or Keynote, PowerPoint,

any Slide software you've got, to start to be able to make a digital mock-up.

This is an example that we made in a research project at Stanford,

working with medical doctors for checklists in surgery.

And what was great about getting to these digital mocks is you can start to

reason about what's going to fit on the screen well.

And we went through exactly the process that I'm talking about here.

What you've seen in this video is that the form of your prototype, storyboards,

paper prototypes, mocks, digital stuff, will change what kind of feedback you get.

Here you're talking about the task, the scenario.

With paper prototypes you're getting the high level UI.

As you get to mock-ups, you may have more formal design critiques.

And then when you get something interactive,

that's the time where you can actually more controlled experiments.

Have fun.

Design Centrado no Ser Humano: Introdução

Conheça os instrutores

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.