Screen Setup

Key Takeaways

• Screen setup:
  • Remove as many distractions as possible
  • Keep coding environments clean
• Show output in as many ways as possible

Let’s see how one instructor’s screen setup changed from their First Take to Second Take after feedback!

This lesson became “Build a GraphQL Query using Gatsby’s GraphiQL Explorer” by Amberley Romo.

First Take

The instructor speaks very clearly and is discussing one central topic, which is great! But notice how there are a lot of distractions on the screen? She is only discussing one panel at a time, but the distractions are all there the whole time, making it a little difficult to follow her. And there’s that pesky menu bar at the top adding an extra bit to the clutter.

Now let’s watch the feedback video!

First Take Feedback

Some of the feedback that was provided:

• Utilize the “hide menu bar” function on the Mac.
• When you are done with the terminal or not using the file structure, hide them to allow what is currently being shown more room on the screen.
• If there are multiple ways to “show” things, try to show them in as many ways as possible. In this case, you could show the query in the docs as well as through the explorer.
• When you do an “action,” explicitly say what’s going on! For 00:25, for example, you could explicitly say what you were doing: “... I’ll hit play and the query will run. In this panel, the results....”

Let’s see how the instructor changed the way she presents with the feedback!

Second Take

Look how clean the screen is! And she’s showing one thing at a time, so you know exactly where to focus your attention. And she’s discussing the action she’s taking as she does it. The menu bar is gone, and she’s actively highlighting areas of the screen she’s working on, as well as telling you which part of the screen she’s looking at with words like “left.”

It’s just a much more elegant and smooth execution, providing a streamlined experience for the audience to follow along!