I have a list of tasks that can be dependent on each other, e.g. task #2 cannot be begun until task #1 has completed.

In schematics, it might look like this

Id  | Dependency
 #1 |  - 
 #2 | #1         // #2 cannot begin before #1 is completed
 #3 |  -
 #4 | #2, #3     // #4 cannot begin before both #2 and #3 are completed
 #5 | #1, #3     // #5 cannot begin before both #1 and #3 are completed

One task can depend on several other tasks, and many tasks can depend on the same task. There can be no cyclic dependencies.

I need to create a user interface where the user can add tasks to her list and configure the dependencies between tasks herself.

My first thought was to have a table like so:

enter image description here

But this is not very easy to look at for a not-so-technical user, and it does not visualize the relations between the tasks very well.

My next thought was to have a sort of hierarchical drag and drop list

enter image description here

but I can't figure out how to represent one task being dependent on several tasks (e.g. if Task 4 depends on both Task 2 and Task 3 but these two are independent of each other). Also, if all tasks are dependent on the previous task, this would result in a list that indents quite a long way in.

I also thought about visualizing it as a Gantt chart, but this is just as technical as the table solution.

Does anyone have any ideas on how to solve this task in a user friendly way?

  • Are these tasks performed by the same person? (I'm asking because generally one person can't perform multiple tasks concurrently)
    – Voxwoman
    Commented Mar 12, 2015 at 12:50
  • Welcome to UX SE Daniel - this is a very well thought out question and nicely asked - I'll give it some thought.
    – DaveAlger
    Commented Mar 12, 2015 at 12:55
  • @Voxwoman These tasks can be performed by different persons or teams of persons, e.g. a team of plumbers and a team of carpenters could be working at the same time.
    – Daniel
    Commented Mar 13, 2015 at 8:36

3 Answers 3


1. This is a well-trodden problem

  • Digital designers have been grappliing with this problem since scheduling, project management, and manufacturing planning apps were written in the 80's.

2. Graphical representation is non-trivial

  • When you have multiple, arbitrary dependencies, it becomes very difficult to show dependencies graphically. A simple example (> represents a dependency):

    1. A > B > C > ... > Z
    2. C, D > F and A, B > E
  • Do you automatically simplify the dependencies (#2 can be safely eliminated since #1 ensures #2 automatically)?
    Do you show all of them (in which case you will have multiple overlapping lines in your layout which can make it very confusing)

  • Bottom line: if you really want to do something graphical, be prepared to invest a lot of time and effort to get it done.

3. Text representation is easier to build, harder to get right

  • If possible, try to remove the numerical labeling of steps. This often isn't possible, but to illustrate, which of these is easier to understand:

    • Whisk eggs, Prepare dressing > Mix salad
    • 1, #23 > #6

  • Color coding dependencies can help if there aren't too many of them. You can also use color on hover- or click-, to show dependencies. enter image description here

  • Some apps (e.g. Excel, ILOG) have used arrows or pop-up toolbars to help users navigate to dependencies if there are a lot of rows in the table.

4. Make sure your app developer knows what he is doing

  • With arbitrary dependencies it's very easy to get circular references, and it's also very easy to have the dependencies get orphaned when activities are deleted from the workflow.

In your example, instead of displaying tasks 2 and 3 vertically, you can display them side by side, in more of a flow chart representation, and they both connect independently to task 4.

This may get cumbersome depending on how many tasks you're visualizing. There may need to be more cues, such as shape and color to help organize a large array of tasks.


I would probably reverse the order of the columns in your first table and maybe even call them Prerequisites -- things that are required before doing this task.

Something like this...

enter image description here

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.