What makes a High Quality Screencast?
January 08, 2021
📹 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:
- eggheadio screen casting technical guide
- eggheadio badass screencast recording cheatsheet
- Use an Accessible Theme
🎮 Additional Resources
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.