2

I'm newbie when it comes to UX, there's a thing I don't understand and couldn't find answer to that. So I hear every now and then that modal on modal is bad. But I don't understand why and no one could explain it to me so far.

For example: We have web application where you can work on a document and you can invite people. Inviting people opens modal - it's self contained flow of permission management. You can invite, remove and change permissions of users. If you start changing permissions or removing people then you need to press "Save" button to confirm it all. If you try to leave modal without confirming then another small modal "You have unsaved changes, do you want to proceed?" is displayed. So I heard people saying this is "bad UX/bad solution", but why? This is exactly what Google implemented in their Google Docs. What would be "good UX" then?

5
  • 1
    Quick answer: save user changes automatically, but always give them undo option, so no change is destructive. Jun 4 '20 at 9:41
  • 1
    I don't think you are going to find a rule for this. If your design is right then there is no reason it can't work. I think the overall "concern" with modal on modal is ensuring you don't confuse or disorientate the user.
    – musefan
    Jun 4 '20 at 9:50
  • 1
    Is your question about why designers dislike modal in modals or asking for ideas for your specific design problem? There is a good post about modal on top of modals here.
    – Nash
    Jun 4 '20 at 12:01
  • Probably easier to look at when it is good to use modal on modal rather than all the potentially bad use cases: ux.stackexchange.com/questions/46261/modals-on-top-of-modals
    – Michael Lai
    Jun 7 '20 at 23:29
  • Also, there is always a risk of simply copying what the other big companies do that you should take into consideration: nngroup.com/articles/risks-imitating-designs
    – Michael Lai
    Jun 7 '20 at 23:30
1

I often find that people tend to agree practices done by big companies are correct without knowing the reasons behind. The truth is, we'll never know if someone in G has tested the modal on modal approach.

However, rather than trying to settle arguments through discussion, do a quick usability test with a prototype on a few coworkers. You can even test GDrive's sharing taskflow with them.

1

Modals can be useful if used sparingly but generally speaking I would avoid modals altogether because:

  1. They obscure the content beneath
  2. They can't fit a lot of information within them (they shouldn‘t overflow the size of the viewport)
  3. On small screens they are often confused with a new page and the back button breaks (because it's a modal, not a new screen)
  4. They‘re generally hard to operate and confusing

Having a modal on a modal exacerbates these problem.

I would start by taking the user to another page to setup permission for the document instead.

1

Designers generally dislike modal dialogs because the say "Stop what you are doing and deal with me now. When you are done you can return to what you were doing" (About Face 3).

In your case you can argue that the user won't need any other information from the page underneath when sharing. Also the confirmation dialog will only pop up in a minority of the cases. The prime use case seems to be doable without modal in modal.

But you should test with users to be safe.

1

In the first place, a modal in a modal is not bad by definition. If it performs well there is not a problem. But mostly it doesn't perform well. Modals in general have their problems and adding an extra modal makes it even worse. Problems occur when people want to see or modify the content behind it, don't get the gist of its contents or when they can't access it properly (for example because they only use a keyboard).

Often when a modal seems a solution, something went wrong in earlier design choices. In your case the second modal could have been avoided by not choosing for the first modal. Is that modal needed? Could it be an extra section on the page or a page on its own? And can the same be done for content that is now in the second modal?

Modals are invented to make choices that influence the content on the page behind it, in a way that you don't lose any sense of context but can't modify anything on the page before you resolve the modal first. Whether if a modal is the perfect solution for this is a debate on its own. In your case there is the question if the modal even solves such problem. If not, try to find a solution that is less obstructive, better accessible and doesn't create tons of other design problems.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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