How to Create a Great Interactive Walkthrough or Tutorial for Your Web Application

Many games such as Portal, World of Warcraft, and Kingdoms of Camelot have good tutorials that familiarize you with the game and teach you the basics. But those are designed by experts who have gone to school for that. How do you, a developer or marketer, create something that great for your web application?

Here at Kera, I’ve built 10+ tutorials and learned some tips and tricks that I want to share. The Kera tutorial building platform is pretty easy to use. It has two components: creating events which requires some CSS and HTML knowledge so you can target DOM elements and sound which is optional but extremely useful.

Planning

Decide and plan out your walkthrough or tutorial. Consider these questions:

  • What do you want to accomplish with an interactive tutorial?
  • Should it give an overview of your application, highlight features, or help and teach users to complete tasks?
  • Are there tasks users can accomplish in the tutorial that will increase conversions?
  • How long should the experience be?
  • Do you want to include audio?

Once you’ve decided, it’s good to create a storyboard or outline of the events of the tutorial. No matter what type of tutorial you plan to make, we recommend keeping tutorials to less than three minutes because longer tutorials have less engagement. It’s better to create several shorter tutorials rather than one big one. This will make it easier for you to manage and for the learner to understand. See some examples from our showcase.

Creating Events

Be clear. Move the virtual cursor to the thing or area you’re talking about as you would in a screencast. This will make it clear to the user exactly what you’re referring to. Use the “move” event type.

Keep their attention. Ask the user to click on buttons such as navigating through your application to keep them engaged and interested. Getting them to do something allows them to remember it better than just showing them. Use the “click required” event type to ask users to click on something and “input required” to get the user to type something.

Doing the real thing. Keep in mind a new user might not have any data that you can use to teach them. Consider creating dummy data for new users or building a tutorial that creates something that can be deleted once the tutorial is over.

Give the users more freedom. Kera has a safety layer that prevents users from going off track and doing things not specified in the walkthrough. When they try to click outside of the targeted element they will be prompted to quit or continue the tutorial. You can enlarge the allowed area of free play for the user by using the attribute “reveal”. Specifying an “reveal” area will override the default reveal on your event; so make sure you encompass the the element you want the user to interact with within your revealed area. Protip: reveal the complete form for the user when asking the user to click on submit so they can make any revisions.

Voiceovers and Sounds

Recording tools. You can record audio using your smartphone’s voice recorder app or a computer program. If you don’t have one try eXtra Voice Recorder Lite or QuickTime (screen recording and then export audio) for Mac and Sound Recorder for PC. Don’t worry about file size. Record high quality audio and Kera will optimize it for the web when you upload it.

Use Voiceovers. A human voice better engages users and makes them feel that they are dealing with a real product made by a real company. Make sure your voiceover is read clearly, slowly and with a smile so that it sounds friendly. If you don’t feel confident about using your own voice, there are affordable services such as VoiceBunny that can help.

Have an introduction. It’s nice to know who you are and what the tutorial is about in the beginning. This a great way to welcome and convey important information to the user.

Use a script. Reading from script is really helpful because reduces speaking mistakes and makes it sound more professional.

Include pauses. It is important to leave pauses in your recording when asking the user to complete tasks. We recommend leaving 1.5 second pauses because different browsers resume playback differently and may skip ahead a bit. If you have dynamic events such as modal popups or AJAX events, please note it might take more time for the user’s web application to render due to varying internet speeds.

Be in a quiet surrounding. It is vital to record your voice in a quiet place and free from distractions. It will appear more polished and professional.

Background music. Consider adding music to help increase engagement, professionalism, and to better convey your brand. Check out Unique Tracks and Royalty Free Music.

Call To Actions (CTA)

Welcome walkthrough. Kera tutorials can be used to welcome and onboard a new user after signup. Consider using an auto-play walkthrough right after signup to introduce your users to your application’s interface and highlight important features. Another popular method is to use a lightbox to present the CTA and allow the user to launch the tutorial. This has the advantage that the user is expecting a tutorial.

image

Example of a lightbox launched tutorial

Show specific tutorials on specific pages. You can attach a tutorial to anything: links, buttons, icons, flags, lightboxes, etc. You can have different tutorials on different pages by binding specific tutorials to specific CTAs on particular pages.

image

Example of a tutorial presented only on the schedule page

Show tutorial to specific users. You can launch specific tutorial for specific users. For example, you can set a flag on your backend for users who haven’t completed the tutorial and render a CTA such as a popup or notification from where users can launch the tutorial. Once the user completes the tutorial, you can set their flag to completed tutorial and not generate the CTA for the user.

Lastly, check out some videos of tutorials on Kera’s Customer Showcase!

— Taige (@taigeair)