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.
Honestly, there are many problems with an overlay follow-me Intro experience. It's good for certain things and in certain situations, but you should be open to using the best method of introduction for whatever you need people to learn. Sometimes the best way is just a paragraph of text, and there are several things in-between that are simple and highly effective.
To add to your critique, something with which many of us are likely familiar is the Slack intro experience. The intro dissolves into three (and only three) small, subtle bubbles that go hover over important parts of the UI. They're just light enough that you can completely ignore them if you like and get on with your work, but if you're confused they stand out. It's quite a nice compromise that makes this follow-the-UI intro really work.
(Disclaimer or whatever: I helped design and implement them.)
Zurb Joyride -
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)
Just had a really great experience creating walkthroughs with it.
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.").
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.
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.
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:
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'.
Further reading: https://www.nngroup.com/articles/mobile-instructional-overla...
Here's the HN discussion from the original post 3 years ago:
I don't believe this format works well with a scrolling page to begin with. It makes a lot more sense on full-screen apps, or on fixed navigation menus. If you really need to show a dialog further down the page, you're better off having the trigger for it be down there - not further up the page.
Most importantly, don't overuse it. Even the most complex situation should not need more than 2-3 of these. Beyond pointing out extremely critical elements to interact with, the page or app shouldn't be that difficult to navigate.