Good alternatives for replacing multiple nested modal dialogs?

Question

Having a mature and good-selling Windows desktop application, we are focusing on improving the user experience for the next release.

One thing that I try is to get rid of multiple nested modal dialog like e.g.:

The reason for having those multiple levels of dialogs is to show the user as few options as possible to make the application as easy as possible to use.

As a downside, for power users this is usually way too much "clicking" until they are able to achieve a result.

So my question is:

Is there a possible design alternative to those nested modal dialogs so that:

• Novice users still have an easy-to-use UI?
• Advanced users can perform tasks without clicking through serveral nested dialogs?

(The application is a .NET Windows Forms application developed with Visual Studio .NET 2010 and DevExpress, in case this matters)

Answer 1

One possible solution is to progressively show more details as users select items and sub-items. The benefit is that the initial ui is still clean, while getting rid of extra panels and buttons.

You can still keep your initial page with the "configure" button, even though i would try to eliminate it, if possible.

Initial View

User Selects an Item

User Selects a Sub-Item

I have successfully used the above strategy on a heavily utilized windows application.

Answer 2

In this case, showing the fewest options possible confuses the user. Essentially, you've created a Russian nesting doll because the user doesn't know how many more layers of "edit" will be there.

As I understand from your wireframes, Edit button on Level 1 does nothing more than allowing to rename items on that level and see items on Level 2 related to them. However, on Level 2, Edit button allows to rename items on that level and check some options. Thus, you have 1 button that calls on different interactions.

If you just want to reduce the number of levels of modal dialogs and you really have only 1 option checkbox for subitems, then a layout similar to the one below might work.

However, I'm not too hot about it because it feels cluttered so I made another sketch.

This dialog creates a process slightly different from what you've shown since it allows to change the number of Items & Subitems. In addition, it allows for multiple options for subitems as that step will take place in another modal dialog. Obviously, if the Add/Remove buttons aren't necessary they can be easily omitted.

I realize you're trying to reduce the number of dialogs but the only way to have only 1 level is to cram all options into 1 dialog and cluttering the view.

Answer 3

Windows app? Do what Bill G. did and take a look at what Apple does. ;)

Joking aside, don't be afraid to have an extra modal (or layer) if it's infrequently used. It's difficult to make assumptions with the example you provided, but you might benefit from a two-pane layout like this interface from the OS X System Preferences.

With the screen on the left, you can edit 1st and 2nd level details. Clicking the "Change Password" button gives a layer which lets you edit the 3rd level.

Be careful to not mis-diagnose "too much clicking" for "too much context switching". Your example is probably more frustrating for your users because of the latter.

Answer 4

I can't relate to this specific example, since I don't have enough information of what's the user's goal in this flow. However - some tips:

1. If the user usualy would try to SELECT (OK button) and not EDIT (Edit button) - than keep it as simple as possible for selecting. You'd rather have a complex editing than complicating the selection process. Again - only if I'm guessing the flow correctly.
2. Use inline editing for renaming (similar to renaming a doc title on a Google Docs)