11 Awesome “jQuery Site Tour Plugins” For Guiding Users With Style
It is always hard to guess how users browse + how they perceive the content and flow of a website or web app.
There are tools to analyze these as much as possible and, using methods like A/B testing, improving the usability is always possible.
However, it is always a great idea to guide users whenever they want. Nothing to lose on that for sure.
There are awesome jQuery plugins that ease guiding users and creating site/page tours for them. They are stylish, customizable and simple to use. Check them out:
A lightweight plugin that uses data attributes and has keyboard navigation support.
It focuses on objects beautifully and pretty easy-to-setup.
aSimpleTour uses a JSON data for all the configuration and content.
While a floating box helps managing the tour, tooltips (that can be positioned however wanted) help focusing on the elements.
Pageguide.js offers a very slick way to provide site tours.
The steps are highlighted beautifully and a sticky footer/header allows navigating through them while providing extra info about each step.
This is a very nice plugin by the talented ZURB team.
It is configure using data attributes, works well in responsive layouts and has almost everything customizable.
A simple-yet-useful plugin where all the details and content are defined in JS.
There are options to customize the color and position of the tooltips.
That is the Bootstrap version of Intro.js.
This jQuery site tour plugin loads the content inside Bootstrap Popovers.
The plugin has lots of options to customize the look or delay between steps, setting the initial item to be shown and more.
P.S. While writing this article, the demo had issues.
The plugin is written with CoffeeScript and has styles as Less + CSS.
jQuery TourBus is very customizable, can display the steps one-after-other manually or with auto-play.
There are functions to get the current step or display a specific one (also, prev-next).
It has a complete API, callbacks, keyboard support and options to customize the look.
A visually different way for having a site tour.
Crumble uses a bubbled interface where all the steps are defined in an ordered list (which is good for accessibility).