Easy way to build product tours with Bootstrap | Hacker News Reader

Easy way to build product tours with Bootstrap

sorich87.github.com

207 pointsvineet45 comments

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.

Any idea how much this has increased signups for you? >10% ? I think that you have implemented this really well in the demo.

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

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.

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!

Does anyone know if there is any nice Kanban board software like exists in the FOSS community? (besides TeamBox3)

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.

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!

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

Thanks!

Well done. You integrated it very well. Did you test this versus a static tour?

Awesome. I guess I now have fewer fears integrating it into our site.

can you share some data? i.e. increase in conversion?

Glad it was very useful for you! :)

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

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.

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.

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

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

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.

That's so nice of you to say that! :)

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

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.

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. ;)

Yeah, we did not like the autoplay part and the hypnotic effects.

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.

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.

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.

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.

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.

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

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

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

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

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

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.

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.

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.

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

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.

It's not quite that simple. A good interface for a power user is not a good interface for a first time user. Many developers think VIM has a good interface for what they want to do but I wouldn't call it intuitive for a first time user with no prior knowledge of its interface paradigm.

Tools to bridge the gap between first use and power use are worth using.

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?

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.

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.

it totally depends on the complexity of your application.

http://blog.kera.io/post/40920774387/web-apps-onboarding-how...

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

Reply on news.ycombinator.com