0:00:01.077,0:00:02.904
Hi there, welcome back!
0:00:02.904,0:00:08.483
Early on the course, I outlined a design process that favours rapid exploration early on.
0:00:08.483,0:00:11.466
Now let’s learn how to actually accomplish that.
0:00:11.466,0:00:16.249
In this video, we’ll dive into three techniques for rapidly producing prototypes.
0:00:17.233,0:00:22.915
Over the course of your project, the fidelity of the prototypes that you create is going to increase,
0:00:22.915,0:00:27.298
and you’ll want to pick tools that reflect where you’re at in terms of the design process,
0:00:27.298,0:00:31.942
not using stuff that’s too high-fidelity and too time-consuming early on.
0:00:31.942,0:00:37.059
So, for example, you might start out by storyboarding, which is the first technique we’ll learn today.
0:00:37.059,0:00:40.909
That will give you a sense of the tasks and the scenarios you’d like to support.
0:00:40.909,0:00:45.366
Then you might move on to paper prototypes, and from there digital mockups.
0:00:45.366,0:00:49.331
Then, if you’re in the web domain, some static HTML.
0:00:49.331,0:00:54.410
And, only then, get dynamic — add in the database and the other fancy parts.
0:00:54.410,0:00:57.887
Picking the right tool for the job helps you focus on the questions that you have
0:00:57.887,0:01:00.991
at that particular stage of the design process.
0:01:00.991,0:01:03.617
So, in the video we’re going to talk about storyboarding,
0:01:03.617,0:01:05.873
creating and testing paper prototypes,
0:01:05.873,0:01:08.391
and moving on to digital mockups.
0:01:08.391,0:01:11.794
One of the easiest mistakes to make in interface design
0:01:11.794,0:01:18.586
is to focus on the user interface before you focused on the tasks that the interface’s going to support.
0:01:18.586,0:01:21.650
And, if you got one thing out of storyboarding,
0:01:21.650,0:01:26.714
the piece to understand is that storyboarding is all about tasks.
0:01:26.714,0:01:33.630
Here’s an example from the “Lifealyfics” project team from my Stanford HCI class in the Fall of 2011.
0:01:33.630,0:01:36.745
They were interested in user interfaces for behaviour tracking,
0:01:36.745,0:01:39.948
and here are a couple of the early storyboards that they produced.
0:01:39.948,0:01:41.639
What’s nice about a storyboard is
0:01:41.639,0:01:46.712
in just a few panels you can convey what the user interface will help a person accomplish.
0:01:46.712,0:01:51.301
And a good storyboard is nearly always going to have an actual person in there.
0:01:51.301,0:01:55.203
Another thing that you can see in these storyboards is that they communicate flow:
0:01:55.203,0:02:00.130
Much like a comic strip, it’s showing what’s happening at key points in time.
0:02:00.130,0:02:05.179
One of the biggest worries about creating storyboards is that they’d tell me “Ugh, I can’t draw!”
0:02:05.179,0:02:09.839
But storyboarding isn’t about beautiful drawing; it’s about communicating ideas,
0:02:09.839,0:02:14.283
and I think that everyone can learn how to visually communicate ideas.
0:02:14.283,0:02:20.326
In some ways, bad drawing is actually an asset, because then all you can do is focus on the content.
0:02:20.326,0:02:25.265
I said that good storyboards nearly always include a person who’s actually using the interface,
0:02:25.265,0:02:30.007
and so, to get you started, I’d like to teach you my favourite trick for storyboarding.
0:02:30.007,0:02:34.817
I learnt this from Bill Verplank. Bill and I taught together at Stanford for several years.
0:02:34.817,0:02:40.909
And Bill, [inaudible] for generations, has taught people how to draw “Star People”, and it goes like this:
0:02:40.909,0:02:41.861
[Professor Klemmer starts drawing a “star person”]
0:02:43.045,0:02:46.949
We call it a “star person” because the body of the person is kind of like a star,
0:02:46.949,0:02:51.590
and you can have them doing all sorts of things, so somebody can be holding something,
0:02:51.590,0:02:58.460
or they can be reaching up to touch maybe something on a big screen.
0:02:58.460,0:03:01.302
You can add any dynamics that you want.
0:03:01.302,0:03:04.373
If you need to, you can show where people are looking.
0:03:04.373,0:03:06.777
If you want, you can distinguish different people in the scenes —
0:03:06.777,0:03:14.502
so you can colour them in a little bit, or you can add a sheriff’s badge.
0:03:15.641,0:03:17.978
And, when you put it all together, you can get something like this.
0:03:17.978,0:03:22.957
These are some images from the storyboarding guide that we’ve linked from your assignment.
0:03:22.957,0:03:27.117
One of the very first things a storyboard should do is to illustrate a goal.
0:03:27.117,0:03:30.999
Like in this storyboard, it’s “Let’s check out places in SF!”
0:03:30.999,0:03:35.050
You can show how a task unfolds, and here you can see some “star people”,
0:03:35.050,0:03:39.246
and they’re explaining what they’re doing, so here they’s saying “Here we’re in San Francisco.”
0:03:39.246,0:03:43.563
And by the end of the storyboard you’ll want to show how they accomplished what their goal was,
0:03:43.563,0:03:48.999
or, in some other way, have a satisfactory outcome at the end of the storyboard.
0:03:49.523,0:03:50.978
And as a mall shows,
0:03:50.978,0:03:55.682
even with a really simple visual language, there’s a whole lot you can do to get your point across.
0:03:56.113,0:03:58.233
So, storyboards should accomplish three things:
0:03:58.233,0:04:02.155
First, it should accomplish the setting: Who are the people involved?
0:04:02.155,0:04:05.819
what’s the environment? and what tasks are they trying to do?
0:04:05.819,0:04:12.535
Next, it should show the sequence: What are the steps that they do to accomplish the task? —
0:04:12.535,0:04:17.211
Not necessarily what user interface’s exactly where the buttons and widgets are,
0:04:17.211,0:04:23.289
but what role the user interface plays in helping them get their goal achieved.
0:04:23.289,0:04:28.711
And one the the first steps is going to be: What leads somebody to use the app?
0:04:28.711,0:04:34.479
In the mall’s example, that began with somebody saying “Let’s check out places in San Francisco!”
0:04:34.479,0:04:38.046
That’s the springboard that clearly motivates people to go to the application.
0:04:38.046,0:04:46.629
And then your app can easily and clearly show what’s the task that the idea you have is supporting.
0:04:46.629,0:04:49.613
And then finally, at the end, you’ve got the satisfaction —
0:04:49.613,0:04:53.285
How does what motivated them to use the app in the first place,
0:04:53.285,0:04:58.640
how does that connect to their achieving that in the end of the sequence?
0:04:58.640,0:05:02.124
Questions your storyboard can help you think about are:
0:05:02.124,0:05:06.819
“What is it that enables people to accomplish, and what need does your application fill?”
0:05:06.819,0:05:10.318
I really like storyboards for their holistic focus;
0:05:10.318,0:05:14.108
it enables you to think through how you might support a task
0:05:14.108,0:05:17.620
without committing to a particular user interface —
0:05:17.620,0:05:23.203
that’s the magic, and this is especially important when you’re designing as a team,
0:05:23.203,0:05:29.207
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.
0:05:29.207,0:05:33.095
Or, you may have this great idea, but people don’t know what you’re talking about yet.
0:05:33.095,0:05:38.271
Once you’ve got it out on paper and concrete, it makes it much easier for poeple to have common ground,
0:05:38.271,0:05:41.013
and agree on how to move forward.
0:05:41.013,0:05:44.872
When you’re storyboarding, I suggest imposing extremely harsh time limits on yourself,
0:05:44.872,0:05:47.727
like 10 minutes for a storyboard.
0:05:47.727,0:05:52.892
It can be easy to try and get everything beautiful even if you’re sketching out with pen and paper,
0:05:52.892,0:05:54.828
but that’s not the point!
0:05:54.828,0:05:58.163
Once you’ve got a rough idea of what your application’s going to accomplish,
0:05:58.163,0:06:00.953
you can start to think about how you’re going to implement that,
0:06:00.953,0:06:04.844
and by implement I mean “What’s it going to look and feel like to the user?
0:06:04.844,0:06:07.378
What’s the actual user interface is going to be?”
0:06:07.378,0:06:10.558
And for figuring out the user interface at an early stage,
0:06:10.558,0:06:15.405
the very best technique that I know is to use paper prototyping.
0:06:15.405,0:06:18.096
Paper prototyping is exactly what it sounds like:
0:06:18.096,0:06:23.372
You’re going to make a mockup of the user interface, and, instead of doing it on the computer,
0:06:23.372,0:06:27.784
which can take a lot of time and encourage you to try to get it beautiful and exact,
0:06:27.784,0:06:32.736
you’re going to use paper, Post-It notes, and markers, to sketch things out really quickly.
0:06:32.736,0:06:36.021
Here’s an example, it’s again from the “Lifealyfics” team.
0:06:36.021,0:06:39.382
These are the paper prototypes that they made:
0:06:39.390,0:06:40.767
(Lifealyfics / Discover What Makes You Happy / (Begin)
0:06:40.767,0:06:42.067
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?)
0:06:42.067,0:06:43.398
3. At the end of the week, we’ll send you your results, and you’ll realize what makes you happy and fulfilled! / (Start)
0:06:43.398,0:06:46.036
Step 1 of 3 / Enter phone number [text field] / (Next)
0:06:46.052,0:06:48.229
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]
0:06:48.229,0:06:49.532
Step 2 of 3 / How many times per day do you want to get a text?
0:06:49.532,0:06:50.821
Step 2 of 3 / How many times per day do you want to get a text? / (Next)
0:06:50.821,0:06:53.167
Step 3 of 3 / Earliest text: [dropdown] / Latest text: [dropdown] / (Next) )
0:07:07.049,0:07:10.585
Here’s some tips for making effective paper prototypes:
0:07:10.585,0:07:13.245
First, store all your materials in one place.
0:07:13.245,0:07:20.528
You’re going to want to get a bucket of markers, maybe some Post-It notes or index cards.
0:07:20.528,0:07:26.190
If you’ve got a mobile device that you’re simulating, you might even make a mockup of something like that,
0:07:26.190,0:07:29.166
and you can slide in and out different interface widgets.
0:07:29.658,0:07:32.602
Just like the storyboards, it’s important to work quickly.
0:07:32.602,0:07:34.738
And if you had a widget that you’re going to use a lot of —
0:07:34.738,0:07:38.291
like radio buttons or sliders or something like that —
0:07:38.310,0:07:41.239
sometimes it can be faster to photocopy them on a photocopier,
0:07:41.239,0:07:48.829
so you can make one version and then photocopy it to have a whole bunch.
0:07:48.829,0:07:52.586
Sometimes, good paper prototyping is kind of like playing make-believe as a kid.
0:07:52.586,0:07:56.242
So, if you’ve got something that’s complicated or highly interactive,
0:07:56.242,0:07:58.307
you can just imagine what it would be like,
0:07:58.307,0:08:02.699
and so you can role-play that out with the person who’s trying out your application.
0:08:02.884,0:08:05.561
It can be helpful to have a frame to put your interface widgets in.
0:08:05.561,0:08:07.836
Here we have a mobile frame.
0:08:07.836,0:08:12.344
You can also stick things right on the device itself,
0:08:12.344,0:08:16.512
So, if you want to make a mobile screen shot here,…
0:08:21.943,0:08:24.850
Mobile user interface!
0:08:25.558,0:08:30.508
Or, if you have a desktop user interface, you can take, like, a 11-by-14 sheet of poster board
0:08:30.508,0:08:32.769
and put all of your elements on that.
0:08:32.769,0:08:36.215
Good paper prototyping is also like collage — you can mix and match fidelities.
0:08:36.215,0:08:41.234
So you can use printouts of actual screen shots; draw and annotate on top of that —
0:08:41.234,0:08:43.989
anything that you want that can get your point quickly.
0:08:43.989,0:08:46.780
And to help the person who’s trying out the prototype
0:08:46.780,0:08:51.435
make the conceptual leap between the sketch on paper and an interactive system,
0:08:51.435,0:08:55.339
you can add in a little widgets and chrome of your user interface
0:08:55.339,0:08:58.122
to convey that it’s part of a larger operating system.
0:08:58.122,0:09:01.839
Paper prototyping is not only fast and efficient;
0:09:01.839,0:09:08.184
it’s also really fun, and you can get really creative in figuring out different ways to convey interactions.
0:09:08.184,0:09:12.953
If you’ve got layers in your user interface, you can use transparencies as a way of showing them.
0:09:13.861,0:09:16.541
If you have popup menus, you can make the back sticky,
0:09:16.541,0:09:20.551
so that can stay on the right place on top of the main interface.
0:09:20.551,0:09:23.090
You [can] use any kind of marker or pen you want;
0:09:23.090,0:09:29.192
you can have things be coloured, [or] just black-and-white — Anything you can think of.
0:09:29.192,0:09:37.014
You can use poster board (like this), or cardboard, index cards, foamcore —
0:09:37.014,0:09:40.766
anything you want as a backing material.
0:09:40.766,0:09:43.730
Things like tape are handy to have around.
0:09:43.730,0:09:49.002
If you’d like to be able to have repeatable user input, you can use whiteboard markers or transparency pens,
0:09:49.002,0:09:53.145
and have a whiteboard or a sheet or transparency that the user input goes on,
0:09:53.145,0:09:55.811
and then you can take it away when you’re done.
0:09:55.811,0:10:00.647
To be able to add structure to your user interface, you can have line widths of different thicknesses.
0:10:00.647,0:10:07.443
So, you can have a thicker line that’s for the major elements, and a thinner line for the minor elements.
0:10:09.319,0:10:15.130
And you can have a stack or either Post-It notes or index cards to show the tab panes of your user interface.
0:10:15.130,0:10:19.396
So, the different layers can be on sheets beneath.
0:10:19.396,0:10:22.345
Here you can see a wonderful widget from the “Lifealyfics” team,
0:10:22.345,0:10:27.017
where they’ve created a sliding window inside a mobile phone mockup
0:10:27.017,0:10:32.234
as a way of conveying how something would change over time and in response to user input.
0:10:32.234,0:10:35.920
The other thing that I’m going to show here, and I’ll touch on several times in this course,
0:10:35.920,0:10:39.338
is the importance of trying out multiple different alternative prototypes
0:10:39.338,0:10:42.196
as a way of getting more valuable feedback from the user.
0:10:42.196,0:10:48.372
So, here are different ways that you could present the data that a live logging system is gathering.
0:10:48.372,0:10:52.397
Another reason I really like paper prototyping is that everybody can be involved.
0:10:52.397,0:10:57.666
So, if you try out designs with users, give them a pen and have them modify the interface!
0:10:57.666,0:11:01.179
Or if they’ve got stuck or think something is weird,
0:11:01.179,0:11:05.218
grab a sheet of paper and make any modifications that you need.
0:11:05.218,0:11:11.057
You can bring paper prototyping tools into the boardroom, you can bring to clients —
0:11:11.057,0:11:13.609
any of the stakeholders that are involved in user interface design,
0:11:13.609,0:11:16.160
you can get them involved in paper prototyping.
0:11:16.160,0:11:18.682
That helps them get their ideas into the system
0:11:18.682,0:11:22.444
and empowers them to play a more active role in the design process.
0:11:22.444,0:11:28.425
Once you’re ready to move on from paper prototyping, a useful next step can be to make a digital mockup.
0:11:28.425,0:11:30.282
Here’s an example of some mockups
0:11:30.282,0:11:35.934
that my research team made for a collaboration with anesthesiologists in the medical school at Stanford.
0:11:36.673,0:11:38.465
The first thing I’d like to point out about this
0:11:38.465,0:11:42.232
is that you can see that a lot more time went into this digital mockup
0:11:42.232,0:11:45.402
than into the paper prototypes that we’ve been talking about so far.
0:11:45.402,0:11:49.103
And that’s one of the reasons why I think paper prototyping is so important.
0:11:49.103,0:11:53.020
But there does come a time where you’ll want to get more specific about pixels,
0:11:53.020,0:11:56.803
and that’s when digital mockups can play an important role.
0:11:56.803,0:12:02.133
As your prototypes increase in fidelity — from storyboards, to paper prototypes, to digital mockups —
0:12:02.133,0:12:07.084
the kinds of evaluation and feedback that you’re going to get from people are going to evolve also.
0:12:07.084,0:12:10.439
So, early on, you might be talking about scenarios with people.
0:12:10.439,0:12:12.245
And then, with the paper prototype,
0:12:12.245,0:12:16.755
you might be running these informal “Try these out, here’s three alternatives” tests.
0:12:17.294,0:12:21.183
These prototypes can also be useful for critiques within your design team.
0:12:21.183,0:12:23.754
And as you get to higher and higher fidelity mockups,
0:12:23.754,0:12:28.466
you can have the opportunity to get to more formal experimentation techniques.
0:12:29.374,0:12:32.853
Rapid prototyping techniques are probably the most valuable weapon you’ll have
0:12:32.853,0:12:34.864
in a human-centred design process.
0:12:34.864,0:12:38.586
And if you’re interested in learning more, here are some resources that I recommend.
0:12:38.586,0:12:41.524
I’ll see you next time.