Adding An Interactive Tutorial To My Programs

The other day I watched a video by Patrick McKenzie.  It talks about making the user’s first use of your program as simple as possible.  In this case, he shows how to do it by having an interactive tutorial that gets them through doing their first <whatever you program does>.

One of my recent programs is Decision Assistant, a tool to help you easily make the best decision for complex problems.  I sent it out to some testers to get their feedback on it.  One of them mentioned that it wasn’t intuitive what he should do when he first started it up.

So, I started to create an interactive tutorial for it.

It starts out telling the user how to create a new decision.  When they click on the “Create New Decision” menu option, the tutorial shows them the next thing they need to do – in this case, enter in the decision name.  When they enter the decision name, the tutorial shows them how to enter in the options for the decision.  And so on, and so on.

It’s not complete yet, but this is the basic way I’m handling the code.

First, I created an InteractiveTutorialEventArgs class.  This class has an enum, with each value being a step the user will go through.

Next, I created an InteractiveTutorial class.  This class has a collection of all the steps.  It’s a SortedList, with each enum value from InteractiveTutorialEventArgs, along with a Boolean, for whether or not the user has performed the action that relates to a screen in the tutorial.

There’s also a MarkTutorialStepCompleted method that lets my program notify the tutorial that the step has been performed by the user.  This method will raise an event that the Tutorial page is watching for.  The rest of the program calls this method, whenever the user reaches a point where they’ve done something the tutorial cares about.

Here’s a sample of how I use a call to the InteractiveTutorial MarkTutorialStepCompleted method.  In this case, it’s to make sure that the user saw how to open a context menu that lets them delete an option.

The Tutorial code is fairly simple.  It watches for event notifications from the InteractiveTutorial class and displays the correct text and image on the Tutorial form.

Starting the interactive tutorial is simple.

In the constructor of the main form, I create an instance of the Tutorial class and set it to a local variable.  I do this, so that if the user closes the Tutorial form, and re-opens if later (from the Help menu), it will be the same form and continue from where the user needs to be (since it’s been watching all the events for the user’s actions).

I display the Tutorial form in the main form’s Shown event.

If the user hasn’t already gone through the interactive tutorial (based on a Boolean value saved in the settings file) then the program will display it.  Within the InteractiveTutorial class, I’ll change the Settings.InteractiveTutorialViewed to ‘true’ after the user has performed the last step in the tutorial.

In the future, I may change this to include one of those ‘always show on startup’ checkboxes.

The Ultimate Goal

As I create more programs for general use (not just custom, in-house applications), I want to make the initial experience with them as easy as possible for the users.  That means they’ll quickly get more value from the program, since they’ll know what it can do.  It should also reduce the amount of support I need to perform – leaving me with more time to write more programs.

Leave a Reply

Your email address will not be published. Required fields are marked *