I'm building an application to support a small scale manufacturing process. The process has a number of discrete steps. "Widgets" are consumed in each step and new types of widgets are produced to feed into the next step. Each widget has a unique identifier but is best viewed in a graphical form.

I'm trying to build a UI that lets the user see how many widgets are waiting at a particular step to be run. They can navigate to that step, choose which widgets they want to run, and create a procedure object. From the procedure page, they can see what the input widgets are, what the outputs are, specify run parameters, generate worklists, etc. Whatever is needed to run that procedure.

I only expect a handful of widgets to be waiting for a particular step. And I only expect 1 or 2 or so of active procedures. (Ones that haven't yet been complete.) However, I'll need a way for users to go back and see old completed procedures. Perhaps that should be in a different UI from this active list.

My first idea was a 3 column layout like this. enter image description here On the left you see the list of process steps with an indicate of the unassigned widgets. Selecting a step will show you the list of existing procedures in the 2nd column and will have an option to select "Unassigned Widgets". When you click a procedure you see this view: enter image description here There is a checkbox you could toggle to see all completed procedures for historical reference. Also note that there would need to be a pagination bar for the procedures since the number will continue to grow.

My next idea was to switch to a 2 column layout with a select for the process step. It's not as easy to see the snapshot of the manufacturing pipeline, but I worry about taking up too much screen real estate. enter image description here enter image description here

The mockups can be found here.

So my questions:

  • Which layout makes more sense?
  • Is there a better way to toggle between current and completed procedures?
  • Am I trying to do too much in one interface? Is there an obvious way to simplify?
  • Would you need pagination for procedures? Why not vertical scroll? Commented Jan 13, 2015 at 17:57
  • Could you give an example of a procedure, a widget and a process, Dave? I have a feeling that this whole flow could be addressed from a completely different angle, like building an automatized strings of procedures with a wizard, saving them and then applying them to materials.
    – Zoe K
    Commented Aug 16, 2015 at 10:12

2 Answers 2


I like reducing the number of columns to give you extra space on the right for content. You could have the user start on a dashboard page that shows the complete end-to-end pipeline, with the number of active / complete procedures, number of widgets needing action, etc...

Another option for showing completed procedures would be to list them beneath and have a check mark next to them. Maybe use a light gray color to show they are completed. You could still keep the checkbox and allow users to hide or show completed procedures.

You might also explore some options similar to the Turbo Tax paradigm - with an "explore on my own" and "guide me" view.


I cannot comment, unfortunately, but I think that your situation would be helped tremendously with further analysis of typical use cases. More information is needed on the number of people involved, number of workstations, whether widgets are always processed sequentially, how many inputs and outputs there are for a particular procedure, etc. Try to emphasize whatever part of the operation is most complex for the end user.

For example, if discrete step A is done by a different person at a different workstation than step B, and so on, then it makes sense to tuck away the step list as you have done in the last two designs.

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.