We have a function in our application that allows us to run a task. Depending on if the task succeeds or fails, it does a different task afterwards. This task chain/tree continues until no more tasks are defined for the success or fail result.

We have a request to be able to show all possible paths of this tree-like structure so a user can get a visual overview of the chain without viewing each task's details individually and creating the visualization in their head themselves.

My question is, how do I best visualize this tree while making it clear what the success and fail states are for each task?

In the image below the example being shown is the following: If 1 passes it goes to 3. If 1 fails, it goes to 2. If 2 passes, it goes to 100. If 2 fails, it goes to 5.

Here are my current ideas as to how to do this: Current mockups

For (1), the success paths would go downwards while the failures would go towards the right. The problem is that as there are more failures, the subsequent tasks become smaller as they have to fit in the original row's size.

For (2), this would show each pass/fail task tabbed over from the parent task to signify it's position in the tree. However the problem is that as the path of successes grows, the initial task's failure gets pushed further down the page.

For (3), this is a variation of (2) but just showing more like a flowchart. This has similar space issues as (2), but just in the opposite orientation and also it seems less intuitive with only 2 nodes per level.

  • 1
    Option 3 is the general way to illustrate a tree, and it excellent if you only need to illustrate nodes as dots or numbers. Do you need to illustrate more information than just the numbers? Is the binary tree evenly distributed or does it have branches that branch out irregularly? How big can they be? What kind of screen are you showing this on? Commented Mar 19, 2015 at 18:12
  • My initial task is to only show the numbers and the task name assigned to it, however I could see how other related information could be useful to show. It is not evenly distributed, the amount of successes can heavily outweigh the amount of failures. There is no limit to the depth of each step. This is a web application, so typical monitor resolutions. Commented Mar 19, 2015 at 18:24
  • This is a complex visualization so it's not really possible (for me, at least) to design a solution without more details. Is there a bounding space for the tasks or are they infinite? Is there any predictability to whether or not there is another task? What is the necessity of showing all the possibilities? It would really help to know what the tasks are because again this is a non-trivial visualization.
    – tohster
    Commented Mar 20, 2015 at 5:13
  • Realistically they could be infinite, however I would like to support showing 15 - 20 levels below the root task before the user would have to do something to show others. I would say that the most basic usage of this is to run multiple tasks in sequence without caring about the failure cases. But then again, some users may fully use the power of the failure cases. Commented Mar 20, 2015 at 12:48
  • I described these as "tasks" to simplify my example, but that I'm talking about is something we call rule groups. Within each group, users can define multiple rules. These rules can do anything from checking the output of a mathematical function, running a SQL query, or injecting a string of text into a file. With this request, clients want to visualize the linking of the rule groups themselves, and not the individual rules within them. Commented Mar 20, 2015 at 12:51

1 Answer 1


Let me offer an alternative way to think about the problem. The first thing I can think of to simplify the problem is to only show what's required. So just think about the different possible starting points for the task, and these will be the 'root' nodes.

The second thing is that even though the underlying structure is a binary tree, for the user each step is a linear process where they continue to perform tasks until they reach an end point. Therefore, I think the important relationship to show is how long the steps can be and which combination of pass/fail events will lead you to that end point.

I think an important element that is missing in this visualization is also the type of task, so you can also incorporate this information as another visual element in the display.

To give you an example of what I mean:

enter image description here

This visualization sorts the tasks in order of the number of steps it takes to complete, while showing each task number along with the pass/fail status of each task. Compared to the tree/graph representation, it provides a different way to visualize the information that still shows you the different combinations possible, but doesn't try to convey the complex of it all (which is difficult to interpret anyway).

Based on your feedback, I have made some design changes and suggestions:

  1. I think if you are just going to show the success case, then you can consider removing the red/green distinction since it will be rather redundant (unless it is important for people to know explicitly that it is for the success paths only)
  2. If you are using the idea of rule groups, which can be anything and not just task, then I think it is important to give each number block a colour that is representative of the type of rule group it is. In fact, you can event create sub groupings within each group if you want to be really fancy (see first block of first line).
  3. You can try to order the display by either a unique identifier, the number of rule groups or the type of rule groups or a combination.
  4. You can use interactions to show alternate or fail paths (see last block in last line).

enter image description here

Happy to chat or take the conversation offline if you are interested in exploring this idea further.

  • I think this would be more useful if they did want to see the total number of steps and the type like you said. However if our case there really isn't a type of task, since it can almost be anything that is supported in our application, which is far more things than I can even list. I think to show this simply and have a usable initial version, we plan on only showing the initial success path, ignoring the failures for now. Commented Mar 23, 2015 at 13:35
  • I am just wondering what the exact purpose for wanting to see all the paths and branches in a graph diagram is... I don't know if people can process that type of information easily, which is why I thought about a design that will break the information up into the chunks that are much easier to digest. I have provided another design that hopefully addresses some of the design issues that you raised. Let me know what you think.
    – Michael Lai
    Commented Mar 23, 2015 at 22:12

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.