How to make help microvideos for your website

Written by Adrian Holovaty on July 1, 2013

One of the best things we've done at Soundslice is to create help "microvideos" walking people through the site's various features. I've fallen in love with this technique and want more sites to do this, so here's a brain dump on how I make them!

For an example of what I mean by "microvideos," see these two pages: Soundslice help and music transcription techniques. And giving credit where it's due: I stole the idea from Bret Victor's amazing Learnable Programming essay.

Background

Soundslice lets people create guitar tabs that are synced with YouTube videos (example). Sort of out of necessity, the site has many rather complex editing features, and we're adding new ones frequently.

When we launched in November 2012, we put up a nine-minute tutorial video in which I tried to include everything -- from high-level overviews to low-level details on how to use it efficiently. This turned out to be a bad idea, for a bunch of reasons:

The solution to these problems? Instead of one monolithic video, we decided to make dozens of tiny, five-second videos separately demonstrating features. Again, check out our main Soundslice help page to see what I mean.

These videos are much easier to consume and refer back to. They're easy for us to update when we add new features or change existing stuff. We can permalink directly to a specific series of videos (something I do frequently when responding to user emails). And each video can use an ideal screen zoom level to best illustrate what it needs to teach. In programming terms, the videos are loosely coupled.

How to make the videos

It's actually quite easy to make microvideos on a Mac, thanks to ScreenFlow, a screen recording app. It costs $99 but is well worth it.

  1. Plan what you're going to record. This is the hardest part -- determining how many videos/steps to record to demonstrate a particular feature. I try to limit videos to five seconds, so that directly influences how many videos I need to display a given feature/process.
  2. Get your website in a state that's ready to record. (Prepare whatever dummy data needs to be prepared, etc.)
  3. Open ScreenFlow and start recording. Don't worry about getting it right the first time -- you can always edit out bits later. Generally, when recording a video demonstrating some Soundslice UI feature, it takes me two to three tries to get a smooth, natural-looking video.
  4. Stop recording and edit it down to the ~5 seconds you need. ScreenFlow makes it easy to delete sections. Note that, in addition to deleting the extraneous bits before and after the "meat" of the video, I also often make tiny deletions within the video itself -- for example, to clean up a pause in mouse movement. Don't waste milliseconds of the video on the mouse not doing anything (unless you've edited it down so much that it looks unnatural).
  5. Use the ScreenFlow crop tool to crop the full-screen video to only the bit of the screen you want to highlight. At Soundslice, we always use the same aspect ratio -- 300 by 150 -- so that the videos look extra nice when lined up together.
  6. Export (File | Export) using the "Web - High" preset, which gives you an H.264 video with an MP4 extension. If your video has no audio, hit "Customize..." in the Export dialog and uncheck "AAC Audio."
  7. You'll now have an MP4 file. Because browser vendors can't agree on supported HTML5 video formats, you'll need to create a WebM version for Firefox. I use Miro Video Converter for this -- it's free and easy to use.
  8. Pop the two videos (.mp4 and .webm) on a server somewhere.
  9. In your own help page, include the markup and JS for the videos. Here's the code we use on Soundslice; feel free to use it (it's licensed as BSD).

Overall, it takes a fair amount of setup to do all of this, but once you're up and running, it's easy to add and change videos. We've been doing this for several months and love it. Have fun, and go forth and make microvideos!

Comments

Posted by Drew Dara-Abrams on July 1, 2013 at 3:22 p.m.:

Thanks for boiling this down to an easily repeatable process.

For my next project, I had been considering pseudo-animated PNGs: http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html The pay-off is more compatibility, but with more steps along the way.

Comments have been turned off for this entry.