Show HN: Create interactive diagrams with pop-up content

Show HN: Create interactive diagrams with pop-up content(vexlio.com)

47 points by ttd 254 days ago | 6 comments

This is a recent addition to Vexlio which I think the HN crowd may find interesting or useful.

TL;DR: easy creation of interactive diagrams, meaning diagrams that have mouse click/hover hooks that you can use to display pop-up content. The end result can be shared with a no-sign-in-required web link.

My thought is that this is useful for system docs, onboarding or user guides, presentations, etc. Anything where there is a high-level view that should remain uncluttered + important metadata or details that still need to be available somewhere.

You can try it out without signing up for anything, just launch the app here (https://app.vexlio.com/), create a shape, select it with the main pointer tool and then click "Add popup" on the context toolbar.

I'd be grateful for any and all feedback!

zkmon 253 days 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 253 days 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 253 days 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 253 days 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 252 days 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.