Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Build a JS-only interactive product walk-through for your landing page (github.com)
184 points by tagspace 4 months ago | hide | past | web | favorite | 83 comments

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.

I agree. I hate these walk-throughs. I always skip them because they tend to be exceedingly basic and frustratingly slow. E.g. "Click on your avatar to view your personal profile". Like every other site on the internet? Thanks for that curated pro tip.

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.

What if there's some learning curve in the product. How would you prefer to receive this information?

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.

The reason that I hate the guided tour is that it's restrictive. It's not at my pace and it gives me the feeling of being obstructed in my goal of learning the software; which is actually my secondary goal. My first goal is using the software. Learn by using. In the beginning just using is good enough; learning should follow naturally through use.

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.

Regarding the "Learn by using." comment -- this is how I am when it comes to interfaces. Actually exploring them and seeing what things are. Unfortunately, a larger number of users seem to be the opposite of that anymore (at least in my field). More and more users expect everything to be pointed out to them and they don't exhibit that same desire to explore. It's sad, really.

Thanks for the detailed response. Super helpful!

Will run this by the team tomorrow.

Glad to help.

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.

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"

There are a few products on the market for it (I work for one, and no, it's not WalkMe).

There are free solutions too (e.g. http://bootstraptour.com/ )

I suppose that seems reasonable, although text-based documentation should probably be made available too.

This is a really nice suggestion! We could totally do that. Will run that by the team. Thanks

No. Show me an animated gif instead.

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

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

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

But animated GIFs don't go at your own pace. Doesn't that annoy you sometimes?

I guess a video would do the trick though

Something taking over my interface and locking me into its narrative, explaining instead of showing annoys me 10x more. An animated gif can loop so I can watch it twice.

Problem with animated gifs is that they are not very efficient in terms of bandwidth, especially if you need them to show UI interactions (which means you need a high frame rate).

The word "gif" now means both the format GIF, and also any generic short, looping video on the Internet. As a result, you can just use a webm or other format, as Gfycat does, since it's highly compressible and no viewer actually cares about the underlying format, only the content.

hey speedgoose. Totally agree. You mean the ones in-platform, before you can use the product, right? Yeah, we don't like those either.

This is an optional walk-through on the landing page, for those who prefer that over signing up and trying it themselves.

> You mean the ones in-platform, before you can use the product, right?

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.

> An optional one still needs user-interaction to dismiss.

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 neither. It's "click here to dismiss this annoying message asking you about something you don't want"

It's essentially the ux equivalent of an ad or newsletter popup.

There are poor implementations of this, certainly. Is that the only way this feature could be used? Would it still be obtrusive if it were on the help/knowledgebase page?

Imagine that these exist _alongside_ step-by-step documentation reachable by specific searches "How do I download in CSV?".

It's definitely not equivalent to an advertisement.

A good product walkthrough is just part of user onboarding. By the time I’m done creating an account I should already know what to do and how to get Main Benefit

It's true. The problem we have though, is that there's a bit of setup involved to connect Trevor to your database, so we want to show the users the value add early as possible (even before sign up if we can)

A good user interface is only good for people that like it, you cannot please all "populations", just try to make an interface that will be both liked by techs and HR / managers. Good luck with that.

Speaking of good UIs, I recently used not one, but two task management websites that had no tutorial (OK, no problem there) and... no tooltips for any of the textless icons.

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

I agree. I don't want a walk-through. I want documentation.

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.

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.

Oh no! That's very useful to know.

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

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/

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.

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

Ooh. That's super nice.

Do you use Notion for personal organization? How do you like it?

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?

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.

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!

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

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.

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?

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.

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

That's super useful feedback. Thanks. I particularly like the light fading idea.

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

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.

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/

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

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.

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.

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.

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

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

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.

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

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

Yeah, true. Feel free to nab the code if you want to make a service from 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.

That's a really cool use-case.

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

This is the first time I’ve seen jQuery defined as “...plain, vanilla jQuery”!

I find this refreshing. jQuery works very well for simple and direct stuff. No need to over-complicate things!

No need to over complicate things by adding an unnecessary library?

I'm sympathetic to jQuery users and I think it's a phenomenal artifact in the history of the early web but unless you need to accommodate IE9 I don't know why you'd want to use it for a widget like this.

It's using some animation sugar from jQuery (source is in this blogpost: https://app.trevor.io/public/blog/demo).

It might be possible to port most stuff over to ES6 and use CSS animations; however, the code is concise and readable.

I'm not arguing against jQuery in the abstract, but you can write concise readable vanilla js/css with animations.

I've used jQuery recently because I had to target older browsers, but if you don't it's almost always cleaner and lighter weight to use modern J's.

Honestly, my first thought was to port the code to ES6/CSS3 because I also share the belief that the code can be as concise if not moreso; however, I still think what the author did was a good solution.

I think the tradeoff is if you want to delegate everything (animations and DOM manipulation) to one language using a single library or split things up into two languages with no libraries. I prefer splitting things between JS and CSS, but I'm impressed with how clever, concise, and expressive using jQuery can be.

Yeah, true. Maybe we'll try and port this to CSS animations at some point.

Have we really come so far that using jQuery is interpreted as not overcomplicating things?? jQuery is the extra complexity people are raising issue with here. It's not needed (and definitely shouldn't be described as "plain, vanilla". There's nothing vanilla about an extra unnecessary dependency).

I think we have, for better or worse. When I think of frontend JS these days, what comes to mind is Angular, React, Vue, Svelte, etc. jQuery feels (and is) simple in comparison.

All the more surprising - I've been building frontend UIs from the late 90s, starting with plain JS, to prototype, to jQuery and onwards. I'm kinda amazed over how my perception of 'what is normal/acceptable in JS' has slowly but steadily changed over time.

I'm a big fan of a lot of new frameworks, but one of the reasons I prefer React* to Angular is its simple feel.

The React library is usable "with" idiomatic plain javascript, rather than instead of (sure chained jQuery api calls are technically JS, but they're more akin to another language/convention within. Angular html directives are a whole nuther thing). The React library itself is small (~7kb to jQuery's ~30kb), and simple. So conceptually simple in fact that it lends itself to reimplementations like preact. The added weight of the somewhat over engineered react-dom renderer needed for browser rendering is regrettable, but still the modular approach is elegant in its simplicity and there's no reason you couldn't swap out the renderer.

What I'm getting at here is: I much prefer using plain vanilla JS as I did when I started in the early 00s, but even when it does makes sense to jump on the library bandwagon, it's possible to take a critical approach and avoid unnecessary extra complexity. jQuery has never been that. At any point.

* Important to clarify I'm referring to the React library, not React's ecosystem

I thought that idiomatic react involved using JS render functions to turn JSX + Data into HTML; and using css-in-js to handle styles?

I'm somewhat wary of React because I feel like it pushes developers to work with non-standard tools rather than the HTML + CSS + JS that browsers handle just fine.

I agree wholeheartedly on the ecosystem. I think global state stores will have a reckoning in the next 10 years where we collectively realize that maintaining a large amount of client-side state is not required for 90% of sites.

You're right about idiomatic React + JSX; I was incredibly wary of React at first because of the apparent requirement of a JSX preprocessor, to the extent that I went out of my way to use non-JSX React. It was very easy—the ease of opting to do that gave me a bit of extra appreciation of the modularity of React (JSX is 100% a separate thing).

That said, Typescript got me (maybe a little too) comfortable with having a preprocessor: I still use JSX-less React but in Typescript I've actually started using React-less JSX...

CSS-in-JS is silly. I put that idea into the same bucket as a lot of other nonsense in the React ecosystem. Don't.

Thanks for the explanation.

I tried out React a while ago, didn't like the idea of JSX, then saw the complexity of the React ecosystem, and then decided "nope, too much complexity."

I ended up using Vue, although from that I'm seeing, Vue is going down the "let's add complexity" route with Vue 3.

I'll look at React again and reassess in this new light.

haha. Fair point.

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?

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

Probably opposed to 3rd party dependencies like React/Vue...


I really like this. Nice and simple

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact