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.
This is why the new trend of dismissible pop-over 3-step intros is a wonderful thing, to be frank.
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.
It would be cool to phase the release of new features with small notifications and upping the amount of call-to UI elements as X time passes without user engagement. Can't work for every site but certainly sites with regular account holders.
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
(Disclaimer or whatever: I helped design and implement them.)
To be fair, you can use the forward / backward arrow keys to navigate around the features, but it isn't clear upon first attempt. It also doesn't solve the issue on mobile, where arrow keys aren't available many times.
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.
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.
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.").
> 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.
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.
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'.
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.
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.
Done this a year before they've done theirs – 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).
Extremely so. For one, it actually jumps the scroll position twice in a row when you click. Secondly, the scroll should be performed first, followed by the appearance of the dialog once the scroll is complete. Finally, it would be better to "scrollTo" the position rather than an immediate jump. This way the user has a sense of where the scroll went to relative to their starting position.
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.
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.