5 ms·
Show HN: Fun, simple feature tours for your website or app
- tommoor 14y agoCrumble 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 14y agoI 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 14y agoHey, 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.
- lukevdp 14y agoLook's great. I'm going to give it a try to guide first time users of my app.
- yefim323 14y agoSeems very similar to https://taurus.io/ https://taurus.io/
- kurrent 14y agoalso 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.
- aviv 14y agoYou're probably thinking about http://kera.io/ http://kera.io/
- tommoor 14y agoThere 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- 14y agoAnd Crumble is open-source! Which is awesome! Great job, I was looking for something exactly like this - simple. Will try tomorrow
- MattGrommes 14y agoThis is exactly what I've been considering using on http://debugmap.com 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!
- deleted 14y ago[deleted]
- mnicole 14y agoInitial 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?
- sunsu 14y agoThis 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 14y agoHey, 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/ http://jamescryer.github.com/grumble.js/
- highace 14y agoThis 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.
- jem_nz 14y agoNicely 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 14y agoI could definitely include this as an option
- the_bear 14y agoI 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 14y agoGreat 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 14y agoThe 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.
- fratis 14y agoFolks 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?
- xanadohnt 14y agoFun? How?
- tommoor 14y agoWho doesn't love bubbles?
- johnx123-up 14y agoSimilar jQuery plugins: 1. http://sorich87.github.com/bootstrap-tour/ http://sorich87.github.com/bootstrap-tour/ 2. http://tracelytics.github.com/pageguide/ http://tracelytics.github.com/pageguide/ 3. http://tympanus.net/Development/WebsiteTour/ http://tympanus.net/Development/WebsiteTour/ 4. http://alvaroveliz.github.com/aSimpleTour/ http://alvaroveliz.github.com/aSimpleTour/ 5. http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin http://www.zurb.com/playground/jquery-joyride-feature-tour-p...