High Quality Screen Casts Are Well-Scoped with a Single Take-Away

📹 Core Screencast Flow

A high quality screencast demonstrates to the learner how to accomplish a single task from the instructors perspective. The learners time and focus is prioritized without sacrificing critical details to accomplish the task at hand.

This starts with a well-scoped example that you plan from beginning to end. The screencast itself is a live-action diff taking you from the start to finish. If critical code is shown at the start of the screencast, it’s necessary to walk through that code so the learner isn’t immediately thrown off when you start.

The key here is live-action, don’t start with a long explanation of what you’re about to do. We’re here to see you do it! If you feel like the learner needs extra context, throw that in the description or write an article and link it to the screencast.

🔁 Tight Feedback Loops

It’s important that you show output along the way as you work from start to finish. The goal here is to create tight feedback loops that will serve as checkpoints for learners as they might be doing this for the first time. Any time you stop to save is a good time to show the output. Even no change is valid output after changing code so the learner can be confident they are doing it right.

Another important aspect of showing output along the way is including expected (and often times unexpected!) errors. There is nothing more frustrating than following along to a tutorial and running into an error that the instructor did not. You can’t control the environment of the learner but you can mitigate the learners frustration if they know that you accounted for any expected errors in the task at hand.

🤹‍♀️ Skills to Practice

🗣 Narrate What You Type

In the theme of a screencast being a live-action diff, it’s important that you don’t just copy paste all of the code into your editor. We watch videos to see the small things that you do to problem solve, if you’re going to copy/paste it might just be better to write up a blog post (a very valid way to teach!). While you type out your code, narrate while you speak to keep the learners attention focused on what you’re doing. If it’s a lot of boilerplate, feel free to paste it in or speed up the typing.

🖱 Use Your Cursor to Guide Learners Eyes

In addition to narrating what you type, it’s important to keep using the cursor to direct eyes to the function or variable that you are referencing. As code examples get more complex, the screen will fill up with words that make it hard to understand what you are referencing without any visual cues.With that being said, you should still be as explicit as possible as you reference functions and variables. Be careful of your “this”s and “that”s!

🔩 Nuts and Bolts

There is a number of technical aspects to a screencast that aren’t mentioned in this post. They are checklist items that once you have set you should be good to go. Here are a list of resources to get you set up:

🎮 Additional Resources

If you don’t know where to start, take Record Badass Screencasts for egghead.io and follow the Publish your first lesson guide.

egghead has also put together a document showing instructors first lesson feedback cycles. Check it out if you’d like to see others iterating through their first lesson.