Show HN: Create interactive diagrams with pop-up content

(vexlio.com)

46 points | by ttd 4 days ago ago

6 comments

  • zkmon 3 days ago ago

    To be honest, I find any dynamic or interactive changes to technical diagrams as distracting. For me the benefit of pouring more info via dynamic popups or animations is lost due to lack of static info that can scanned back and forth while I try to understand the thing, just by looking at it. I need the diagram to stay static and not force my way of understanding to fit into the interactions or animations.

    • ttd 3 days ago ago

      This is a great point and not one that I had considered. I suspect I am the same way - scanning back and forth while studying a diagram.

      It's possible this tool may be more appropriate for e.g. presentation of info to a mixed audience. Technical people may have questions that can be answered with detail that non-technical people would find distracting, if it were visible on the main diagram. And "presentation" here could be a literal presentation in a conference room, or documenting something on a site that people visit on their own.

      You could make the argument in that example that you should create two diagrams, one for each audience. I think that is a valid argument - but I can also imagine maintaining two separate diagrams that present similar information could be irritating.

  • preommr 3 days ago ago

    Unfortunate that this didn't get more traction because it's a pretty cool app!

    I like the user interface and overall design. Also very nice onboarding of just logging in and trying the app.

    Based on the title I thought that the pop-ups were the USP, but reading your post I am glad that you see it as just another feature because tbh I think it's kind of niche. I see the thinking, but in practice I think there's a few usability issues

    It's kind of jarring to just move your mouse across the screen and accidentally hit a shape with pop-up and have the whole screen just blast a different color. And I only set it it for one shape, if I had multiple, I could easily see it getting very annoying. OTOH, I am not sure how you fit in buttons into a diagram when you're trying to keep it clean.

    Speaking of jarring, probably a good idea to dim (or overlay to hue-shift, or filter like blur or texturize) instead of changing colors across the whole screen.

    Honestly, I think I might need to see some better examples to be convinced because I would rather just click next slide for presentations I definitely don't think I'd hover over different elements through a mouse. And I'd probably prefer a labeled slideshow for user guides. Something that's low-tech, easy to embed, easy to understand. If I put time and effort into well designed popups, I don't want it to be suble and out of the way because then people might miss it.

    I think I would much rather have different states for scenes, and have the option of switching to a state by hovering on a list of menu options (maybe organized into sections with a collapsable ui element). That would probably be pretty useful, and from there it's pretty trivial to add event triggers on shapes to active those state transitions instead. If through A/B testing, people like it then, great. If not, the ui controls are a pretty solid feature.

    Also as a side note, I drew an ellipse and adjusting the upper left hand corner triggered what I first thought was a bug that caused the ellipse to become flattened (height of 0). I think what happened is that it snapped to something on screen in a way that wasn't obvious. I get that there's lines to show snapping, but it aligns with too many things (e.g. I had a polyline with a few nodes), and it's really bad if it's zoomed out where a normally large sized shape (400px) dissapears by moving the mouse a few pixels because it's zoomed out (so now it's 30px) and the snapping threshold is almost the size of the object, plus it's now aligning with things that were previously off screen.

    Anyways, Good luck!

    • ttd 3 days ago ago

      Thank you very much for all this feedback! I really appreciate your consideration.

      For your note on different states for screens. Can you elaborate or give an example? I'm quite interested in this mode that you're describing.

      The ellipse issue sounds like snapping getting in the way. It's on my list to come up with a better heuristic of when to apply snapping or not. One example of an idea I have here is to incorporate some hysteresis effect - essentially examining the local history of mouse movements when deciding to apply snapping or not. Right now each mouse movement is treated independently.

      Also, were you in dark mode? It's definitely not intended that the whole screen should change color - a popup should dim the content behind. The whole screen changing color sounds like a bug and I'll investigate.

      • preommr 2 days ago ago

        >For your note on different states for screens. Can you elaborate or give an example? I'm quite interested in this mode that you're describing.

        I meant the very obvious feature (you might already have it) of objects with properties and a unique id, then a state that indexes snapshots of those objects with different properties. With the ability to diff between states by id of the object. So State1:[Square{id:0, x:0, y:0}], State2:[Square{id:0, x:screen.width, y: screen.width}], where going from state1 to state2 would tween the square from top-left to bottom-right.

        I am assuming you already have something like that (you already have the objects, the properties, and some states like undo/redo) and it's about exposing the ui around it with labeled states at the user-level.

        > Also, were you in dark mode? It's definitely not intended that the whole screen should change color - a popup should dim the content behind. The whole screen changing color sounds like a bug and I'll investigate.

        That's what it was! I tried with light mode in firefox and it worked much better.

        • ttd 7 hours ago ago

          Ah, ok - thank you for elaborating on that. I don't actually have that type of interactivity at the moment, though you're right in saying all the information is there in order to make it happen. I also like your idea of changing between the states via some collapsible menu. In theory all of this could be achieved just by building on what's already here. Do you mind sharing what sorts of things you might use this for?

          Glad to hear dark mode was the other issue :-). I'll investigate further, it's probably just a matter of a flag not being propagated properly during the scene change.