GUI for a add-and-combine workflow?

Question

I have the following scenario: the user picks a set of entities from a palette (each palette entry can belong to a different class, and each class can belong to a different subclass).

After extracting the palette entries he is interested in (for example, by drag&dropping them from a tab widget divided by classes to a "receiver" list), he will press a button or something that will activate a computational machinery working on the provided elements in the list. This machinery will produce a list of results, and each result must be selectable and displayed in more detail. The current naive idea I have is the following:

I am not particularly excited about it. Actually, I think it's horrible. The workflow starts from the bottom left, moves in the upper left, then goes to the bottom right, and the specific entry is displayed in the top right. Rearranging them may be an option, but then I may encounter both problems with real-estate, and with the fact that the focus of the operation is the final result.

Another option would be a wizard, but a wizard generally is aimed at performing a step-by-step operation operation once. In this case, the user is free to delete the generated output and experiment with a different selection out of the palette, then check the new results.

How would you design such UI to be more appropriate for the workflow I presented ?

Answer 1

You're spot on about the problems in your layout. The direction of the workflow is very unusual and reverse to the standard direction (usually it's top-down, left to right).

It would help to have a clear visual distinction between the pre-computation and post-computation stages - an asymmetric layout can help create this distinction. This is one direction:

I made the top panels wide to accommodate for the complex navigation hierarchy you described (classes and subclasses) - but if the navigation is as limited as in your example, then a rotated version could work just as well:

Answer 2

I would suggest looking at a more wizard-ish approach. As long as you are showing the user their output at every step, a step by step approach with start over and go back options feels natural to me. Look at http://doppleme.com/create/wardrobe.asp, an avatar builder. It's far from perfect, but the workflow is sound.

Answer 3

Other than the wrong flow directions (from bottom left to top left to bottom right to top right) you also see the have a needlessly complex flow.

First of all, you should start by using more intuitive names, e.g. library of templates, selected templates, items, selected items, properties.

Next you should consider what the user needs to do.

If I understood your rather cryptic description, the user:

1. Selects templates from the library (e.g. graphical models)
2. This results in actual items (instances) being generated
3. The user selects the items for which he/she wants to see/edit the details

---

For this flow you could use this division to views:

1. A library view
2. A (hierarchical) workspace view
3. A details views

Show the possible templates in the library, enable filtering/searching & sorting.

Let the user drag templates over the correct location in the workspace view.

Let the user select (or better yet multi-select) items in the workspace view using click, control click, shift click (not by dragging).

Show details of selected item(s) in the details view.

---

Two of the possible layouts could be:
(other options may be valid too)

Top: library
Left: workspace
Right: details

Left: library
Top-Right: workspace
Bottom-Right: details

---

If the "details" is actual a 2D projection of the 3D objects (a camera view) then you should consider how the users choose what they want to see (object or scene), from which point of view and etc.

Perhaps a more correct layout would be...

Top-Left: workspace
Bottom-Left: workspace details
Top-Right: library
Bottom-Right: library details
Center: large camera view