2

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 '15 at 17:20
  • 1
    This will run on mobiles and desktops. These steps can be dynamic. Just need to display name of the script. – user1796650 Jan 23 '15 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 '15 at 18:20
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?

mockup

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.

| improve this answer | |
  • 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 – user1796650 Jan 25 '15 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 '15 at 18:01

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.