One problem I have with libs like this is you have to chase the "Ok" and "Next" buttons around. It would be much better IMO to have a fixed footer with the action buttons but have the lightbox w/description move around the page as it does now.<p>In addition, I would prefer not to have the entire rest of the UI blacked out. Lightboxes don't seem appropriate here since I want to see the "big picture" all the time and just have relevant sections highlighted. This would actually be a much simpler implementation, just fade the background of the div to highlighter-yellow.
Another similar technology (with slightly less jumpy scroll, but I'm sure you could tease out some bugs if you tried):<p>Zurb Joyride -
<a href="http://foundation.zurb.com/sites/docs/v/5.5.3/components/joyride.html" rel="nofollow">http://foundation.zurb.com/sites/docs/v/5.5.3/components/joy...</a><p>Last time I looked into building an introductory FTUX with intro.js, I found myself trying to make the choice between these two (intro.js and joyride)
While this might feel like a great way to introduce people to features in an application, needing it is probably a sign that your UI isn't really working. In my experience learning a UI is a chore, and people hate trying to do it. If the interface is well organised, uncluttered, and laid out in a logic manner that doesn't hide things there's no need to have an intro.
This is a neat project but also replicates the functionality of many libraries (I'm not going to dig it up but there are more than a few of these floating around with varying amounts of maintenance). Anyone needing to use these seriously will quickly end up forking it. Also - I think the goal of EVERY UX designer should be to prevent the need of these kind of things AT ANY COST. It obviously varies by product and industry but any designer worth their salt will do everything they can to make it painfully obvious what a user should do at every step of the way.
It's certainly a nice enough script for what it does, and I can see it being useful in some instances, but... a lot of this 'feature tour/tutorial' stuff strikes me as more of an excuse to not worry about ease of use. A good site design should be intuitive in of itself, not something that requires a guided tour to figure out.<p>It's a bit like the modern gaming world to be honest. In the old days, games like Super Mario Bros was designed to teach you through level design, so you'd figure out how things worked without getting a huge info box thrown in your face.<p>Like this:<p><a href="https://www.youtube.com/watch?v=ZH2wGpEZVgE" rel="nofollow">https://www.youtube.com/watch?v=ZH2wGpEZVgE</a><p>On the other hand, games since got obsessed with tutorials detailing every minute thing about the title, leading to such over the top insanity as this 'help DVD' included with Super Mario Galaxy 2:<p><a href="https://www.youtube.com/watch?v=PbDLuDRgnkM" rel="nofollow">https://www.youtube.com/watch?v=PbDLuDRgnkM</a><p>These tutorials on sites and in mobile apps remind me all too much of the latter. It's like 'we won't use our product to teach people in a natural way, so we'll put in a guide for complete dummies instead'.
Kudos, cool project. However, this behavior is extremely easy to abuse and often leads to a poor user experience. If you want to do something like this, present one tip at a time and specifically when they are most useful. Don't present an entire manual during the onboarding experience.<p>Further reading: <a href="https://www.nngroup.com/articles/mobile-instructional-overlay/" rel="nofollow">https://www.nngroup.com/articles/mobile-instructional-overla...</a>
To add to the list of similar/related tools, LinkedIn's Hopscoth: <a href="https://github.com/linkedin/hopscotch/blob/master/CONTRIBUTING.md" rel="nofollow">https://github.com/linkedin/hopscotch/blob/master/CONTRIBUTI...</a>
I use this library on couple of my projects, I love it.<p>Here's the HN discussion from the original post 3 years ago:
<a href="https://news.ycombinator.com/item?id=5380056" rel="nofollow">https://news.ycombinator.com/item?id=5380056</a>
I like the idea behind this.. but its kind of jarring. Does anyone have a good wordpress plugin with similar functionality? I want to have an overlay that shows how I'm doing the data collection on my sites.
This is pretty nice! It seems to need some work on mobile though: <a href="http://i.imgur.com/6DcJOxu.png" rel="nofollow">http://i.imgur.com/6DcJOxu.png</a>
Done this a year before they've done theirs – <a href="https://github.com/oskarkrawczyk/tour.js" rel="nofollow">https://github.com/oskarkrawczyk/tour.js</a> (never got traction unfortunately, probably because it's MooTools-based and 2012 was the year when everyone who used MooTools started dropping it in favor of jQ).
Adding to the mix, we've also considered Onboard Tips (<a href="https://onboardtips.com" rel="nofollow">https://onboardtips.com</a>) because it allows someone non-technical to create in-app tours.
A similar library if you're using jQuery is <a href="http://trentrichardson.com/Impromptu/" rel="nofollow">http://trentrichardson.com/Impromptu/</a>