As an user, I usually dislike these walk-through when they are forced to me and I try to finish them as fast as possible. I think a good user interface shouldn't need them by default.
The knowledge gained by sitting through the demo (and more) could be had in less time by simply using the software. I prefer to learn by doing, not watching.
We iterate on onboarding constantly. There's a few concepts that users need to understand to get to grips with using Trevor. E.g. that queries are made up of steps.
I'd prefer to use my time clicking around the site than clicking to close tooltips and modals.
I think introductory tutorials are better served by:
1. Scrollable documentation w/ images and an easily navigable sidebar that allows you to jump to specific topics that draw your attention.
2. In the case of something truly complex I like to watch videos for a more holistic perspective. Note that this is the slow and "relaxing" way of getting information. I do this primarily at night and never if I plan on using a product that same day.
I'd probably recommend a video for conveying a workflow (is the fact that queries are made up of steps best categorized as a workflow?), but make it short and focused; and support it with text so that I can quickly decide whether that video is worth clicking or not. Most of what's in the video should be readable in text on the same page as the video.
Will run this by the team tomorrow.
I looked at the repo again in more detail; and I must admit that I got distracted by the comments and missed out on the intent behind your demo.
While I am not a fan of the interactive demo before you can start using an app, I think that what you've shared is: 1. not that and 2. looks excellent for presentations and landing pages.
My feedback still stands, but I was imagining a much different use case which may not align closely with your product.
Random thought: it may be cool to see this implemented in a "picture-in-picture" fashion on a documentation site where the documentation scrolls to the relevant area as you navigate the app in the pip window.
"confused about how to upload your portfolio? click here for an interactive demo"
There are free solutions too (e.g. http://bootstraptour.com/ )
(But, I would prefer text-based documentation. You can still have videos or animations too if wanted, though.)
I guess a video would do the trick though
This is an optional walk-through on the landing page, for those who prefer that over signing up and trying it themselves.
Not the op, but I didn't interpret the comment as being restricted to certain types.
I particularly dislike any walkthrough. An optional one still needs user-interaction to dismiss. Sometimes multiple interactions.
A few specifics:
- As a first-time visitor to a product, I have usually joined the product with an initial particular motivating intent. Walkthroughs can't typically know this intent (and optimising multiple walkthroughs for many intents would be a challenge), so you're just putting extra clicks in the way of me getting to the thing I joined for.
- If walkthrough experiences were genuinely of use, they'd be integrated as a permanent product feature. Examples of things like this are Instagram / Facebook / Twitter's "discover" features. These are slightly different as they're about discovering users, not features, but the general idea is the same: a user wants guidance.
If it's "click here to dismiss this walkthrough we just started", yes. If it's "click here to view a walkthrough", then... no? User interaction is required to start. That would be optional.
If you're thinking it's the "we auto started something and you can optionally stop it" then yeah, I agree, those are often annoying.
It's essentially the ux equivalent of an ad or newsletter popup.
Imagine that these exist _alongside_ step-by-step documentation reachable by specific searches "How do I download in CSV?".
How in the world am I supposed to know what does what without clicking on them? Even then I'd forget. They were pretty unique icons, too :/
Please don't do that. Tooltips save lives :)