Show HN: Build a JS-only interactive product walk-through for your landing page

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 demo was neat, but (let's skip to the real reason for posting this) I think your product is pretty solid too.

I looked at your pricing and your free tier is enough for unlimited basic usage. I personally use Metabase for this, though you guys have a much nicer UI/UX in my opinion.

Also, one nitpick: The widget on the page showing off a dashboard usage is not an "interactive demo", it's a slideshow. I was really hoping there would be a sandboxed dashboard I could poke around in.

Notion has what I consider to be the best landing page demo [1]. It's the full application. No need to log in or follow specific steps. Scroll down to the "Choose a workflow" section to try it out.

[1] https://www.notion.so/

Why does the adjusted function use pixels as a unit of measurement when the objective is to make the position of each 'click zone' show correctly? Is that not was percentages are for? ie. You have

    var steps = [
     ['/img/flow/click-users.png', [1, 280]],
     ['/img/flow/click-header.png', [765, 155]],

Where the array is x,y coords in pixels? Why would you not use percentages instead for the top and left offsets? I see your adjusted function is getting the correct offset for the screen aspect ratio, but wouldn't you get the same result on percentages?

I love how simple the solution is, I tend to over-engineer stuff like this by trying to actually make it clickable and so on, but this just works great - good example of doing the simplest thing that works!

I think one of the biggest UX detractors that I saw with this (and the main reason I walked away from it instead of digging into how it may work) was that the circle "flew in" to the spot. While I understand what was being attempted to draw the users' attention, for me this caused motion sickness that pretty instantaneously turned me away from seeing it as a valuable tool.

Subtly guiding the user is like slicing a watermelon with a katana, and this was more of a sledgehammer.

It seems the demo is focused on "How to Export Trevor.io Results to Google Docs" on first pass. It breezes past the whole Build Query part, probably since the example query was so trivial. I would've expected a demo more representative of the Query Builder image.

Couple thoughts:

- You should let the user know the goal of the demo before they start it, for example, "Let's build a query of Users by Country and Export it to Google Docs" and indicate their progress through the demo (eg, Step 1 of 5) with a caption of the action they are taking at the bottom of the screen that reinforces the previous bubble. Like:

  - Step 1: Let's build a query of Users by Country
  - Step 2: Here our Users by Country is shown as a bar graph. Let's change it to a Table View 
  - Step 3: We have 14 users in the UK. Let's check the underlying results
  - Step 4: Let's export the results to Google Docs 
  - Step 5: Here's our result exported to Google Docs

- The flying/pulsing circle is fast and distracting - and it shouldn't move the label attached to it

Personally I'd rather see a video than a series of images with a single hot spot. Not only that, I abandoned it after 3 clicks because I felt it was going nowhere. Show me the core of your product, which I assume is the query builder, not the fluff.

Marketing wise this landing page[1] is not great either. It's assuming the visitor understands what a query builder is, how it works, what problems it solves, how is this query builder better than others, etc.

IMO the only useful part of it is the "A better way of getting answers" which still needs a lot more explaining about the product. Sure, great support and nice dashboards should be mentioned but as much smaller points after the core of the product and what it solves has been explained and made super obvious to the visitor.

Also this demo thing, regardless of how useful it is, should be way lower. Most users do not want to make the effort to start clicking stuff and much less see a black box that has no meaning at all.

[1] https://trevor.io/

Coming from the game industry, this kind of obligatory, you-can-only-click here tutorial is the worst. I can understand it if you're short on resources, but discoverability and interactivity should not be sacrificed otherwise.

Strongly dislike that there's no way to go back and forth or some kind of index of how many steps there are.

I do like the idea of it being interactive though.

This is really cool stuff! I was wondering what cool technology is behind this demo, and then it turned out to be so elegant and simple :).

A tool sounds interessting. Build a tool for creating the animations and sell it.

Although the intended use of this might be help pages or screen casts, it sure makes it easy to implement modal tutorials, which is what EVERYONE hates and should avoid at all costs.

What a neat tool.. I'm making a blog of travel pictures, I'm thinking adding this to point out things on photos would be interesting.

Happy to answer any questions on how we built this, if anyone's curious to use it for their own site.

Is pure javascript (with jquery animations).

I really like this. Nice and simple