

Easy way to build product tours with Bootstrap - vineet
http://sorich87.github.com/bootstrap-tour/index.html

======
dclaysmith
I used this library to build the product tour for my app (
<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.

~~~
optymizer
ThetaBoard looks like a Trello clone to me (caveat: Trello itself could be a
clone of some other project).

~~~
dclaysmith
Clone? No. Similar? Sure.

When Trello came out I had been working on ThetaBoard for a while. Both
products draw heavily from some Kanban tools that have been around for years.

If Trello had been out earlier I might not have started my project. That being
said, I'd argue that the UX/UI and aesthetics of the two apps are different.
I'm going to be making some improvements this year that will differentiate a
bit more. As long as people keep using it, I keep plugging away at it.

~~~
optymizer
Hey I didn't mean any disrespect, I was just surprised by how similar it
looks. I myself wondered what UI library they're using (if any). Anyway, I am
using Trello (no reason in particular) for some projects, but I'll check
ThetaBoard out. Good luck with it!

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

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

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

------
taigeair
How do you guys compare this solution with walkme or kera? Interested in your
thoughts.

<http://www.walkme.com> <https://www.kera.io>

~~~
mnicole
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
That's so nice of you to say that! :)

------
dergachev
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>

(Animated GIFs might also be useful for bug reports).

~~~
vineet
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
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
Yeah, we did not like the autoplay part and the hypnotic effects.

------
sequoia
It seems like the tooltips are pointing at nonrelevant locations.
<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
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.

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

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

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

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

------
coreymaass
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>]?

------
Bjoern
Nicely done. Seems to be doing exactly the same as this one. Good for choice
:).

<http://trentrichardson.com/Impromptu/>
<https://github.com/trentrichardson/jQuery-Impromptu>

------
spyder
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>

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

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

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

~~~
zupa-hu
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.

~~~
dlf
To be fair, isn't one of the things that sets apart a UI as "good" that it is,
in fact, intuitive?

~~~
pooriaazimi
I agree. But sometimes, you just _can't_ make it easy enough for everybody.
iPhoto for iPad is probably the nicest iPad app I've ever seen, and it has a
tooltipy help system because it's humanely impossible to create something as
powerful as iPhoto for iPad that's also _intuitive_.

Sometimes you need a gentle nudge in the right direction. Now, I personally
dislike Metro very, very much. But the "charms" idea seems nice. How you tell
the user (that's just started using Win8) how to activate a charm without a
tooltip (or something similar)? Tell the user once (or twice), and only _after
that_ it becomes intuitive.

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

