Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

mockup

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:

mockup

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.

share|improve this question
    
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
add comment

2 Answers

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
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
add comment

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
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
    
@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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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