I used to use a system like this for my software, and unfortunately I found that it did a terrible job of educating users. People would work through the entire tutorial (~5 minutes), get to the end, and then email/call me with questions that were covered in the tutorial.

I switched to just showing a few short videos demonstrating things and it works much better. It's disappointing because I was really excited about the potential of an interactive guide (and I spent a long time building it), but I can't argue with the numbers. My guess is that users were so focused on completing the steps that they didn't bother actually looking at the software, so they didn't retain anything. I can confirm that this is what happened with me when I clicked through to the link above. I clicked through all of the bubbles and finished the tutorial without reading a single word of text on the actual page.

Great feedback, I don't know what your tour looked like and what the level of text was but I would hope that by keeping the individual points very simple and visually attractive they would stand a higher chance of being read?

The guide itself was definitely being read. I built it directly into the app, so users could only advance the guide by completing the step described (like, they'd have to actually create a new contact before the guide would advance). A surprisingly high number of people completed the entire thing (~45% if I remember correctly) but very few of those people seemed to actually retain anything. We received way more support requests, and the conversion from trial to paying customers decreased (relative to just showing a video).

I don't mean to suggest that interactive tutorials can't ever work, but they were a huge failure for me. The only upside was that several people contacted us specifically to mention how awesome they thought the tutorial was. However, most of those people seemed to be other software developers that were interested in doing something similar. They didn't seem to actually be any more likely to subscribe.

Crumble is a jquery plugin that makes it easy to create tours to introduce new users or new features. It is built on top of grumble.js by James Cryer to generate the bubbles themselves.

The library also uses a standard ordered list to store the tour information, making it accessible.

Thoughts welcome!

I think it would help to have a more obvious method for dismissing the bubble, like an X button, or a button that explicitly says OK on it, to give a better visual clue for users that are using a touch device or don't think to try hovering over the bubble to see if it's clickable or not.

Hey, good feedback for sure - in all there is no button so as to keep the aesthetic simple - the entire bubble is always the button.

The first step in the tour tells the user they can click to continue, I would definitely recommend that you do this if using the library. You can also hit ESC to exit the tour.

Folks who've used tour things like this: how do you detect if it's the first time your users are using your app? Do you make a db query every time they log in? Do you use cookies? Cookies seem unreliable and a flag in the database seems a waste of resources.

Thoughts?

We store a flag on the user that the tour has been seen. The user is always loaded with the page anyway so it's no extra DB calls to get this information.

Ah. Fair enough. Thanks for the tip.

Similar jQuery plugins:

1. http://sorich87.github.com/bootstrap-tour/

2. http://tracelytics.github.com/pageguide/

3. http://tympanus.net/Development/WebsiteTour/

4. http://alvaroveliz.github.com/aSimpleTour/

5. http://www.zurb.com/playground/jquery-joyride-feature-tour-p...

Initial thoughts: 1. A circle is not a very effective content area at this size, particularly for instructions or steps.

2. Why an image instead of CSS?

This is good. I remember seeing a couple of other walk-through plug-ins recently on HN, except they both wanted a monthly subscription. Unless they're also offering (and you require) heavy duty analytics, something like this with perhaps a few tweaks should be fine for a basic introduction.

This is great and I'll probably use it! However, I think I might fork because I don't like that the bubble is an image. If it were just css it would be much easier to style. Is there a specific reason why it is an image? I guess it would be fairly easy to replace the sprites with others.

Hey, using images allows compatibility back to IE6. You can read up on the original grumble post here which crumble depends on:

http://jamescryer.github.com/grumble.js/

This is exactly what I've been considering using on http://debugmap.com It's a site that needs a little explaining but I hadn't been able to come up with something usable myself. I'm going to try it out soon, thanks!

Nicely done. One thing: I think you need to be careful it doesn't get frustrating for users - perhaps have the messages dismiss when you click on website elements, and try to place the bubble so it doesn't hide the wrong part of the app?

I could definitely include this as an option

Seems very similar to https://taurus.io/

There are a few different solutions for providing this kind of functionality, if you need different buttons, deeper explanations or have more than a 4-5 points to make then this library probably isn't appropriate!

And Crumble is open-source! Which is awesome!

Great job, I was looking for something exactly like this - simple. Will try tomorrow

also like something that was posted on HN not long ago, a company from Ontario, Canada who built software to do this but the name of their app eludes me.

You're probably thinking about http://kera.io/

Look's great. I'm going to give it a try to guide first time users of my app.

Fun? How?

Who doesn't love bubbles?