March 21, 2014, 8:00 AM — Have you ever been to a website that took you on a nice looking, interactive tour of its features? If you have, I bet you thought “hey, that’s pretty neat”, or maybe “zomg, such fancy, wow”. Regardless, you probably also wondered how they accomplished it. Here’s one solution from the folks over at LinkedIn called Hopscotch.
Hopscotch was developed inside of LinkedIn’s Incubator program by a developer (Gordon Koo) and a UX designer (Hans van de Bruggen) at the company. They set out to build a general purpose call out framework that could be used on websites of any scale to illustrate new features or provide help.
I can’t demonstrate the software here because of CMS limitations, so head over to the demo site to try it out for yourself.
Hopscotch was graciously released under the Apache license and is housed over at GitHub. While the library is quite robust, it’s also easy to get started with for basic usage. Once you include hopscotch.js and hopscotch.css (no jQuery required but it’ll use it if it’s there), you’re ready to generate a simple tour like so:
It’s as simple as that, but there is a lot more available to you if you know what you’re doing (or can follow directions very well). Tours can span multiple pages, they can be localized to the user’s native language, and you can utilize lightweight callouts for when you only need a single point of attention. There are also a plethora of configurable properties, event callbacks, and API methods which will let you custom tailor your tour to your specific needs.
Have a look through the README to see everything the library has to offer. It’s projects like these that build functionality so useful that you want to start incorporating them into all of your projects ASAP.