

Show HN: Fun, simple feature tours for your website or app - tommoor
http://tommoor.github.com/crumble

======
the_bear
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.

~~~
tommoor
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_bear
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.

------
tommoor
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!

~~~
nuclear_eclipse
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.

~~~
tommoor
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.

------
fratis
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?

~~~
tommoor
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.

~~~
fratis
Ah. Fair enough. Thanks for the tip.

------
johnx123-up
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...](http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin)

------
mnicole
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?

------
highace
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.

------
sunsu
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.

~~~
tommoor
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/>

------
MattGrommes
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!

------
jem_nz
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?

~~~
tommoor
I could definitely include this as an option

------
yefim323
Seems very similar to <https://taurus.io/>

~~~
tommoor
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!

~~~
mck-
And Crumble is open-source! Which is awesome!

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

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

------
xanadohnt
Fun? How?

~~~
tommoor
Who doesn't love bubbles?

