login/register

Snip!t from collection of Alan Dix

see all channels for Alan Dix

Snip
summary

Today we’re open-sourcing a JavaScript library for vis...
A guider is a dialog box that guides a user through your ...
This example guider is not attached to any element and h ...
Screen_shot_2011-06-22_at_6
An example guider attached to the "Add Varia

Optimizely Open-Sources Guiders.js, a Library to Help You Guide New Users - The Optimizely Blog
http://blog.optimizely.com/introducing-guidersjs-an-open-source-guider-e

Categories

/Channels/techie/JavaScript

[ go to category ]

/Channels/techie/web development

[ go to category ]

For Snip

loading snip actions ...

For Page

loading url actions ...

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.


Screen_shot_2011-06-22_at_6

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

HTML

<p><span style="font-size: small;"><span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">Today we&#x2019;re open-sourcing a JavaScript library for visually enhancing your web application with guiders, available at </span><a href="https://github.com/jeff-optimizely/Guiders-JS"><span style="font-family: Arial; color: rgb(0, 0, 153); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: underline; vertical-align: baseline;">https://github.com/jeff-optimizely/Guiders-JS</span></a><span style="font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">.</span></span></p><p><span style="font-size: small; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; text-decoration: none; vertical-align: baseline;">A guider is a dialog box that guides a user through your application. &nbsp;This improves the user experience of a web application by visually introducing the user to important features. &nbsp;Enough text, let&#x2019;s show you what we mean. &nbsp;Here are a couple examples:</span></p> <p><br><span style="font-size: small;"><img src="https://lh4.googleusercontent.com/2otl7Oa8C9a0LUNWnnmOHklmY3xSXafqgSXkDYznlxt93G2hw6VBPeiyXYWk2EX9xtnZTgrJizfQnO5JvG6cs-pZTPRDOejx_UXAVhcLjVB8_X-r5Us" alt="" style="display: block; margin-left: auto; margin-right: auto;" height="268px;" width="542px;"></span></p> <p style="margin-top: 0pt; margin-bottom: 0pt; text-align: center;"><span style="font-size: small; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: italic; text-decoration: none; vertical-align: baseline;">This example guider is not attached to any element and has an overlay between it and the page.</span></p> <p><br><span style="font-size: small;"></span></p><div class="posterousGalleryMainDiv p_embed p_image_embed" data-posterous-file-list="%5B%7B%22large%22%3A%22http%3A%2F%2Fposterous.com%2Fgetfile%2Ffiles.posterous.com%2Ftemp-2011-06-22%2FBnlgHDvhjpFfqbwvprsIaklqrpdgJyebfuhxajbDhmvnFgzdzzCJdvluJFki%2FScreen_shot_2011-06-22_at_6.42.21_PM.png%22%2C%22originalWidth%22%3A%22455%22%2C%22largeWidth%22%3A%22455%22%2C%22thumb%22%3A%22http%3A%2F%2Fposterous.com%2Fgetfile%2Ffiles.posterous.com%2Ftemp-2011-06-22%2FBnlgHDvhjpFfqbwvprsIaklqrpdgJyebfuhxajbDhmvnFgzdzzCJdvluJFki%2FScreen_shot_2011-06-22_at_6.42.21_PM.png.thumb.png%22%2C%22originalHeight%22%3A%22175%22%2C%22largeHeight%22%3A%22175%22%2C%22thumbWidth%22%3A%2236%22%2C%22height%22%3A%22175%22%2C%22main%22%3A%22http%3A%2F%2Fposterous.com%2Fgetfile%2Ffiles.posterous.com%2Ftemp-2011-06-22%2FBnlgHDvhjpFfqbwvprsIaklqrpdgJyebfuhxajbDhmvnFgzdzzCJdvluJFki%2FScreen_shot_2011-06-22_at_6.42.21_PM.png.scaled500.png%22%2C%22thumbHeight%22%3A%2236%22%2C%22originalSize%22%3A%2224%22%2C%22original%22%3A%22http%3A%2F%2Fposterous.com%2Fgetfile%2Ffiles.posterous.com%2Ftemp-2011-06-22%2FBnlgHDvhjpFfqbwvprsIaklqrpdgJyebfuhxajbDhmvnFgzdzzCJdvluJFki%2FScreen_shot_2011-06-22_at_6.42.21_PM.png%22%2C%22width%22%3A%22455%22%7D%5D" data-posterous-image-gallery-initialized="true" data-posterous-image-gallery="true" data-posterous-options="%7B%22zipFile%22%3Anull%2C%22zipFileSize%22%3Anull%2C%22external_url%22%3Anull%2C%22showDownload%22%3Atrue%2C%22url_slug%22%3A%22introducing-guidersjs-an-open-source-guider-e%22%7D"> <img alt="Screen_shot_2011-06-22_at_6" src="http://posterous.com/getfile/files.posterous.com/temp-2011-06-22/BnlgHDvhjpFfqbwvprsIaklqrpdgJyebfuhxajbDhmvnFgzdzzCJdvluJFki/Screen_shot_2011-06-22_at_6.42.21_PM.png.scaled500.png" height="175" width="455"> </div> <p></p> <p style="text-align: center; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: small; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: italic; text-decoration: none; vertical-align: baseline;">An example guider attached to the "Add Variation" button in Optimizely</span></p>