
Show HN: Build a JS-only interactive product walk-through for your landing page - tagspace
https://github.com/tagspace/trevor-demo
======
speedgoose
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.

~~~
superasn
Yes but this would make much more sense if used as help topics, i.e.

"confused about how to upload your portfolio? click here for an interactive
demo"

~~~
andrei_says_
No. Show me an animated gif instead.

~~~
SquareWheel
Huge file size, poor color support, no video controls. Gifs have no place on
the web.

~~~
zzo38computer
It is potentially possible for the browser (or an extension) to support the
user using play/pause/rewind/fast-forward with animated pictures. However, I
do not recommend GIF; animated PNG is better.

(But, I would prefer text-based documentation. You can still have videos or
animations too if wanted, though.)

~~~
zzo38computer
Actually, animated PNG has some benefits and some drawbacks compared to
animated GIF. (You could try both and see which works better for the animation
you are making, I suppose.)

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

~~~
gavinray
Another nitpick, I thought you guys were Travis.ci at first because your names
are very similar and you both have logos of heads in yellow helmets/hard-hats.

~~~
tagspace
Oh no! That's very useful to know.

Hmmm... not sure what to do about that one

------
migueloller
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/](https://www.notion.so/)

~~~
tagspace
Hey Migueloller. I've been trying to find what you mean in their landing page.
Do you just mean it has images showing the features?

I can't see a "choose a workflow" section.

~~~
machello13
It's about halfway down the page. The heading is "Choose a Workflow" then
there's a "Live Demo - Click to Play" button.

~~~
hjkm
Ooh. That's super nice.

------
chrisacky
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?

~~~
tagspace
hey chrisacky. I think you're totally right. Would probably have been much
simpler using percentages. When I was building it I just wanted to get it
working for a fixed width and height.

Then did the adjusted function when we decided we were actually going to use
it, and it needed to work on mobile.

------
Martinsos
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!

~~~
tagspace
Thanks Martinsos. Yeah, we originally wanted to embed our platform somehow in
the page (i-frame or similar), but pretty happy with this solution.

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

~~~
tagspace
Thanks jlangemeier. That's super useful to know. Really don't want to cause
our visitors motion sickness ;).

Any suggestions we could do instead, to draw their attention to the clickable
circle?

~~~
karatestomp
Light usually works. Fade out what's not supposed to be the focus.

I'm not particularly motion sensitive but agree that the animation was really
jarring and threw off my focus every time it happened, which is probably the
opposite of what's intended.

[EDIT] particularly, on revisiting it, I think the problem is that the
animation doesn't flow from one point of focus to another, but effectively
resets the user's eye every time it happens by coming in from "outside" of the
screen. Fading out what's not currently important/interactive, or, if you must
have an animation, making it move less-loudly from one point of focus to
another would be an improvement. I think the former's both more elegant and
more effective but either'd be better.

~~~
jlangemeier
I do like this suggestion; another thought I had was just a small bounce of
the circle around the area that it wants your attention at (which seems to
happen towards the end of the animation).

------
tmpfile
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

~~~
tagspace
I like this idea. We could even give them a choice of different queries to
build, and then let them see the flow for that. Is that what you mean?

Progress (e.g. 2 of 5) would also be very satisfying for users.

Thanks for this suggestion.

------
pier25
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/](https://trevor.io/)

~~~
hjkm
[I worked on the landing page] pier25, that's really great feedback, much
appreciated. Will see what we can do to answer the questions you've mentioned.

If you have any examples of pages you particularly like to hand, I'd love to
take a look.

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

~~~
netsharc
It's basically a slideshow with animations, not a tutorial on top of the real
UI...

In theory one could also put up a YouTube video of screenshots annotated on
Photoshop, but this does seem more elegant.

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

~~~
tagspace
Really good point. Would be very cool if could go back and forth.

------
matijash
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 :).

~~~
tagspace
Thanks Matijash. Yeah, we spent ages trying to find a good solution for this,
then thought, 'let's see if we can build it ourselves' ;)

Feel free to fork if you need something similar for your site.

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

~~~
ckluis
A gutenberg (Wordpress) plugin that did this via a UI would be an INSANE win!
I'm buying this if someone builds it.

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

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

~~~
tagspace
That's a really cool use-case.

------
tagspace
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).

~~~
tannhaeuser
Why do you point out that it's pure javascript? As opposed to what? HTML/SVG?
What does the user or developer gain from it being pure javascript?

~~~
tagspace
Good point. I just meant as opposed to some SaaS platform widget that you have
to embed (and potentially pay for).

------
losthobbies
I really like this. Nice and simple

