Making Help Video’s and showing them post image

Making Help Video’s and showing them

Posted on:

At work we have been developing an online application for managing football clubs. It is a big system which needed good documentation to help users get started wth it. Along with documentation I started making help video’s for users to watch. I always find it easier to explain features when showing it to someone, and likewise when getting shown something, I always find it easier to understand something when I get it shown and explained to me.

Help VideosSetup

The first thing I had to do was break the video’s down into ‘bite sized’ video’s so they were not too long for the viewers.

I broke it down into how to get started and setup then the different sections of the system.

To view a video the user clicks on the title which opens up that pages of videos.

Video's pageVideo Page

For the video’s page each video is shown as an image with the video title and a short description of what it is about below it.

To play a video the user clicks on the image which opens a lightbox with the mp4 video playing.

The menu on the left provides links to the other video’s further down the page and also a link back to the main menu page.

Here is a sample of code used for a video –


<div class="column_layout">
    <h2 id="players">Adding Players</h2>
    <a href="files/adding_players.mp4" class="html5lightbox" data-width="920" data-height="512" title="Adding Players">
      <img src="imageset/videos/adding_players.jpg" alt="Adding Players" />
    </a>
    <p>This video shows you how to add players to the system and the menu options available for them.</p>
</div>

 

The class “html5lightbox” attached to the a tag opens up the lightbox. You need to download a copy of this jQuery lightbox from HTML5box and put it in your <head> section to get the lightbox working.

Making the Video’s

There are a number of recording programs available to record off your screen. I used Apowersoft, which is free to use and records in .wmv format. You can setup shortcut keys for record, pause and stop. Once I had my video’s recorded I edited them and added commentary to go with them. You can record a voice over with Apowersoft but I found it easier to do the voiceover after.

Editing

editing videosBeing a windows user I decided to use the built in Movie Maker to edit my video’s. Its very basic but did everything I needed. You can merge video’s together, set start and end points, and split video clips anywhere you need.

You can then record a narration/commentary over your video. This feature is really easy to use and your video plays in front of you as you do it. The audio shows on a seperate line so you can split it and record different parts if you need to.

With Movie maker you can also add a Title to your video’s which allows you to add a welcome message which you can style any way you like. I put black text on a white background and had the title fade out into the video. You can also record a narration to go with the title.