
Intro.js – Step-by-step guide and feature introduction for your website - afshinmeh
http://introjs.com/
======
leeoniya
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.

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.

~~~
laughinghan
Have you seen Desmos's tours? There's no Ok or Next buttons at all, it
automatically detects when you've actually interacted with the feature that
you're being taught:
[https://www.desmos.com/calculator?tour=sliders](https://www.desmos.com/calculator?tour=sliders)

(Disclaimer or whatever: I helped design and implement them.)

~~~
lexhaynes
Oh wow!! This is so cool! Where was this tool when I was in high school ;)

------
hardwaresofton
Another similar technology (with slightly less jumpy scroll, but I'm sure you
could tease out some bugs if you tried):

Zurb Joyride -
[http://foundation.zurb.com/sites/docs/v/5.5.3/components/joy...](http://foundation.zurb.com/sites/docs/v/5.5.3/components/joyride.html)

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)

~~~
alexisnorman
Another good one for the road is HubSpot's Shepherd:
[http://github.hubspot.com/shepherd/docs/welcome/](http://github.hubspot.com/shepherd/docs/welcome/)

Just had a really great experience creating walkthroughs with it.

~~~
defenestration
Thanks. I just opened all the examples mentioned in the comments and this one
feels the most elegant.

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

~~~
joshribakoff
What you're overlooking is the users who type website addresses into google,
and compose entire emails in the "subject" field. Some people just require a
little hand holding no matter how obvious the UI is to the power users.

~~~
onion2k
Do you really think a 5 step animation is enough to overcome UI problems like
navigational searching or a fundamental misunderstanding of how email works?

Those things are _examples_ of the UI failures I'm talking about. Blaming the
person using the app for doing something wrong is how "fixes" like putting in
an "intro" happen. What we need is to design human-centred experiences that
work the way we automatically think they should, not patching things up with
instructions that'll be forgotten within 5 minutes.

This library puts the developer first (driven by thinking like "I told my
users what's in the app so now they know what's there.") rather than putting
the person using the app first (driven by thinking like "The users mustn't be
afraid to experiment by clicking on stuff.").

~~~
abustamam
> The users mustn't be afraid to experiment by clicking on stuff.

They shouldn't be, but they are. Nothing is "wrong" with non-technical users,
but learning new software, especially complex software, is something they
automatically believe they can't do, and so they are afraid to experiment by
clicking on stuff.

I feel like Facebook's design is pretty intuitive, but I still have my mom
asking how to do simple things that are hidden behind menus (for example,
change privacy settings). Nothing's wrong with her, she's just afraid of
breaking technology, and it's unlikely anything will change that fundamental
belief. However, adding an intro could ease these types of users into the
software, and perhaps even lead them to experiment a bit more.

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

~~~
Walkman
There are complex system where something like this is inevitable, because it's
complex by nature.

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

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.

Like this:

[https://www.youtube.com/watch?v=ZH2wGpEZVgE](https://www.youtube.com/watch?v=ZH2wGpEZVgE)

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:

[https://www.youtube.com/watch?v=PbDLuDRgnkM](https://www.youtube.com/watch?v=PbDLuDRgnkM)

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

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

Further reading: [https://www.nngroup.com/articles/mobile-instructional-
overla...](https://www.nngroup.com/articles/mobile-instructional-overlay/)

------
amelius
While some of the effects are smooth, the scrolling is jumpy and unexpected.

------
nkantar
To add to the list of similar/related tools, LinkedIn's Hopscoth:
[https://github.com/linkedin/hopscotch/blob/master/CONTRIBUTI...](https://github.com/linkedin/hopscotch/blob/master/CONTRIBUTING.md)

------
10dpd
Unfortunately this implementation isn't accessible and doesn't work with
screen readers.

------
rootlocus
I hope websites would stop using "Raleway" for content text. I can't
understand half of the letters because they're so thin.

~~~
saadq
It looks like he's using the Skeleton library and I think its font is set to
Raleway by default.

------
kossmoboleat
[http://bootstraptour.com/](http://bootstraptour.com/) is very similar to
this.

------
martin-adams
Does anyone know of any good research backed studies as to whether these
guides improve usability or not?

------
hrayr
I use this library on couple of my projects, I love it.

Here's the HN discussion from the original post 3 years ago:
[https://news.ycombinator.com/item?id=5380056](https://news.ycombinator.com/item?id=5380056)

~~~
taspeotis
I've used it too. It's nice and unobtrusive.

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

------
Trufa
This is pretty nice! It seems to need some work on mobile though:
[http://i.imgur.com/6DcJOxu.png](http://i.imgur.com/6DcJOxu.png)

------
bdcravens
It's a neat little project, but it's been around for 3 years.

~~~
vmorgulis
I've seen a site completely made with reveal.js (and maybe pandoc).

[http://lab.hakim.se/reveal-js/#/](http://lab.hakim.se/reveal-js/#/)

~~~
bdcravens
How does this relate to introjs?

------
baron816
I'm definitely going to look into this to help with on-boarding for my web
app. I wish this had existed weeks ago.

------
sleepybrett
Feels misnamed, brought back thoughts of flash intros in 2002. Should be
renamed to something like grandtour.js

------
wassago
Done this a year before they've done theirs –
[https://github.com/oskarkrawczyk/tour.js](https://github.com/oskarkrawczyk/tour.js)
(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).

------
robot
It is great! I love that it is small, and love the hints feature.

~~~
afshinmeh
Cool! Yeah the hint feature was added recently.

------
FabioFleitas
Adding to the mix, we've also considered Onboard Tips
([https://onboardtips.com](https://onboardtips.com)) because it allows someone
non-technical to create in-app tours.

------
marcus_holmes
I'd use this... except my interface is in React.

------
jzig
A similar library if you're using jQuery is
[http://trentrichardson.com/Impromptu/](http://trentrichardson.com/Impromptu/)

------
hackerboos
The step 3 -> 4 is jarring on Chrome 48 OSX.

~~~
afshinmeh
Hmm, I don't have this problem. Are you talking about the introjs.com demo
page?

~~~
hackerboos
Yes

------
kleampa
onboardx.com is a similar tool with no coding implementation and segmented
guides

~~~
degenerate
While intro.js has some faults, this one is even worse. It doesn't even feel
like it tries to fit into the webpage.

~~~
afshinmeh
Yeah I know the issues with the Introjs but I will release a new version this
month, trying to address all existing problems. Cheers.

