Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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)

share|improve this question
1  
Reminds me of Windows network install dialogs. –  kinokijuf Jan 7 '12 at 21:31

4 Answers 4

up vote 13 down vote accepted

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.

share|improve this answer
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 '12 at 8:10
    
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. –  Brian Mortenson Oct 9 '12 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.

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

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)
share|improve this answer

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.

share|improve this answer
    
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 '12 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. –  Marjan Venema Jan 8 '12 at 10:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.