Snip
|
Today we’re open-sourcing a JavaScript library for vis...
|
|---|
Categories |
|
|---|
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.
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’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. 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:</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> |
|---|
