[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.08,0:00:02.90,Default,,0000,0000,0000,,Hi there, welcome back!
Dialogue: 0,0:00:02.90,0:00:08.48,Default,,0000,0000,0000,,Early on the course, I outlined a design process that favours rapid exploration early on.
Dialogue: 0,0:00:08.48,0:00:11.47,Default,,0000,0000,0000,,Now let’s learn how to actually accomplish that.
Dialogue: 0,0:00:11.47,0:00:16.25,Default,,0000,0000,0000,,In this video, we’ll dive into three techniques for rapidly producing prototypes.
Dialogue: 0,0:00:17.23,0:00:22.92,Default,,0000,0000,0000,,Over the course of your project, the fidelity of the prototypes that you create is going to increase,
Dialogue: 0,0:00:22.92,0:00:27.30,Default,,0000,0000,0000,,and you’ll want to pick tools that reflect where you’re at in terms of the design process,
Dialogue: 0,0:00:27.30,0:00:31.94,Default,,0000,0000,0000,,not using stuff that’s too high-fidelity and too time-consuming early on.
Dialogue: 0,0:00:31.94,0:00:37.06,Default,,0000,0000,0000,,So, for example, you might start out by storyboarding, which is the first technique we’ll learn today.
Dialogue: 0,0:00:37.06,0:00:40.91,Default,,0000,0000,0000,,That will give you a sense of the tasks and the scenarios you’d like to support.
Dialogue: 0,0:00:40.91,0:00:45.37,Default,,0000,0000,0000,,Then you might move on to paper prototypes, and from there digital mockups.
Dialogue: 0,0:00:45.37,0:00:49.33,Default,,0000,0000,0000,,Then, if you’re in the web domain, some static HTML.
Dialogue: 0,0:00:49.33,0:00:54.41,Default,,0000,0000,0000,,And, only then, get dynamic — add in the database and the other fancy parts.
Dialogue: 0,0:00:54.41,0:00:57.89,Default,,0000,0000,0000,,Picking the right tool for the job helps you focus on the questions that you have
Dialogue: 0,0:00:57.89,0:01:00.99,Default,,0000,0000,0000,,at that particular stage of the design process.
Dialogue: 0,0:01:00.99,0:01:03.62,Default,,0000,0000,0000,,So, in the video we’re going to talk about storyboarding,
Dialogue: 0,0:01:03.62,0:01:05.87,Default,,0000,0000,0000,,creating and testing paper prototypes,
Dialogue: 0,0:01:05.87,0:01:08.39,Default,,0000,0000,0000,,and moving on to digital mockups.
Dialogue: 0,0:01:08.39,0:01:11.79,Default,,0000,0000,0000,,One of the easiest mistakes to make in interface design
Dialogue: 0,0:01:11.79,0:01:18.59,Default,,0000,0000,0000,,is to focus on the user interface before you focused on the tasks that the interface’s going to support.
Dialogue: 0,0:01:18.59,0:01:21.65,Default,,0000,0000,0000,,And, if you got one thing out of storyboarding,
Dialogue: 0,0:01:21.65,0:01:26.71,Default,,0000,0000,0000,,the piece to understand is that storyboarding is all about tasks.
Dialogue: 0,0:01:26.71,0:01:33.63,Default,,0000,0000,0000,,Here’s an example from the “Lifealyfics” project team from my Stanford HCI class in the Fall of 2011.
Dialogue: 0,0:01:33.63,0:01:36.74,Default,,0000,0000,0000,,They were interested in user interfaces for behaviour tracking,
Dialogue: 0,0:01:36.74,0:01:39.95,Default,,0000,0000,0000,,and here are a couple of the early storyboards that they produced.
Dialogue: 0,0:01:39.95,0:01:41.64,Default,,0000,0000,0000,,What’s nice about a storyboard is
Dialogue: 0,0:01:41.64,0:01:46.71,Default,,0000,0000,0000,,in just a few panels you can convey what the user interface will help a person accomplish.
Dialogue: 0,0:01:46.71,0:01:51.30,Default,,0000,0000,0000,,And a good storyboard is nearly always going to have an actual person in there.
Dialogue: 0,0:01:51.30,0:01:55.20,Default,,0000,0000,0000,,Another thing that you can see in these storyboards is that they communicate flow:
Dialogue: 0,0:01:55.20,0:02:00.13,Default,,0000,0000,0000,,Much like a comic strip, it’s showing what’s happening at key points in time.
Dialogue: 0,0:02:00.13,0:02:05.18,Default,,0000,0000,0000,,One of the biggest worries about creating storyboards is that they’d tell me “Ugh, I can’t draw!”
Dialogue: 0,0:02:05.18,0:02:09.84,Default,,0000,0000,0000,,But storyboarding isn’t about beautiful drawing; it’s about communicating ideas,
Dialogue: 0,0:02:09.84,0:02:14.28,Default,,0000,0000,0000,,and I think that {\i1}everyone{\i0} can learn how to visually communicate ideas.
Dialogue: 0,0:02:14.28,0:02:20.33,Default,,0000,0000,0000,,In some ways, bad drawing is actually an asset, because then all you can do is focus on the content.
Dialogue: 0,0:02:20.33,0:02:25.26,Default,,0000,0000,0000,,I said that good storyboards nearly always include a person who’s actually using the interface,
Dialogue: 0,0:02:25.26,0:02:30.01,Default,,0000,0000,0000,,and so, to get you started, I’d like to teach you my favourite trick for storyboarding.
Dialogue: 0,0:02:30.01,0:02:34.82,Default,,0000,0000,0000,,I learnt this from Bill Verplank. Bill and I taught together at Stanford for several years.
Dialogue: 0,0:02:34.82,0:02:40.91,Default,,0000,0000,0000,,And Bill, [inaudible] for generations, has taught people how to draw “Star People”, and it goes like this:
Dialogue: 0,0:02:40.91,0:02:41.86,Default,,0000,0000,0000,,[Professor Klemmer starts drawing a “star person”]
Dialogue: 0,0:02:43.04,0:02:46.95,Default,,0000,0000,0000,,We call it a “star person” because the body of the person is kind of like a star,
Dialogue: 0,0:02:46.95,0:02:51.59,Default,,0000,0000,0000,,and you can have them doing all sorts of things, so somebody can be holding something,
Dialogue: 0,0:02:51.59,0:02:58.46,Default,,0000,0000,0000,,or they can be reaching up to touch maybe something on a big screen.
Dialogue: 0,0:02:58.46,0:03:01.30,Default,,0000,0000,0000,,You can add any dynamics that you want.
Dialogue: 0,0:03:01.30,0:03:04.37,Default,,0000,0000,0000,,If you need to, you can show where people are looking.
Dialogue: 0,0:03:04.37,0:03:06.78,Default,,0000,0000,0000,,If you want, you can distinguish different people in the scenes —
Dialogue: 0,0:03:06.78,0:03:14.50,Default,,0000,0000,0000,,so you can colour them in a little bit, or you can add a sheriff’s badge.
Dialogue: 0,0:03:15.64,0:03:17.98,Default,,0000,0000,0000,,And, when you put it all together, you can get something like this.
Dialogue: 0,0:03:17.98,0:03:22.96,Default,,0000,0000,0000,,These are some images from the storyboarding guide that we’ve linked from your assignment.
Dialogue: 0,0:03:22.96,0:03:27.12,Default,,0000,0000,0000,,One of the very first things a storyboard should do is to illustrate a goal.
Dialogue: 0,0:03:27.12,0:03:30.100,Default,,0000,0000,0000,,Like in this storyboard, it’s “Let’s check out places in SF!”
Dialogue: 0,0:03:30.100,0:03:35.05,Default,,0000,0000,0000,,You can show how a task unfolds, and here you can see some “star people”,
Dialogue: 0,0:03:35.05,0:03:39.25,Default,,0000,0000,0000,,and they’re explaining what they’re doing, so here they’s saying “Here we’re in San Francisco.”
Dialogue: 0,0:03:39.25,0:03:43.56,Default,,0000,0000,0000,,And by the end of the storyboard you’ll want to show how they accomplished what their goal was,
Dialogue: 0,0:03:43.56,0:03:48.100,Default,,0000,0000,0000,,or, in some other way, have a satisfactory outcome at the end of the storyboard.
Dialogue: 0,0:03:49.52,0:03:50.98,Default,,0000,0000,0000,,And as a mall shows,
Dialogue: 0,0:03:50.98,0:03:55.68,Default,,0000,0000,0000,,even with a really simple visual language, there’s a whole lot you can do to get your point across.
Dialogue: 0,0:03:56.11,0:03:58.23,Default,,0000,0000,0000,,So, storyboards should accomplish three things:
Dialogue: 0,0:03:58.23,0:04:02.16,Default,,0000,0000,0000,,First, it should accomplish the setting: Who are the people involved?
Dialogue: 0,0:04:02.16,0:04:05.82,Default,,0000,0000,0000,,what’s the environment? and what tasks are they trying to do?
Dialogue: 0,0:04:05.82,0:04:12.54,Default,,0000,0000,0000,,Next, it should show the sequence: What are the steps that they do to accomplish the task? —
Dialogue: 0,0:04:12.54,0:04:17.21,Default,,0000,0000,0000,,Not necessarily what user interface’s exactly where the buttons and widgets are,
Dialogue: 0,0:04:17.21,0:04:23.29,Default,,0000,0000,0000,,but what role the user interface plays in helping them get their goal achieved.
Dialogue: 0,0:04:23.29,0:04:28.71,Default,,0000,0000,0000,,And one the the first steps is going to be: What leads somebody to use the app?
Dialogue: 0,0:04:28.71,0:04:34.48,Default,,0000,0000,0000,,In the mall’s example, that began with somebody saying “Let’s check out places in San Francisco!”
Dialogue: 0,0:04:34.48,0:04:38.05,Default,,0000,0000,0000,,That’s the springboard that clearly motivates people to go to the application.
Dialogue: 0,0:04:38.05,0:04:46.63,Default,,0000,0000,0000,,And then your app can easily and clearly show what’s the task that the idea you have is supporting.
Dialogue: 0,0:04:46.63,0:04:49.61,Default,,0000,0000,0000,,And then finally, at the end, you’ve got the satisfaction —
Dialogue: 0,0:04:49.61,0:04:53.28,Default,,0000,0000,0000,,How does what motivated them to use the app in the first place,
Dialogue: 0,0:04:53.28,0:04:58.64,Default,,0000,0000,0000,,how does that connect to their achieving that in the end of the sequence?
Dialogue: 0,0:04:58.64,0:05:02.12,Default,,0000,0000,0000,,Questions your storyboard can help you think about are:
Dialogue: 0,0:05:02.12,0:05:06.82,Default,,0000,0000,0000,,“What is it that enables people to accomplish, and what need does your application fill?”
Dialogue: 0,0:05:06.82,0:05:10.32,Default,,0000,0000,0000,,I really like storyboards for their holistic focus;
Dialogue: 0,0:05:10.32,0:05:14.11,Default,,0000,0000,0000,,it enables you to think through how you might support a task
Dialogue: 0,0:05:14.11,0:05:17.62,Default,,0000,0000,0000,,without committing to a particular user interface —
Dialogue: 0,0:05:17.62,0:05:23.20,Default,,0000,0000,0000,,that’s the magic, and this is especially important when you’re designing as a team,
Dialogue: 0,0:05:23.20,0:05:29.21,Default,,0000,0000,0000,,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.
Dialogue: 0,0:05:29.21,0:05:33.10,Default,,0000,0000,0000,,Or, you may have this great idea, but people don’t know what you’re talking about yet.
Dialogue: 0,0:05:33.10,0:05:38.27,Default,,0000,0000,0000,,Once you’ve got it out on paper and concrete, it makes it much easier for poeple to have common ground,
Dialogue: 0,0:05:38.27,0:05:41.01,Default,,0000,0000,0000,,and agree on how to move forward.
Dialogue: 0,0:05:41.01,0:05:44.87,Default,,0000,0000,0000,,When you’re storyboarding, I suggest imposing extremely harsh time limits on yourself,
Dialogue: 0,0:05:44.87,0:05:47.73,Default,,0000,0000,0000,,like 10 minutes for a storyboard.
Dialogue: 0,0:05:47.73,0:05:52.89,Default,,0000,0000,0000,,It can be easy to try and get everything beautiful even if you’re sketching out with pen and paper,
Dialogue: 0,0:05:52.89,0:05:54.83,Default,,0000,0000,0000,,but that’s not the point!
Dialogue: 0,0:05:54.83,0:05:58.16,Default,,0000,0000,0000,,Once you’ve got a rough idea of what your application’s going to accomplish,
Dialogue: 0,0:05:58.16,0:06:00.95,Default,,0000,0000,0000,,you can start to think about how you’re going to implement that,
Dialogue: 0,0:06:00.95,0:06:04.84,Default,,0000,0000,0000,,and by implement I mean “What’s it going to look and feel like to the user?
Dialogue: 0,0:06:04.84,0:06:07.38,Default,,0000,0000,0000,,What’s the actual user interface is going to be?”
Dialogue: 0,0:06:07.38,0:06:10.56,Default,,0000,0000,0000,,And for figuring out the user interface at an early stage,
Dialogue: 0,0:06:10.56,0:06:15.40,Default,,0000,0000,0000,,the very best technique that I know is to use paper prototyping.
Dialogue: 0,0:06:15.40,0:06:18.10,Default,,0000,0000,0000,,Paper prototyping is exactly what it sounds like:
Dialogue: 0,0:06:18.10,0:06:23.37,Default,,0000,0000,0000,,You’re going to make a mockup of the user interface, and, instead of doing it on the computer,
Dialogue: 0,0:06:23.37,0:06:27.78,Default,,0000,0000,0000,,which can take a lot of time and encourage you to try to get it beautiful and exact,
Dialogue: 0,0:06:27.78,0:06:32.74,Default,,0000,0000,0000,,you’re going to use paper, Post-It notes, and markers, to sketch things out really quickly.
Dialogue: 0,0:06:32.74,0:06:36.02,Default,,0000,0000,0000,,Here’s an example, it’s again from the “Lifealyfics” team.
Dialogue: 0,0:06:36.02,0:06:39.38,Default,,0000,0000,0000,,These are the paper prototypes that they made:
Dialogue: 0,0:06:39.39,0:06:40.77,Default,,0000,0000,0000,,(Lifealyfics / Discover What Makes You Happy / (Begin)
Dialogue: 0,0:06:40.77,0:06:42.07,Default,,0000,0000,0000,,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?)
Dialogue: 0,0:06:42.07,0:06:43.40,Default,,0000,0000,0000,,3. At the end of the week, we’ll send you your results, and you’ll realize what makes you happy and fulfilled! / (Start)
Dialogue: 0,0:06:43.40,0:06:46.04,Default,,0000,0000,0000,,Step 1 of 3 / Enter phone number [text field] / (Next)
Dialogue: 0,0:06:46.05,0:06:48.23,Default,,0000,0000,0000,,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]
Dialogue: 0,0:06:48.23,0:06:49.53,Default,,0000,0000,0000,,Step 2 of 3 / How many times per day do you want to get a text?
Dialogue: 0,0:06:49.53,0:06:50.82,Default,,0000,0000,0000,,Step 2 of 3 / How many times per day do you want to get a text? / (Next)
Dialogue: 0,0:06:50.82,0:06:53.17,Default,,0000,0000,0000,,Step 3 of 3 / Earliest text: [dropdown] / Latest text: [dropdown] / (Next) )
Dialogue: 0,0:07:07.05,0:07:10.58,Default,,0000,0000,0000,,Here’s some tips for making effective paper prototypes:
Dialogue: 0,0:07:10.58,0:07:13.24,Default,,0000,0000,0000,,First, store all your materials in one place.
Dialogue: 0,0:07:13.24,0:07:20.53,Default,,0000,0000,0000,,You’re going to want to get a bucket of markers, maybe some Post-It notes or index cards.
Dialogue: 0,0:07:20.53,0:07:26.19,Default,,0000,0000,0000,,If you’ve got a mobile device that you’re simulating, you might even make a mockup of something like that,
Dialogue: 0,0:07:26.19,0:07:29.17,Default,,0000,0000,0000,,and you can slide in and out different interface widgets.
Dialogue: 0,0:07:29.66,0:07:32.60,Default,,0000,0000,0000,,Just like the storyboards, it’s important to work quickly.
Dialogue: 0,0:07:32.60,0:07:34.74,Default,,0000,0000,0000,,And if you had a widget that you’re going to use a lot of —
Dialogue: 0,0:07:34.74,0:07:38.29,Default,,0000,0000,0000,,like radio buttons or sliders or something like that —
Dialogue: 0,0:07:38.31,0:07:41.24,Default,,0000,0000,0000,,sometimes it can be faster to photocopy them on a photocopier,
Dialogue: 0,0:07:41.24,0:07:48.83,Default,,0000,0000,0000,,so you can make one version and then photocopy it to have a whole bunch.
Dialogue: 0,0:07:48.83,0:07:52.59,Default,,0000,0000,0000,,Sometimes, good paper prototyping is kind of like playing make-believe as a kid.
Dialogue: 0,0:07:52.59,0:07:56.24,Default,,0000,0000,0000,,So, if you’ve got something that’s complicated or highly interactive,
Dialogue: 0,0:07:56.24,0:07:58.31,Default,,0000,0000,0000,,you can just imagine what it would be like,
Dialogue: 0,0:07:58.31,0:08:02.70,Default,,0000,0000,0000,,and so you can role-play that out with the person who’s trying out your application.
Dialogue: 0,0:08:02.88,0:08:05.56,Default,,0000,0000,0000,,It can be helpful to have a frame to put your interface widgets in.
Dialogue: 0,0:08:05.56,0:08:07.84,Default,,0000,0000,0000,,Here we have a mobile frame.
Dialogue: 0,0:08:07.84,0:08:12.34,Default,,0000,0000,0000,,You can also stick things right on the device itself,
Dialogue: 0,0:08:12.34,0:08:16.51,Default,,0000,0000,0000,,So, if you want to make a mobile screen shot here,…
Dialogue: 0,0:08:21.94,0:08:24.85,Default,,0000,0000,0000,,Mobile user interface!
Dialogue: 0,0:08:25.56,0:08:30.51,Default,,0000,0000,0000,,Or, if you have a desktop user interface, you can take, like, a 11-by-14 sheet of poster board
Dialogue: 0,0:08:30.51,0:08:32.77,Default,,0000,0000,0000,,and put all of your elements on that.
Dialogue: 0,0:08:32.77,0:08:36.22,Default,,0000,0000,0000,,Good paper prototyping is also like collage — you can mix and match fidelities.
Dialogue: 0,0:08:36.22,0:08:41.23,Default,,0000,0000,0000,,So you can use printouts of actual screen shots; draw and annotate on top of that —
Dialogue: 0,0:08:41.23,0:08:43.99,Default,,0000,0000,0000,,anything that you want that can get your point quickly.
Dialogue: 0,0:08:43.99,0:08:46.78,Default,,0000,0000,0000,,And to help the person who’s trying out the prototype
Dialogue: 0,0:08:46.78,0:08:51.44,Default,,0000,0000,0000,,make the conceptual leap between the sketch on paper and an interactive system,
Dialogue: 0,0:08:51.44,0:08:55.34,Default,,0000,0000,0000,,you can add in a little widgets and chrome of your user interface
Dialogue: 0,0:08:55.34,0:08:58.12,Default,,0000,0000,0000,,to convey that it’s part of a larger operating system.
Dialogue: 0,0:08:58.12,0:09:01.84,Default,,0000,0000,0000,,Paper prototyping is not only fast and efficient;
Dialogue: 0,0:09:01.84,0:09:08.18,Default,,0000,0000,0000,,it’s also really fun, and you can get really creative in figuring out different ways to convey interactions.
Dialogue: 0,0:09:08.18,0:09:12.95,Default,,0000,0000,0000,,If you’ve got layers in your user interface, you can use transparencies as a way of showing them.
Dialogue: 0,0:09:13.86,0:09:16.54,Default,,0000,0000,0000,,If you have popup menus, you can make the back sticky,
Dialogue: 0,0:09:16.54,0:09:20.55,Default,,0000,0000,0000,,so that can stay on the right place on top of the main interface.
Dialogue: 0,0:09:20.55,0:09:23.09,Default,,0000,0000,0000,,You [can] use any kind of marker or pen you want;
Dialogue: 0,0:09:23.09,0:09:29.19,Default,,0000,0000,0000,,you can have things be coloured, [or] just black-and-white — Anything you can think of.
Dialogue: 0,0:09:29.19,0:09:37.01,Default,,0000,0000,0000,,You can use poster board (like this), or cardboard, index cards, foamcore —
Dialogue: 0,0:09:37.01,0:09:40.77,Default,,0000,0000,0000,,anything you want as a backing material.
Dialogue: 0,0:09:40.77,0:09:43.73,Default,,0000,0000,0000,,Things like tape are handy to have around.
Dialogue: 0,0:09:43.73,0:09:49.00,Default,,0000,0000,0000,,If you’d like to be able to have repeatable user input, you can use whiteboard markers or transparency pens,
Dialogue: 0,0:09:49.00,0:09:53.14,Default,,0000,0000,0000,,and have a whiteboard or a sheet or transparency that the user input goes on,
Dialogue: 0,0:09:53.14,0:09:55.81,Default,,0000,0000,0000,,and then you can take it away when you’re done.
Dialogue: 0,0:09:55.81,0:10:00.65,Default,,0000,0000,0000,,To be able to add structure to your user interface, you can have line widths of different thicknesses.
Dialogue: 0,0:10:00.65,0:10:07.44,Default,,0000,0000,0000,,So, you can have a thicker line that’s for the major elements, and a thinner line for the minor elements.
Dialogue: 0,0:10:09.32,0:10:15.13,Default,,0000,0000,0000,,And you can have a stack or either Post-It notes or index cards to show the tab panes of your user interface.
Dialogue: 0,0:10:15.13,0:10:19.40,Default,,0000,0000,0000,,So, the different layers can be on sheets beneath.
Dialogue: 0,0:10:19.40,0:10:22.34,Default,,0000,0000,0000,,Here you can see a wonderful widget from the “Lifealyfics” team,
Dialogue: 0,0:10:22.34,0:10:27.02,Default,,0000,0000,0000,,where they’ve created a sliding window inside a mobile phone mockup
Dialogue: 0,0:10:27.02,0:10:32.23,Default,,0000,0000,0000,,as a way of conveying how something would change over time and in response to user input.
Dialogue: 0,0:10:32.23,0:10:35.92,Default,,0000,0000,0000,,The other thing that I’m going to show here, and I’ll touch on several times in this course,
Dialogue: 0,0:10:35.92,0:10:39.34,Default,,0000,0000,0000,,is the importance of trying out multiple different alternative prototypes
Dialogue: 0,0:10:39.34,0:10:42.20,Default,,0000,0000,0000,,as a way of getting more valuable feedback from the user.
Dialogue: 0,0:10:42.20,0:10:48.37,Default,,0000,0000,0000,,So, here are different ways that you could present the data that a live logging system is gathering.
Dialogue: 0,0:10:48.37,0:10:52.40,Default,,0000,0000,0000,,Another reason I really like paper prototyping is that {\i1}everybody{\i0} can be involved.
Dialogue: 0,0:10:52.40,0:10:57.67,Default,,0000,0000,0000,,So, if you try out designs with users, give them a pen and have them modify the interface!
Dialogue: 0,0:10:57.67,0:11:01.18,Default,,0000,0000,0000,,Or if they’ve got stuck or think something is weird,
Dialogue: 0,0:11:01.18,0:11:05.22,Default,,0000,0000,0000,,grab a sheet of paper and make any modifications that you need.
Dialogue: 0,0:11:05.22,0:11:11.06,Default,,0000,0000,0000,,You can bring paper prototyping tools into the boardroom, you can bring to clients —
Dialogue: 0,0:11:11.06,0:11:13.61,Default,,0000,0000,0000,,any of the stakeholders that are involved in user interface design,
Dialogue: 0,0:11:13.61,0:11:16.16,Default,,0000,0000,0000,,you can get them involved in paper prototyping.
Dialogue: 0,0:11:16.16,0:11:18.68,Default,,0000,0000,0000,,That helps them get their ideas into the system
Dialogue: 0,0:11:18.68,0:11:22.44,Default,,0000,0000,0000,,and empowers them to play a more active role in the design process.
Dialogue: 0,0:11:22.44,0:11:28.42,Default,,0000,0000,0000,,Once you’re ready to move on from paper prototyping, a useful next step can be to make a digital mockup.
Dialogue: 0,0:11:28.42,0:11:30.28,Default,,0000,0000,0000,,Here’s an example of some mockups
Dialogue: 0,0:11:30.28,0:11:35.93,Default,,0000,0000,0000,,that my research team made for a collaboration with anesthesiologists in the medical school at Stanford.
Dialogue: 0,0:11:36.67,0:11:38.46,Default,,0000,0000,0000,,The first thing I’d like to point out about this
Dialogue: 0,0:11:38.46,0:11:42.23,Default,,0000,0000,0000,,is that you can see that a lot more time went into this digital mockup
Dialogue: 0,0:11:42.23,0:11:45.40,Default,,0000,0000,0000,,than into the paper prototypes that we’ve been talking about so far.
Dialogue: 0,0:11:45.40,0:11:49.10,Default,,0000,0000,0000,,And that’s one of the reasons why I think paper prototyping is so important.
Dialogue: 0,0:11:49.10,0:11:53.02,Default,,0000,0000,0000,,But there does come a time where you’ll want to get more specific about pixels,
Dialogue: 0,0:11:53.02,0:11:56.80,Default,,0000,0000,0000,,and that’s when digital mockups can play an important role.
Dialogue: 0,0:11:56.80,0:12:02.13,Default,,0000,0000,0000,,As your prototypes increase in fidelity — from storyboards, to paper prototypes, to digital mockups —
Dialogue: 0,0:12:02.13,0:12:07.08,Default,,0000,0000,0000,,the kinds of evaluation and feedback that you’re going to get from people are going to evolve also.
Dialogue: 0,0:12:07.08,0:12:10.44,Default,,0000,0000,0000,,So, early on, you might be talking about scenarios with people.
Dialogue: 0,0:12:10.44,0:12:12.24,Default,,0000,0000,0000,,And then, with the paper prototype,
Dialogue: 0,0:12:12.24,0:12:16.76,Default,,0000,0000,0000,,you might be running these informal “Try these out, here’s three alternatives” tests.
Dialogue: 0,0:12:17.29,0:12:21.18,Default,,0000,0000,0000,,These prototypes can also be useful for critiques within your design team.
Dialogue: 0,0:12:21.18,0:12:23.75,Default,,0000,0000,0000,,And as you get to higher and higher fidelity mockups,
Dialogue: 0,0:12:23.75,0:12:28.47,Default,,0000,0000,0000,,you can have the opportunity to get to more formal experimentation techniques.
Dialogue: 0,0:12:29.37,0:12:32.85,Default,,0000,0000,0000,,Rapid prototyping techniques are probably the most valuable weapon you’ll have
Dialogue: 0,0:12:32.85,0:12:34.86,Default,,0000,0000,0000,,in a human-centred design process.
Dialogue: 0,0:12:34.86,0:12:38.59,Default,,0000,0000,0000,,And if you’re interested in learning more, here are some resources that I recommend.
Dialogue: 0,0:12:38.59,0:12:41.52,Default,,0000,0000,0000,,I’ll see you next time.