I'm trying to visualize some steps in my application. Here is the scenario:

  1. User A creates task and assigns it to user B
  2. User B starts that task and adds some attachments to that task
  3. User A accepts that attachments or rejects them
  4. User B is doing some actions and then he is changing status of that task.
  5. User A accepts those actions or rejects them

If everything is going right, the flow is simple:


download bmml source – Wireframes created with Balsamiq Mockups

but when in Step 3 User A rejects attachments process is returning to Step 2.

like this:


download bmml source

so basically I can have multiple steps and from every step I can go to next one to step back to previous (from step 5 to step 2 for example)

My question is: What would be the clearest way of visually presenting the flow of all steps. and what javascript library could be used to do this, that is simple and fast (I would like to avoid creating everything from scratch and reinventing the wheel)

Second part of question is bit off-topic (I'm aware of that), but maybe someone could advise potential implementation tool, if not please don't downvote.

  • When you say you want to find a way of "visually presenting flow of all steps", do you mean within a diagram or within the interface itself? The second part of your question about JavaScript is unfortunately off-topic since it's about implementation. – Matt Obee Jul 22 '13 at 13:07
  • @MattObee - It's a bit off-topic, but maybe someone can advise something :) I want to put that visualization inside web application (web page). When user go to specific page (task details) I want him to be able to see all steps. – Misiu Jul 22 '13 at 13:22
  • Do you want to show a historical audit trail for each task (show all steps that a particular task has been through) or just show the generic workflow? – Matt Obee Jul 22 '13 at 13:30
  • 1
    First option - I would like to show history of actions that users did. This will be helpful to check quality of user actions. If he don't add attachments he will get 2 steps back, if he don't do it again another 2 steps back. Every action is stored in log that is also displayed on task page, but I thing that looking on graph will be easier than reading many log entries. – Misiu Jul 22 '13 at 13:33
  • See answer to similar question here: ux.stackexchange.com/questions/97122/… – Michael Lai Mar 31 '20 at 22:56

Rather than trying to display this audit trail in a single, very large and complicated diagram, consider presenting it as a log with a simple diagram for each change.

In my wireframe below, I am showing the history of a single task. For each record, I am showing a brief description of who did what and then illustrating the flow between steps with a basic diagram.


download bmml source – Wireframes created with Balsamiq Mockups

  • That looks really nice! I didn't think about showing history this way. I must think this over, but Your design is different, simpler approach. Thanks! – Misiu Jul 22 '13 at 14:01
  • Yes, it just makes it easy to see at a glance the direction of flow between steps and what caused each change. – Matt Obee Jul 22 '13 at 14:14
  • This is cool, however they want to be able to visualize which level a rejection goes to. Pesky users, j/k. – Rich Bianco Jun 8 '17 at 17:51

Perhaps use a loop to symbolise that steps 2 and 3 could be iterative?


download bmml source – Wireframes created with Balsamiq Mockups

  • Thats an option, but this way I won't be able to show loops (how many times task was rejected). Another option would be to show all steps in single line, but this way all will be hard to read. – Misiu Jul 22 '13 at 13:24
  • 1
    You could annotate the decision with the number of iterations? – Sheff Jul 22 '13 at 13:33
  • 1
    @Rich - thanks for this design, but it is nice if I would like to show generic workflow, not history of all actions. – Misiu Jul 22 '13 at 13:42
  • 1
    I like it. This is a tough UI challenge, especially the graphic part if each level can be rejected, and they reject to any level prior (most reject to the beginning). Not an easy UI hence the value of this question. – Rich Bianco Jun 8 '17 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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