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.
Read the rest of this entry »
Creating a FAQ page or knowledgebase is one of the musts for a web application. However, sometimes, this is not enough and users may require for more details.
In such situations "site tours" or even "page tours" become very handy as users can learn any details about the application visually.
Amberjack v2, the new and improved version of the instant site tour generator Amberjack, powers you with the tools to create a better "help" experience.
It is simply a JavaScript library which you can define:
- the steps of the site tour
- content of the every step
- behavior of them (will it open a new URL or target an element in the webpage)
- look & feel (opacity, color, etc.)
Compared to the 1st version, Amberjack v2 now supports in-page steps, element targeting and better customization.
The library is not documented yet and the JS file + usage can only be seen inside the source code.
Requirements: jQuery
Site visitors, sometimes, have a different route of browsing a website rather than expected. Or, they may not have enough time to see what the website owner expects to be seen in a website.
In these circumstances, site tours can be very helpful for showing a website how you want them to see.
Amberjack, which is an open source website tour generation library, enables web developers to create nice looking site tours so easily.
How to use Amberjack?
Amberjack has a site tour generation wizard which creates the sample code that must be installed. After inserting that code into your site’s HTML template, right before the </body> tag, and filling the information that will be shown in every page, you’re done.
This way the Amberjack javascript files are hosted on the Amberjack server. But javascript files can also be uploaded and called from your website.
There are already some skins for the site tour info box but it is possible to update them with some css editing.
Requirements: No Requirements
Compatibility: All Major Browsers
