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

enter image description here

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)

  • 1
    Reminds me of Windows network install dialogs.
    – kinokijuf
    Jan 7, 2012 at 21:31

5 Answers 5


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

Initial View

User Selects an Item

enter image description here

User Selects a Sub-Item

enter image description here

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

  • 1
    Thank you lot, Emil! This is something I'll definitely try out. The key seems to be to not pre-select any item, to have a form with few controls. Probably the colored background (or some other kind of grouping is also something rather important to group things visually).
    – Uwe Keim
    Jan 8, 2012 at 8:10
  • 1
    Depending on the complexity of the options, you could also use a tree in the list on the left hand side, and use the tree to keep advanced options out of the way but accessible. Eclipse uses this approach. A quick Google image search for 'eclipse ide preferences' turns up plenty of examples. Oct 9, 2012 at 19:14

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.

  • 1
    Thanks a lot, Matthew! (actually I'm writing this from my MacBook Air ;-).
    – Uwe Keim
    Jan 8, 2012 at 0:16
  • 2
    ha, perfect, me too! :-) Jan 8, 2012 at 0:24
  • 2
    I am reading this from my macbook air
    – Timmerz
    Sep 18, 2012 at 14:46

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.

enter image description here

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

enter image description here

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.

  • Thank you! The metaphor of the Russian Doll describes it pretty well! I do have a feeling that there must be a more innovative way than just merging everything inside fewer dialogs. Your suggestions gives me a very good start to continue trying. Thanks a lot!
    – Uwe Keim
    Jan 7, 2012 at 22:34
  • 1
    +1 for the second example. It could be "improved" by putting an edit box under the list, fill it with the value from the selected item, and change "Edit" to "Replace". That way you have no need for dialogs at all and the way to use it seems pretty clear to me :) The option checkbox could be included like this as well. Jan 8, 2012 at 10:13

Inside the first dialog window (level 1), replace the area where the "Edit" button is with an info box/pane.

When you select an item from the list on the left, the item's data (including its sub-items) is displayed inside said info pane.

Now, the ability to edit a sub-item's name is afforded by allowing in-place/inline editing — double-clicking the name converts that area into a text field; removing focus from the field saves the name. This leaves you with 1 dialog that accomplished the combined functions of dialogs 1 and 2.

At this point you can edit sub-items with an additional dialog, which isn't so bad, or you can do something more clever like reveal a... I don't know if there's an official name for it, but it's like a cross between a dialog box and a tooltip: it floats and usually has an arrow extending from it pointing at the field you're trying to edit. An inline dialog, I suppose.


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)

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.