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:

enter image description here

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 ?

  • 1
    Please explain what these entities, classes, subclasses, widgets, entries, and results are. We can't help you design a good UI without knowing what we're designing.
    – Rahul
    Feb 14, 2012 at 16:55
  • @Rahul : they are 3D objects you combine together. Think lego. You assemble them together in possible configurations, after having the individual pieces you want to use extracted from the palette of pieces you have. Feb 14, 2012 at 17:02
  • 1
    You may get more/better answers if you break this down into several smaller questions about parts of the UI, rather than how the UI should be designed overall. Hope this helps.
    – Adam Grant
    Feb 16, 2012 at 15:30
  • @StefanoBorini please clarify actual question, not just add a comment. Feb 19, 2012 at 17:38

4 Answers 4


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:

enter image description here

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:

enter image description here


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.

  • In my case, progressive showing of the output is not feasible. Computing the output takes a relevant amount of time. Feb 17, 2012 at 18:46

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


Similar to Vitaly's Second option, I think you could look at Apple's Automator as an example.

enter image description here

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.