I have a process with multiple steps(concept,design,implementation,maintenance). This process needs to be automated. User will select different scripts from file system to move from one step to other. If the script passes then process will automatically transition to next step. I am creating the design where user should be able to select these scripts. Please see the mockup below. This one doesn't look good at all to me. Any thoughts on how I can depict it. Thanks enter image description here

I want to add that the intention here is not to show the process but prompt the user to select scripts between steps. Something like below will also do. enter image description here

  • What sort of devices will this run on? Mobiles, tablets, desktops? Are there always four steps? Do you need to display any information about a script other than its name?
    – Matt Obee
    Jan 23, 2015 at 17:20
  • 1
    This will run on mobiles and desktops. These steps can be dynamic. Just need to display name of the script. Jan 23, 2015 at 17:23
  • Check out JSPlumb. You can a modal dialog to select the scripts when the user clicks on the connection. Or when the user clicks on the connection you have a drop down of available options via a select box (check out Select2 for some feature rich select boxes).
    – Andrew
    Jan 23, 2015 at 18:20

1 Answer 1


Your first diagram is good for visualizing the process and how the steps related. However you may run out of space if there are many steps involved. Your second diagram solves the space issue with the possibility of many steps, but you've lost the connection of how one step leads to the next.

How about combining the two like this?


download bmml source – Wireframes created with Balsamiq Mockups

The edit/select script can open with a browser select file modal or the iOS or android's file selection interface. I made the script names as links just in case user wants to read the script code for confirmation. This is optional.

Also keep in mind this assumes a linear process. If it's not linear, something like the interface of JSPlumb as suggested by Andrew will be more useful.

  • How about something like bootsnipp.com/snippets/featured/timeline-responsive. With the steps on the right side and scripts right side in the middle as your depicted. Please let me know your thoughts Jan 25, 2015 at 16:42
  • @user1796650 are you referring to this for visual styling? A typical timeline is missing several components found in your workflow. 1. It assumes all elements are equal and alternative them left and right to fit. To use this, you need to style your steps and scripts very distinctively and stick to 1 position for items as you've indicated would help. 2. Timeline only indicate passage of time and does not suggest step by step nature in your flow. I would still recommend arrows of some sort for that.
    – nightning
    Jan 26, 2015 at 18:01

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.