We're in the process of developing an application that makes use of modals to provide the user with extra functionality without having to go to a separate page. I have two questions related to this:

1) How complex is too complex? At what point do you decide that the modal really should be a separate page after all?

2) Should modals be new functionality or extensions of the current page contents? (like editing a record on the page verus a whole new action)


I feel strongly that modals make best sense when there is a need for context. In other words, use modal windows when the user needs to see the rest of the application to understand the content and options of the modal window in reference to the base screen. So, to answer your second question, modal windows should include extensions and supplementary info, not new functionality or content entirely.

As for complexity, I'd say a good rule of thumb is to think about actual pixel space available. Will the content of the modal window fit comfortable without completely obscuring the background window? Then it is not too complex. But if the modal takes over the entire window, and/or requires sub-navigation or scrolling, then it is indeed too complicated.

  • So, based on your comments, can I assume that even something as simple as a two-tab layout of "basic" and "advanced" would be a bad idea? – enygma Oct 26 '11 at 18:39
  • enygma: as is so often the case, the answer is it depends :) But in general, I would avoid an advanced tab in a modal, definitely. In the case that the advanced options are only to be used rarely, I would just include a link to the advanced options that does indeed open in a new tab or window. – Nadine Schaeffer Oct 26 '11 at 19:31

Personally, I think of modals as a way to slap the viewer in the face with an important action or information.

Dialogs, photo/video viewers, notifications, help tips, contact forms, etc. all are common use cases for modals and they all are purposed for a single task. Usually solving something that doesn't make sense to require a page load, or something important enough that needs to be noticed before a page load happens.

When the user clicks a sign-in link, for example, all they care about at that point getting to the place where they can sign-in or register for your site/service. They do not care at that moment about any other "important" elements on the page. A center modal login box that grays out the rest of the screen puts the form directly in front of the user, without the need for a page refresh or having a login form on every page. But, you need to make it easy and obvious for the user to "escape" or exit the modal logically.

tl;dr - Modals are understood/designed to be simple, don't add complexity to them.

Great article here from Smashing Magazine on modals - lays out use cases and examples as well as all the different types of modals and what works for what.

Also, although it's a bit older, this thread touches on similar issues you discussed in your question.

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.