Sometimes beautiful design and explicit step-by-step explanation couldn’t get along very well. If the design is spectacular, chances are the demonstration would not be very clear. To improve user experience, you may want to guide your visitors through different sections and such. The following plugins are built for this purpose. Adapt them and have some fun!
More Useful Plugins:
- 17 Beautiful and Fresh jQuery Tooltip Plugins
- 10 Best New jQuery Plugins and Tools for Your Next Responsive Website
- 7 New Interesting jQuery Plugins and Tools for Web Design
Joyride is extremely flexible and lets you take control of how people interact with your tour. It is programmed to be cross-browser compatible with modern browsers and even includes some fancy CSS to avoid images. Setting up Joyride is simple, just attach the needed files, drop in your markup and choose your settings.
A powerful and flexible tour plugins that you can get your hands dirty. It includes eight styles of navigation and supports tour between multiple pages. You could see 6 examples from its home page: Example One.
This simple tour plugin allows you to add tooltips for the section (DOM element) and combine them to a step by step demonstration. You can also set the position of tooltips. Very handy and simple to use.
Amberjack enables webmasters to create cool site tours, without the need to take screenshots or record screencasts. It supports multiple pages navigation. A tour wizard is included for you to easily integrate this awesome tool. All you need to do is customising the look of the navigation box.
Website tour with jQuery is to add a certain class to elements that you want to guide the user through and explain what they do. Same as previous ones, tooltips are used to show what that tour point is about, and a navigation will allow the user to go back and forth, to end the tour or to restart it.
The name says it all, it may not look beautiful than previous ones but it’s very practical. The navigation box can move around to indicate what visitors should look at. It can also highlight the area so you don’t miss a thing. You could see another explicit example: manual control, autoshow.