D-Sight Web is evolving quite fast lately and as we are putting new functionalities in place, we estimated that it was time as well to bring some guidance for the users. As a first step, when new users sign up, we redirect them to a brand new home page listing the different projects that they can work on.
While this view is leaner than what we used to offer, we decided to create as well a Welcome Tour in order to introduce users to this new interface. We will re-use this component throughout the application in the future in order to bring some additional help to the different steps of the decision-making process.
In the following sections of this article, we will cover a few jQuery plugins or pure JavaScript implementation allowing to deploy tours to web application in a quick and easy way.
Guider.js
Guider.js is the solution that we have deployed for D-Sight Web. It is flexible, easy to understand and tweak and comes with plenty of options. A live example is available on Jeff Pickhardt’s website.
Joyride 2
Joyride was created by the Zurb Team who is already well known for their foundation framework. It seems however to have fewer options that Guider.js, especially in terms of positioning.
WEBSITE TOUR WITH JQUERY from codrops
WEBSITE TOUR WITH JQUERY differs a bit from the two previous solutions in the way it handles the navigation in the tour. In this case, there is a tour controller that will contain the commands previous / next instead of embedding them in the different tooltips. A live demo is available.
pageguide.js
pageguide.js handles the tour as well in its own way. All steps of the tour appear at once but the explanations and controls are centralized in a tour controller at the bottom of the page.
Power Tour
Power Tour is a complete solution that comes with plenty of options to configure your tour (including automating the tour with a timer or highlighting two elements at once). A live demo is available as well.
This one is not free, but at only 10 USD, this comes quite cheap for everything it has to offer.
jQuery Tour
jQuery Tour is mainly oriented to automatic tours with limited user interactions during it. It comes with plenty of options as well and is highly customizable. A live demo with different examples is available.
This one is not free either, but comes at only 9 USD.
Crumble
Crumble provides a quick and easy way to build tours. It does not come with as many options as the other tools presented above but that might do the trick for a quick and easy deployment. The live demo is available in the page itself and the code is on Github.
Bootstrap Tour
Bootstrap Tour is inspired by Joyride and built on Twitter Bootstrap. Unfortunately, there is no live demo available.
Conclusion
As we have seen, there are plenty of options available to set up a tour of your web site or web application. The 8 solutions mentioned above only scratch the surface but gives a good panel of options – depending on your needs and preferences. Most of the tools are free and if not, really cheap. Finally, deploying those solutions can be done in as little as a few minutes.
For the time being, comments are managed by Disqus, a third-party library. I will eventually replace it with another solution, but the timeline is unclear. Considering the amount of data being loaded, if you would like to view comments or post a comment, click on the button below. For more information about why you see this button, take a look at the following article.