Configuration form with multiple steps

Question

I am working on converting a winforms application to WPF. So, we are also trying to make sure this is good from a UX point of view in the process.

I have a configuration form that I am not sure if I should set up as two forms or one.

Here is the general layout right now:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Basically, you select an item and configure it. The groupbox is currently always visible.

I can see two or three possible options and am not sure which would be better. One thing to note is that most users will only be configuring one item only.

1. Split this into two distinct forms. The first being the selection of the item, and the second being the configuration of the item.
2. Keep this in one form and just make the groupbox/form collapse/expand as an item is selected
3. Keep this in one form and when the user selects an item, expand the listbox so that it has the configuration underneath it (accordian style)

^{download bmml source}

I am leaning toward option 2 if only because most users will not be configuring more than one item. Feel free to ask any questions on details I might have missed.

Answer 1

Have you considered presenting configuration in a modal popup? There are several advantages:

1. When you invoke the configuration, all the controls will always be in-view, whereas if you were using collapse/expand/accordions, they may be cropped depending on what the scroll bar position is.

2. Since most users will only edit one item, the system would only need to load the Configuration controls for the product the user would be editing, rather than pre-loading all controls for all items.

3. If you have keyboard-centric users, Expand/collapse/accordions are harder to implement accesskeys for.

Jung,

Answer 2

I would go with a standard master detail pattern, where you have a list of items (e.g. at the left) followed by the configuration of the currently selected item (e.g. at the right).

WPF example:

P.S. This isn't relevant to UX, but WPF supports this nicely using binding and data templates whether or not the structure of the different items is the same or not.

Answer 3

We ended up going with option 1 and progressively displaying the information