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.
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:
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.
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?