6 ms·

Easy way to build product tours with Bootstrap

207 points by vineet 14y ago

mfonda 14y ago
I found this tour a bit difficult to navigate. The tooltip moves to a different spot each time you click prev/next, making it hard to follow the whole tour. Perhaps navigation that stays in a fixed spot could make this easier to use.
mariocesar 14y ago
Awesome tool. I remember seeing jquery plugins doing this. Would like to see a list of extensions like this.
vineet 14y ago
There have been other tools that do this, but I like the simplicity and cleanliness of settings this one up. I remember some of the other tools required a server access, which was great in that they allows us to do a lot of things, but as a potential user I needed to make sure that they have a business and would be around for when I needed it. The problem that I have had with some of the jquery plugins that do similar is that I had to worry about customizing the plugins with my site's theme. With bootstrap plugins I hope that the plugins just look good with the bootstrap customizations that I have done.
waxjar 14y ago
I can imagine this being useful to explain how a "difficult" UI element works. It seems easy to set up, I like that. The way it's used in this demo, though, I found it's very distracting from the actual content. All my attention went to the little popover, which resulted in not reading any text on the page itself. I think this is partially because the popovers didn't point at anything directly.
dclaysmith 14y ago
I used this library to build the product tour for my app ( http://www.thetaboard.com http://www.thetaboard.com). Was really easy to customize the color scheme and behavior--I think it took 2 hours to integrate it. Adding a product tour really improved my "demo" to "sign up" conversion rate. Probably the single biggest conversion rate "win" I've had.
- sorich87 14y ago
  Glad it was very useful for you! :)
- vineet 14y ago
  Awesome. I guess I now have fewer fears integrating it into our site.
- optymizer 14y ago
  ThetaBoard looks like a Trello clone to me (caveat: Trello itself could be a clone of some other project).
  - fady 14y ago
    yeah, for sure. though, you can't lie that it's a great way to manage tasks. i love the trello UI and i'm sure more people are going to use the trello UX when building task management apps.. thetaboard looks super new.. comments on the card itself? i prefer to keep the cards height minimal, so i'm not a fan of that design choice. otherwise, it seems neat, but i def trust trello more with my data. thetaboard terms and conditions could actually have some content :\ edit: clarification.
    - dclaysmith 14y ago
      Launched just under a year ago. The comments issue was a tough decision. In the end, I wanted to keep everything on the card itself and do my best to reduce or eliminate/reduce modal windows and drop down menus (I have some but they are few and far between). I'm actually a fan of Trello myself and use it for some projects--I'm sure Trello will be around for a long time. I am actually ramping up work on ThetaBoard this year (it's been nights and weekends for the couple years) so there is no danger of it going away any time soon. And I'll work on my terms & conditions!
      - fady 14y ago
        I'm glad you're taking the feedback so well. yeah, i keep sensitive data in my trello (i know...) so something about the data, how it's stored, and security would be nice to have. good luck dclaysmith
booruguru 14y ago
Very cool. I'm going try this out on a web app I'm currently developing (which happens to use Bootstrap). I would definitely prefer to implement popovers as opposed to a tutorial with lots of screenshots and whatnot.
dergachev 14y ago
If you're building a product tour, consider making an animated GIF screencast to demo your use case. Yesterday I wrote a tutorial on how to easily create one on OS X using just free tools: Quicktime Player, ffmpeg, and gifsicle. https://gist.github.com/4627207 https://gist.github.com/4627207 (Animated GIFs might also be useful for bug reports).
- vineet 14y ago
  For our company we experimented with using about a dozen animated GIFs - but found them to be a little hard to deal with. We replaced them with 2-3 short videos and were happier. Now these product tours might be a good thing to add.
  - dergachev 14y ago
    IMHO a 45-90 second video done right might the ideal medium for a product overview. But most are way longer, and suck, so I never click on them. GIFs auto play, and so might be good medium to force a user to see a 7-15 second clip of how a feature works. Obviously you should ensure that only 1 is ever showed at a time. I also find there's something hypnotic about a silently looping sped-up clip, though I don't know if this can be used to increase conversions. ;)
    - vineet 14y ago
      Yeah, we did not like the autoplay part and the hypnotic effects.
decadentcactus 14y ago
Also https://github.com/jeff-optimizely/Guiders-JS https://github.com/jeff-optimizely/Guiders-JS which I've had starred in Github for a while but not used
neonkiwi 14y ago
This looks useful, but I've got a suggestion from a cognitive ergonomics standpoint: smooth scrolling. If a user clicks 'next' and the next step is not on the current screen, pretty much the best cue you can provide to build a contextual understanding of where this next step is on the page is easing into motion, then out of motion.
radagaisus 14y ago
Please don't use this. Tooltip Tutorials are a user experience disaster. If you feel the urge to add this to your site - don't. Close your eyes and imagine Clippy. Breathe deeply and create a user interface that won't need this.
- sequoia 14y ago
  Please give more specific reasons than "it's bad." What's wrong with pointing out UI elements to new users? For what it's worth Facebook does this routinely with UI changes.
  - Joe8Bit 14y ago
    They also have merit during a 'tour' within your conversion process e.g. emphasising features and value points. But I agree with the more general principle, if you have to use these to onboard users WITHIN your experience, something has probably gone wrong.
    - taigeair 14y ago
      it totally depends on the complexity of your application. http://blog.kera.io/post/40920774387/web-apps-onboarding-how-to-treat-your-new-users http://blog.kera.io/post/40920774387/web-apps-onboarding-how...
- esmevane 14y ago
  Hold on: isn't there actual research which indicate improvements both in conversion rate and overall user retention / lifetime value with applications that feature tooltip tutorials on the first-run experience? Are you referencing research which says otherwise?
- zupa-hu 14y ago
  Please do use this. Tooltip tutorials are a user experience heaven. If you don't feel the urge to add this to your site - think again. User interfaces are getting better - which means if your UI is good, it is different, thus it won't be intuitive to those who are trained to not expect it. Often one has to choose to design a UI for the daily use vs. first a time usage. Better to put the clatter in the tooltips than to let them always be in your users way.
sequoia 14y ago
It seems like the tooltips are pointing at nonrelevant locations. http://screencast.com/t/oCGgYh9ytwMx http://screencast.com/t/oCGgYh9ytwMx Is this a flaw in the tool or this implementation? It doesn't seem to work well with different viewport sizes.
- sorich87 14y ago
  It's a flaw in the demo: that tooltip points to the h1 above which is 100% the page width even if there isn't much text there.
casenelson 14y ago
If people are interested, my product http://overlay101.com http://overlay101.com provides hosted product tours that requires far less Dev work than these js libraries.
taigeair 14y ago
How do you guys compare this solution with walkme or kera? Interested in your thoughts. http://www.walkme.com http://www.walkme.com https://www.kera.io https://www.kera.io
- mnicole 14y ago
  Kera's awesome; right now (at least, I got the email about this very recently) they're building presentations for you, for free if you just make a little screencast of what you want. I don't have anything to use it with but it's the most streamlined/natural/intuitive experience I've seen yet.
  - taigeair 14y ago
    That's so nice of you to say that! :)
dlf 14y ago
I always just rip through these things and then try to figure out how things work later. The trouble I've had with these is that it lacks context when I'm not actually trying to do the action it's calling for. I may not be the average user though.
Bjoern 14y ago
Nicely done. Seems to be doing exactly the same as this one. Good for choice :). http://trentrichardson.com/Impromptu/ http://trentrichardson.com/Impromptu/ https://github.com/trentrichardson/jQuery-Impromptu https://github.com/trentrichardson/jQuery-Impromptu
spyder 14y ago
The Foundation framework comes with a similar UI tour component. It does smooth scrolling when tour steps are off-screen and doesn't loose its position when resizing the window. http://foundation.zurb.com/docs/joyride.php http://foundation.zurb.com/docs/joyride.php
coreymaass 14y ago
I love the idea and functionality, but I think the design could be clearer. I'm all for a simple, minimalistic style when it's meant to get out of the way. I find these popovers just too subtle. Jumping from one to the other, it doesn't catch my eye enough, and I have to actively search for the arrow. Maybe offer a theme that really pops, with some variation of the Yellow Fade Technique [http://37signals.com/svn/archives/000558.php http://37signals.com/svn/archives/000558.php]?
helloamar 14y ago
lovely tool, i was about to subscribe to some tour generating app :)

207 points by vineet 14y ago

I found this tour a bit difficult to navigate. The tooltip moves to a different spot each time you click prev/next, making it hard to follow the whole tour. Perhaps navigation that stays in a fixed spot could make this easier to use.

mariocesar 14y ago

Awesome tool. I remember seeing jquery plugins doing this. Would like to see a list of extensions like this.

vineet 14y ago

There have been other tools that do this, but I like the simplicity and cleanliness of settings this one up. I remember some of the other tools required a server access, which was great in that they allows us to do a lot of things, but as a potential user I needed to make sure that they have a business and would be around for when I needed it. The problem that I have had with some of the jquery plugins that do similar is that I had to worry about customizing the plugins with my site's theme. With bootstrap plugins I hope that the plugins just look good with the bootstrap customizations that I have done.

waxjar 14y ago

I can imagine this being useful to explain how a "difficult" UI element works. It seems easy to set up, I like that. The way it's used in this demo, though, I found it's very distracting from the actual content. All my attention went to the little popover, which resulted in not reading any text on the page itself. I think this is partially because the popovers didn't point at anything directly.

dclaysmith 14y ago

I used this library to build the product tour for my app ( http://www.thetaboard.com http://www.thetaboard.com). Was really easy to customize the color scheme and behavior--I think it took 2 hours to integrate it. Adding a product tour really improved my "demo" to "sign up" conversion rate. Probably the single biggest conversion rate "win" I've had.

sorich87 14y ago
Glad it was very useful for you! :)
vineet 14y ago
Awesome. I guess I now have fewer fears integrating it into our site.
optymizer 14y ago
ThetaBoard looks like a Trello clone to me (caveat: Trello itself could be a clone of some other project).
- fady 14y ago
  yeah, for sure. though, you can't lie that it's a great way to manage tasks. i love the trello UI and i'm sure more people are going to use the trello UX when building task management apps.. thetaboard looks super new.. comments on the card itself? i prefer to keep the cards height minimal, so i'm not a fan of that design choice. otherwise, it seems neat, but i def trust trello more with my data. thetaboard terms and conditions could actually have some content :\ edit: clarification.
  - dclaysmith 14y ago
    Launched just under a year ago. The comments issue was a tough decision. In the end, I wanted to keep everything on the card itself and do my best to reduce or eliminate/reduce modal windows and drop down menus (I have some but they are few and far between). I'm actually a fan of Trello myself and use it for some projects--I'm sure Trello will be around for a long time. I am actually ramping up work on ThetaBoard this year (it's been nights and weekends for the couple years) so there is no danger of it going away any time soon. And I'll work on my terms & conditions!
    - fady 14y ago
      I'm glad you're taking the feedback so well. yeah, i keep sensitive data in my trello (i know...) so something about the data, how it's stored, and security would be nice to have. good luck dclaysmith

booruguru 14y ago

Very cool. I'm going try this out on a web app I'm currently developing (which happens to use Bootstrap). I would definitely prefer to implement popovers as opposed to a tutorial with lots of screenshots and whatnot.

dergachev 14y ago

If you're building a product tour, consider making an animated GIF screencast to demo your use case. Yesterday I wrote a tutorial on how to easily create one on OS X using just free tools: Quicktime Player, ffmpeg, and gifsicle. https://gist.github.com/4627207 https://gist.github.com/4627207 (Animated GIFs might also be useful for bug reports).

vineet 14y ago
For our company we experimented with using about a dozen animated GIFs - but found them to be a little hard to deal with. We replaced them with 2-3 short videos and were happier. Now these product tours might be a good thing to add.
- dergachev 14y ago
  IMHO a 45-90 second video done right might the ideal medium for a product overview. But most are way longer, and suck, so I never click on them. GIFs auto play, and so might be good medium to force a user to see a 7-15 second clip of how a feature works. Obviously you should ensure that only 1 is ever showed at a time. I also find there's something hypnotic about a silently looping sped-up clip, though I don't know if this can be used to increase conversions. ;)
  - vineet 14y ago
    Yeah, we did not like the autoplay part and the hypnotic effects.

decadentcactus 14y ago

Also https://github.com/jeff-optimizely/Guiders-JS https://github.com/jeff-optimizely/Guiders-JS which I've had starred in Github for a while but not used

neonkiwi 14y ago

This looks useful, but I've got a suggestion from a cognitive ergonomics standpoint: smooth scrolling. If a user clicks 'next' and the next step is not on the current screen, pretty much the best cue you can provide to build a contextual understanding of where this next step is on the page is easing into motion, then out of motion.

radagaisus 14y ago

Please don't use this. Tooltip Tutorials are a user experience disaster. If you feel the urge to add this to your site - don't. Close your eyes and imagine Clippy. Breathe deeply and create a user interface that won't need this.

sequoia 14y ago
Please give more specific reasons than "it's bad." What's wrong with pointing out UI elements to new users? For what it's worth Facebook does this routinely with UI changes.
- Joe8Bit 14y ago
  They also have merit during a 'tour' within your conversion process e.g. emphasising features and value points. But I agree with the more general principle, if you have to use these to onboard users WITHIN your experience, something has probably gone wrong.
  - taigeair 14y ago
    it totally depends on the complexity of your application. http://blog.kera.io/post/40920774387/web-apps-onboarding-how-to-treat-your-new-users http://blog.kera.io/post/40920774387/web-apps-onboarding-how...
esmevane 14y ago
Hold on: isn't there actual research which indicate improvements both in conversion rate and overall user retention / lifetime value with applications that feature tooltip tutorials on the first-run experience? Are you referencing research which says otherwise?
zupa-hu 14y ago
Please do use this. Tooltip tutorials are a user experience heaven. If you don't feel the urge to add this to your site - think again. User interfaces are getting better - which means if your UI is good, it is different, thus it won't be intuitive to those who are trained to not expect it. Often one has to choose to design a UI for the daily use vs. first a time usage. Better to put the clatter in the tooltips than to let them always be in your users way.

sequoia 14y ago

It seems like the tooltips are pointing at nonrelevant locations. http://screencast.com/t/oCGgYh9ytwMx http://screencast.com/t/oCGgYh9ytwMx Is this a flaw in the tool or this implementation? It doesn't seem to work well with different viewport sizes.

sorich87 14y ago
It's a flaw in the demo: that tooltip points to the h1 above which is 100% the page width even if there isn't much text there.

casenelson 14y ago

If people are interested, my product http://overlay101.com http://overlay101.com provides hosted product tours that requires far less Dev work than these js libraries.

taigeair 14y ago

How do you guys compare this solution with walkme or kera? Interested in your thoughts. http://www.walkme.com http://www.walkme.com https://www.kera.io https://www.kera.io

mnicole 14y ago
Kera's awesome; right now (at least, I got the email about this very recently) they're building presentations for you, for free if you just make a little screencast of what you want. I don't have anything to use it with but it's the most streamlined/natural/intuitive experience I've seen yet.
- taigeair 14y ago
  That's so nice of you to say that! :)

dlf 14y ago

I always just rip through these things and then try to figure out how things work later. The trouble I've had with these is that it lacks context when I'm not actually trying to do the action it's calling for. I may not be the average user though.

Bjoern 14y ago

Nicely done. Seems to be doing exactly the same as this one. Good for choice :). http://trentrichardson.com/Impromptu/ http://trentrichardson.com/Impromptu/ https://github.com/trentrichardson/jQuery-Impromptu https://github.com/trentrichardson/jQuery-Impromptu

spyder 14y ago

The Foundation framework comes with a similar UI tour component. It does smooth scrolling when tour steps are off-screen and doesn't loose its position when resizing the window. http://foundation.zurb.com/docs/joyride.php http://foundation.zurb.com/docs/joyride.php

coreymaass 14y ago

I love the idea and functionality, but I think the design could be clearer. I'm all for a simple, minimalistic style when it's meant to get out of the way. I find these popovers just too subtle. Jumping from one to the other, it doesn't catch my eye enough, and I have to actively search for the arrow. Maybe offer a theme that really pops, with some variation of the Yellow Fade Technique [http://37signals.com/svn/archives/000558.php http://37signals.com/svn/archives/000558.php]?

helloamar 14y ago

lovely tool, i was about to subscribe to some tour generating app :)