Introducing Guiders.js

Guiders.js

Guiders.js is a JavaScript library for making guided tours on websites. The guiders are elements on the page that visually introduce new users to the software.

Check it out on GitHub →

Frequently Asked Questions

Do you have any tips for designing guided tours?

First, if there's something that's good-to-know but would be better introduced later, leave it out of the guided tour. However, if there's something that's good-to-know and is not easily discovered, you probably want to include it.

Include pictures, and don't use too much text. The more text you use, the less likely people will read it.

Avoid jargon that may not be understood by your least informed users.

Finally, keep the tour short, at around 10 steps max. It's even better if you can use less steps. You can use more steps if you break up the introduction into multiple parts, such as "your first turn" and "your first battle" for a game, or different tours for different pages of a website.


What should I track to measure my success?

Guiders.js is useful for improving your first-time user experience, and ultimately your engagement and retention. The metrics could be different depending on your company, but typical measures of retention for games are day 1 retention, day 7 retention, and day 30 retention. Day 7 retention would also work for a non-game website where you don't expect someone to necessarily sign in the next day. It's also useful to measure how long new users spend on the site, because if it's too short they might be getting frustrated. For engagement, pick actions that are important to your application, such as "user installs the snippet" or "player beats the first level".


What percent of users should I expect to finish the guided tour?

It depends, but 35 - 40% typically complete a guided tour. This comes from data that I've seen for both enterprise and consumer products. There's typically a steep fall off for the first guider (losing 20% - 30%), followed by a gradual fall off for all remaining steps (losing 2% - 8% each step).


How can I create a guider?

As of version 2.0.0, there are two ways to create guiders: with HTML (plus a little bit of JavaScript) or entirely with JavaScript. If you prefer separating the copy from the JavaScript, use the HTML method. Otherwise, the JavaScript method works equally well.


Here's how to do it with HTML: (requires version 2.0.0 or greater)

<!-- Put this in your HTML -->
<div id="guider2" class="guider" data-attachTo="#clock" data-next="guider3" data-position="12">
  <div class="guiders_content">
    <h1 class="guiders_title">
      Guiders are typically attached to an element on the page.
    </h1>
  
    <p class="guiders_description">
      This guider is attached at the 12 o'clock direction to the #clock element.
    </p>
  
    <div class="guiders_buttons_container">
      <div>Close</div>
      <div>Next</div>
    </div>
  </div>
</div>

<!-- Put this in your JavaScript -->
<script type="text/javascript">
  $("#guider2").guider();
</script>

And this how to do it entirely with JavaScript:

guiders.createGuider({
  attachTo: "#clock",
  buttons: [{
              name: "Custom Button",
              onclick: function() { alert("Hello!"); }
            },
            {name: "Next"}],
  description: "Your description here.",
  highlight: true,
  id: "guider4",
  next: "guider5",
  overlay: true,
  position: 7,
  title: "What is this guider about?",
  width: 600
});

For more information, check out the documentation included with the download or on the GitHub page.