GV Library Design

Story-centered design: how to make a screencast

Image by Kelly Hofer

Screencasts are a quick and easy way to bring your designs to life, as Braden Kowitz explained in his introduction to story-centered design. To create a screencast, you record a video of your design in action, with you as the user. You talk through the design and click where the user would click as you move through the story. Here’s a recipe for making your own screencast.

1. Get your designs together

You’re going to need a set of designs that tell a user story. They can be hand-drawn wireframes, detailed mockups, or even a working prototype. I usually put the screens into Keynote so I can easily flip through the story.

2. Write a script (optional)

When possible, I like to write down notes or a word-for-word script for my screencast. It does take extra time, but the payoff is a short, concise screencast that hits all the right talking points.

3. Buy the software

I use ScreenFlow for the Mac. I’ve also heard good things about Camtasia for Windows.

4. Find a good place to record

Find a secluded room — if you’re like me, you will feel extremely self-conscious speaking aloud to nobody. Make it as quiet as possible by turning off fans, closing windows, silencing your phone, and so on. If you’re going to include video of your face, make sure the room is well lit and there’s nothing distracting in the background. You may want to temporarily take down that Winger poster.

5. Use an external microphone (optional)

Headphones with a built-in microphone will give you much higher-quality audio than the microphone in your computer. (Most smartphones come packaged with a headphones-microphone combination in the box.)

6. Choose a quiet button

Each time you advance to the next slide, you need to press a button — so find the quietest button you can. If you have a remote or mouse you can hold away from the mic, that’s great. Otherwise, I’ve found that the arrow keys are generally quieter than the spacebar or trackpad.

7. Do a dry run without recording

Your first time through the screencast will almost certainly be the most awkward — especially if you didn’t write a script. I don’t even try to record myself the first time. After a quick dry run, the words and presentation are always much more fluid.

8. Introduce the video

I like to start by briefly saying hello to the camera, something like “Hi, I’m Jake. This is the latest design for the turboencabulator sign up flow.” The video of my face reminds the viewer that I am a human with feelings and they should watch my whole video. That’s the idea, anyway.

9. Voice-over is best

After the video intro, I switch to voice-over. Too much face can be distracting, and it adds work to post-production — you have to keep the video out of the way of your cursor. And Lord help you if you need to edit anything. Voice-over saves a lot of time. (Bonus: if you have a script, you can read right off it as you go and no one will ever know.)

10. Keep it short

I try to keep my videos about the length of a pop song: two to four minutes. People stop paying attention quickly, no matter how interesting your design work or how charming your presentation.

11. Use the cursor

Your cursor is the star of the show, so be conscious of it as you record. Use the cursor to point to the thing you’re talking about, and pretend you’re clicking even if you’re really flipping through slides. Later, when you edit your video, ScreenFlow will let you do all kinds of neat tricks with the cursor: highlighting, zooming in, and even hiding it for stretches.

12. Re-record instead of editing

You’ll probably screw up a few times. I always do. As long as your whole video is short, it’s probably faster to re-record the whole thing than it is to splice in video section by section.

13. Share your finished video

If your video is too big to email, put it on YouTube (you can restrict access if needed) or DropBox and send the link to your team. I have found that the email subject “Watch this 2-minute video about [foo]” gets great click-through.

Sample screencast

Here’s what the most basic screencast looks like.

Have you made screencasts for your designs? Do you have tips or techniques that worked well for you?