The Optimizely Blog

Today we’re open-sourcing a JavaScript library for visually enhancing your web application with guiders, available at https://github.com/jeff-optimizely/Guiders-JS.

A guider is a dialog box that guides a user through your application.  This improves the user experience of a web application by visually introducing the user to important features.  Enough text, let’s show you what we mean.  Here are a couple examples:

This example guider is not attached to any element and has an overlay between it and the page.

An example guider attached to the "Add Variation" button in Optimizely.

Guiders can be attached to an element on your web page, or they can be centered on their own.  Attaching a guider to an element on your page is as simple as using the appropriate jQuery selector and a position value 1-12.  The position value determines which direction the guider attaches to the element, according to the numbers on an analog clock.  For example, the following guider is attached with a position value of 2.

Developers can attach a guider to an element on their web page at any of the clock positions.

The motivation for guiders on our web app was to ease new users in to the service.  Optimizely offers website A/B testing software-as-a-service.  New visitors can try the service with either a 30 day free trial, or by testing it out without even registering.  Rather than drop new visitors into the editor on their own, we wanted the ability to take them on a guided tour of the product.  So we implemented a series of guiders to introduce visitors to the application.  You can see it by entering a URL on the Optimizely homepage and clicking the call-to-action button.

We ran an A/B test using guiders on Optimizely.  Half of the traffic saw guiders upon first use, the other half didn't.  One of our goals, user engagement, saw a statistically significant increase with guiders.  This makes sense since the guided tour causes users to click something on the page.  Another of our goals was triggered upon successful user registration.  We've seen an increase in that goal too, however at this point in time the increase is not statistically significant enough for us to declare it a success.

The Guiders library can also be used to introduce new features to existing customers.  For example, Google Apps often uses promo dialogs in this way.

Example of a promo dialog in Gmail.  The Guiders library can be used for these, too.

You can check out Optimizely and Guiders right now by clicking this direct link to the Optimizely editor.  A link to the start the "Guided tour" is in the top right corner.  Enjoy!