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.
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.
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.
Being 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.