Try Now
+31 (0)70 31 84 404
Twitter: @H5mag
Roel de Jong
Publication date
12 October 2015

Going on a First Date with the Interactive Tutorial

This blog is written by Roel de Jong, one of the developers who is working on improving the  H5mag publishing platform. Roel recently added the interactive tutorial which will help ease new users into the live editor and describes how it works, and some of the ideas behind it here.

Even the most expertly designed interface can turn potential users off on their first date with your product, especially in the case of feature rich applications such as H5mag. The myriad of buttons, menus, and panels can quickly quash the aspirations of an up-and-coming digital magazine artist. A properly designed tutorial can facilitate the first encounter with any alien piece of software. What is a good tutorial, and what implementation challenges did the programmer face?

A tutorial should imbue the user with a sense of accomplishment, and a solid grasp of the basic tasks involved in operating the software. Furthermore, a tutorial should be light on exposition, or else it would only be a cumbersome manual; instead, it should be foremost an interactive affair, letting the user internalize key concepts through playful exercise. Summarizing, a good tutorial should give you the illusion of wandering through the woods on your own, but will simultaneously catch you in time should you trip.

Traversing the steps of a tutorial can be seen analogous to state transitions of a state machine, where the yellow notes are the states of the machine, and fulfillment of tutorial instructions ('click on the headline') trigger state transitions. The trick is to prevent the user from slipping through the cracks between the discrete steps of the machine, or else he will forever wander tutorial limbo. For example, if the user selects an area before he is instructed to, the tutorial should still continue.

For evaluating trigger conditions such as:

  • Did the user click a button,
  • Did the user type some text,
  • Did the user reposition this area,

It is advantageous if the tutorial system is notified by relevant widgets of their state changes. This would also help to implement pointers which draw the user's attention to relevant user interface elements.

Anonymous web analytics goes a long way in safeguarding the usability of the tutorial. By analyzing the pattern and timing of state transitions, weak and unclear sections of the tutorial can be easily pinpointed, and improved upon.

Although our tutorial is still in it's infancy, we sincerely hope new users let themselves be taken by the hand when they create their first magazine. With the basics in place, we will soon add more intermediate tutorials which tackle more advances features and concepts.

Are you interested in trying out the interactive tutorial? Sign up for a free trial account to take the H5mag live editor on a first date.

Return to blog overview