Unobtrusive Helper: Intro.js Guides Visitors Around Your Website
You know it. A website should be self-explanatory, navigation should be obvious. “Don’t make me think!” If you need a manual to tell your visitors how to use your website, you’re a dead
man designer walking. This is generally true. But! Imagine you changed your website, but ever so slightly that your regular visitors won’t even notice. But! You want them to notice, because to you and at best also to your visitors these changes are a big deal, though not obvious. Would it not be great to have a possibility to gently poke the attention of your visitors to the right direction? Intro.js is a framework to achieve just that. It guides your visitors around the fresh parts of your website and has some tooltips at hand.
You know these intros. Big players, such as Facebook, regularly use them to have you notice the next slight change, for example the possibilty to answer to individual comments. This has been introduced just recently and you probably wouldn’t have noticed this minimal change directly under other people’s comments in font-size 2. A tooltip has you covered. Is there more than one noteworthy change, tooltips can be set in a row to show you each and every innovation one after the other.
Quick Tours with Intro.js
<div data-intro="This is essential information" data-step="2"></div>
data-intro defines the text snippet to be shown inside the tooltip.
data-step defines at what step of the tour the tooltip shall be shown. Links for navigating back and fourth between tooltips are added automatically. That way you can click through the whole tour quickly.
Once the tour has started, the whole website is grayed out with only the HTML element to be explained being shown.
data-position can be used to position the tooltips alongside the HTML element.
After having defined all the necessary steps, you start the tour using this call:
IntroJs() can be started using a button, or, which is the much more likely way to do it, (hey, Facebook does it, too) on page load.
The default layout of the tooltips is clean and therefor won’t conflict with most of the designs out there. If you are into customizing, you can. Just alter the CSS to your liking.
Intro.js is an extremely fast way to add a short info-tour to your website. If you need something quick and dirty, don’t hesitate to go for Intro.js. If you like it more elaborate, go for it as well and tweak the CSS. Intro.js works with recent versions of Firefox, Chrome and Internet Explorer. As it incorporates HTML5 and CSS3 you know it won’t work on older browsers.
Denis works as a freelance web designer since 2005.