Asking for Design Opinions: Different Interactivity Features to Explain Flowcharts (contains screenshots)

Hi everyone,

I am working several designs that help me add relevant information through interactivity explaining the steps in a flowchart.

= WHAT IT DOES =

I have prepared 3 demos so far, all of them not fully working but just to test different functionalities:

Version 1 (sidebar and image centring) https://codepen.io/ecccs/pen/NPKqLNX

version 2 (one popover; one offcanvas) https://codepen.io/ecccs/pen/GgKNVLe

version 3 (popover with a link to a offcanvas; modal) https://codepen.io/ecccs/pen/bNbWJxK

= WHAT I NEED HELP WITH =

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.

1 Like

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.

Happy flowcharting!

1 Like

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.

Thanks a lot for your feedback! :pray:

1 Like

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

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

Wishing you all the best on your project and I would love to see the final result when you’re finished!

Happy New Year’s,

Nicolas

Thanks, @nickrg

And I hope you get the best of freeCodeCamp this year. We might meet again here some time or in the chat.

Wish you the best!

1 Like