None of the drafts fully work yet, it is just a moonshot to test the technical challenges, realization workflow and desirable designs.
Hoping for reactions and suggestions not about the code but about the UX/UI: which one(s) feels the most adequate? The offcanvas? The modal? The popover? Which combination looks the better one?
Are the Call to Action clear? If not, how to make them clearer?
Bear in mind that the visualization intends to be as comprehensive as possible, ie. they should provide detailed information about the steps. This project is thought as part of a written document, being placed in between content about a (non-specified) topic.
Not a very experienced programmer pounding the keyboard for this reply, but here are my thoughts:
I liked the first one the best, with the sidebar and image centering. Personally, I find that sidebar very orienting and reassuring when looking at all that data. It sort of sorts things out for me and serves as a guide to understanding the flowchart to the right. The other designs threw me off a bit by filling the entire page with a flowchart.I couldn’t really get a full picture of the data flow as the chart didn’t fit the viewport dimensions, and scrolling made me lose track of the data paths out of view.
One idea is to make each tile in the flowchart clickable, with an explanation as where that data came from and what’s happening with it. Another idea is to make the connections between the steps clickable too, explaining the transitionary process and what’s happening there. I think that would make understanding a flowchart deliciously simple through helpful interactivity.
As for calls to action, I think the layout of the first one is familiar enough for people to understand what to do. That being said, you could indicate what’s clickable with underlined text and hover effects. I don’t know. I’m no UI expert!
Those are my humble thoughts on your work. Hope they help out a bit.
Thanks, @nickrg ! I was actually developing in the other direction and abandoned the sidebar when recreating a more finished project, but with this feedback I will return to it to add that sidebar again and see how it looks.
I like your view about clickable connections. I am ommitting some interactions for the sake of simplicity, but I will value your observation and keep them for a future iteration of the project.
I’m glad you found my thoughts somewhat helpful, @evaristoc! Yes, I do think the sidebar is quite a helpful orienter for the layout. I hope it’s not too much trouble to re-implement
I totally get why you can’t add too many clickable connections — I read your original post again and realized you mentioned adding it to a written document, so yes, simplicity is king in such formats. It was just an idea from lazy brains such as myself who have a hard time comprehending flowcharts
Wishing you all the best on your project and I would love to see the final result when you’re finished!