3

I’m working on the tool for creating complex workflows, as you see on the attached image each item called “process” has multiple inputs and outputs which are connecting other “process items” even located far away from the first, so each “process item” has max 20 inputs and outputs and the connection could be made between each “process item”.

enter image description here

[Update 03_07_23] Below you can see how I plan to approach switching from master to the detail view. On hover I wish the whole path be highlighted.

enter image description here

My problem is how to make this visualization more clear for the users, how to decrease this clutter, the spaghetti of connections, how to show users the connections in more convenient way?

Thanks in advance ;)

3
  • 1
    For me, the most immediate cause of confusion is the connections that are partially hidden (where they go behind a process box). It's especially bad where the line emerges from behind, as it's not obvious whether it is just passing through or it originates there (e.g. the connection from the top-left to the bottom right does this twice). Try finding which 8 processes have no outputs. Adding something to mark the beginning of each line (like the arrow-head at its end) would help a lot with respect to this one problem. ¶ But while that would help, it doesn't solve the much larger problem. Commented Jun 26, 2023 at 12:20
  • @RayButterworth you are totally right, the one things that comes to my mind to solve it is to highlight just one selected connection and at the same time grey out all other not selected.
    – mario
    Commented Jun 26, 2023 at 12:36
  • @mario The update looks better! Unfortunately, process 3, property 3 is unreadable due to the other process lines. Given this is user generated data (as opposed to a static presentation) this is likely to happen fairly often. If organizing the process lines is not possible due to the tool, perhaps lower opacity on deselected process lines could help with the readability.
    – Benjamin S
    Commented Jul 5, 2023 at 14:02

3 Answers 3

3

I will answer using the 4 interaction design strategies outlined in the book: Simple and Usable by Giles Colborne. You may find any one of these techniques is useful or a combination of techniques is the most useful.

Remove

I would presume this option is off the table, but it is always useful to go back to your stakeholders to see if some of these items can be removed. Perhaps 20 is a programmatic maximum, but with some user research you find that 8 is the maximum an end user will actually use.

Organize

As some comments mentioned, There are opportunities to reorganize how the connections are displayed. Rather than having connections go underneath a process that is not involved, have it go around the process. Process lines could also be grouped by their connection to a specific process; making following a connection from start to end easier along with finding related flows based on where they end.

Hide

If this is an interactive tool for software or a website, you have an option to use interaction to hide some processes and/or connections until they are needed. On a click or hover of a single process, the application could highlight all connections that start and end with that specific process while hiding all others. Perhaps you could even select 1 process by default to show this emphasis of relevant connections while minimizing the visual emphasis of the other connections. You could hide them completey or simply deemphasize them (example below:)

enter image description here

Displace

This often refers using a different screen or view, but for your example I think the displacement would go to the user. Basically, provide interaction flexibility that allows a user to organize them as they see fit. Perhaps they organize exactly as you have in your example, or perhaps the move their processes around; maybe column 1 and column 2 of the processes can be a single column for a particular user. Allow them to put bends and corners in their connections. Give the user the ability to organize how the want; similar to whiteboarding tools like Miro.

Note: this solution should be talked over with your development/implementation staff. It could add a significant amount of work.

2
  • Thanks for sharing, hiding strategy aka highlighting the chosen connection is sth we have already done on DEV and it seems to be working fine. Regarding organizing approach - I like it I'm afraid that lib we are using is not so flexible to allow such customization, nevertheless its worth exploring further.
    – mario
    Commented Jun 28, 2023 at 12:51
  • @mario then I think you have a library issue. Most libraries I know (if not all) allow for this, it's quite basic to avoid issues like the one you're having now. The thing is this is the correct answer, but if there are technical constraints then there's no much to do other than looking for completely new ways to do it.
    – Devin
    Commented Jul 3, 2023 at 17:45
0

here as what I see is you have a lot of scenarios which depends on each stage, at every stage or decision the journey becomes completely different.

I would care more here to segregate these cases into groups.

In which or what kind of groups? Probability groups. Finding the highest occurring stages (Boxes) in all the different cases. And then moving towards the lowest occurring stages. This will give me an Idea of which cases can be the most impactful and least impactful.

Then showing the most occuring stages seperated (meaning without other connections) one by one and creating a group of them.

This helped me to showcase stakeholders simply the most important cases. Without using complicated visuals which will case information overload.

1
  • Thanks for sharinking, no doubts its an interesting idea which could be used in many apps, unfortunately my case is a nit different, its really hard to say what "process items" would be considered as the most important and what connections should be prioritized, its not a matter of users rather we can't predict what kind of workflows be created.
    – mario
    Commented Jun 28, 2023 at 12:54
0

This is a very interesting question. The correct answer is the one by Benjamin S, but you say you can't use it because of technical constraints, so you got me thinking about how to overcome this issue.

So, first things first: if it were me, I would change the library. This feature should be present in your library; it's extremely common. If your library doesn't have it, I'd wonder what other problems you will face in the future.

But let's assume this is not possible. My alternative for this would be a Sankey Diagram, which is very easy to use and relatively easy to understand. I think it covers all your needs, but this type of diagram can be a bit confusing if you have a lot of paths and colors.

Google UA (now about to die) uses it, and it's quite easy to see paths even with monochromatic paths. However, you seem to have a lot of possible paths, so I would use colored paths and maybe dim those paths and processes that are not active, pretty much like in your example image.

enter image description here

1
  • Thanks for contributing, I like this idea and the diagram you recommended I wish to use in ..another project, which is much more related to the flow of items, this diagram type is imho a great way to combine on one chart both aggregated data as we see on GA example and detailed data which is available after drilling down, for example when user is interested is seeing the particular visit.
    – mario
    Commented Jul 7, 2023 at 13:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.