Please enable JavaScript to view this site.

Navigation: Using HelpXplain

Single-slide Xplains

Scroll Prev Top Next More

At the simplest level, you can create a single slide that can do much more than a simple screenshot. An animated infographic that attracts attention and communicates better than any simple screenshot could do. Here are just three examples. Once you  get the idea you will come up with many more yourself.

All these  examples are published with the Blank Skin layout option in the Publish page. So there are no controls, no previous/next buttons, no keyboard action. Just one slide that is more or less interactive.

See Publishing Your Xplains to learn how to use the results in your web pages.

Image with a mouseover zoom effect

The image below is a single-slide Xplain containing just one image with a mouseover zoom effect.

This is a single-slide Xplain. The picture has a subtle zoom effect when you move the mouse over it.

Double image with a zoom effect

This example is basically the same thing, but with two images instead of one. Each image has its own zoom effect when the mouse moves over it. Each image also consists of two components: A device mockup and an image of the "content" on the device screen placed inside it. It also has a click action that takes the user to a URL.

Single Slide, two screenshots on device mockups, clickable.

A single-slide tutorial

Suppose you want to show a simple two-step operation in a program you are documenting. Normally you would need a couple of screenshots, taking up a lot of space on the page. With HelpXplain you just create a single screenshot and add some simple elements that appear in order to show the user what to do.

We have set the animations to appear relatively slowly. You could make them faster or slower.

Single Slide - use animations to explain multiple steps in one screenshot

How to make the single-slide tutorial

This looks a little more complicated but once you get the idea it is very easy. Watching this Xplain will quickly teach you a large number of techniques that it would normally take many pages of text and scores of screenshots to communicate.

Once you have made a single-slide tutorial like this, use the same Blank Skin and other settings described above to publish it.

Single Slide - use animations to explain multiple steps in one screenshot