9 ms·
Show HN: Build a JS-only interactive product walk-through for your landing page
- tagspace 7y agoHappy 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).
- _eht 7y agoThis is the first time I’ve seen jQuery defined as “...plain, vanilla jQuery”!
- tagspace 7y agohaha. Fair point.
- npsomaratna 7y agoI find this refreshing. jQuery works very well for simple and direct stuff. No need to over-complicate things!
- nkozyra 7y agoNo 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.
- rajangdavis 7y agoIt's using some animation sugar from jQuery (source is in this blogpost: https://app.trevor.io/public/blog/demo 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.
- nkozyra 7y agoI'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.
- rajangdavis 7y agoHonestly, 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.
- tagspace 7y agoYeah, true. Maybe we'll try and port this to CSS animations at some point.
- lucideer 7y agoHave 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).
- npsomaratna 7y agoI 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.
- lucideer 7y agoI'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
- stepbeek 7y agoI 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.
- tannhaeuser 7y agoWhy 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?
- matijash 7y agoThis 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 7y agoThanks 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.
- deleted 7y ago[deleted]
- Martinsos 7y agoI 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 7y agoThanks Martinsos. Yeah, we originally wanted to embed our platform somehow in the page (i-frame or similar), but pretty happy with this solution.
- deleted 7y ago[deleted]
- chrisacky 7y agoWhy 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 7y agohey 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.
- speedgoose 7y agoAs 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.
- tagspace 7y agohey 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.
- lucideer 7y ago> 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.
- lowercased 7y ago> 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.
- golergka 7y agoComing 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 7y agoIt'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 7y agoStrongly 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 7y agoReally good point. Would be very cool if could go back and forth.
- progx 7y agoA tool sounds interessting. Build a tool for creating the animations and sell it.
- losthobbies 7y agoI really like this. Nice and simple
- netsharc 7y agoWhat 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 7y agoThat's a really cool use-case.
- migueloller 7y agoNotion 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 7y agoHey 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 7y agoIt's about halfway down the page. The heading is "Choose a Workflow" then there's a "Live Demo - Click to Play" button.
- hjkm 7y agoOoh. That's super nice.
- deleted 7y ago[deleted]
- machello13 7y agoDo you use Notion for personal organization? How do you like it?
- pier25 7y agoPersonally 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 7y ago[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.
- jlangemeier 7y agoI 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 7y agoThanks 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 7y agoLight 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.
- tagspace 7y agoThat's super useful feedback. Thanks. I particularly like the light fading idea.
- jlangemeier 7y agoI 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).
- deleted 7y ago[deleted]
- gavinray 7y agoThe 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.
- tmpfile 7y agoIt 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 7y agoI 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.
- cosmotic 7y agoAlthough 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.