1

What I mean is that say you select something on a webpage. It serves you a modal pop-up form to complete. On this form is a date-picker which would serve another full screen (on mobile) modal pop up. It feels a bit like pop-up inception. I'm wondering though if it is a major usability concern or not?

My hands are tied because the pop-up form is a standard pattern in this project but I'm trying to implement a custom date picker that will work on all scenarios.

  • 1
    Although layers of overlays is discouraged, upto a 2nd layer is quite alright. It may be a bit weird for mobile screens. But datepickers in modals is common for desktop web pages. – Ren Jul 24 at 9:34
1

Yes, this isn't good practise.

It's depends of type system (for example IOS or Android have other design & implementation for time features)

If PWA: Important to use generic data selector, which can be implemented everywhere in the smallest amount of time.

The possibility I see is use UI collapse instead pop-up.enter image description here

1

Calum, I see two challenges with nested modals:

  1. Users may lose track of where they are, and
  2. Backtracking through multiple modals is tedious.

I've seen quite a few designs that go two, maybe three, modal dialogs deep, and they worked reasonably well, because those modals were highly focused.

For example, here's a screenshot of macOS's Siri preferences panel:

enter image description here

Clicking Siri Suggestions & Privacy… opens this modal:

enter image description here

Clicking About Siri & Privacy… inside the modal opens another modal that appears above the previous one:

enter image description here

So, to return to the actual preferences panel, you'll have to dismiss two modals.

Compare that tothe DNS configuration in an older version of MS Windows:

enter image description here

All of the five windows you see in the screenshot are modal dialogs. In this case, users will likely have no clue where they are in the chain of dialogs, and getting back now requires manually dismissing all five dialog boxes.

Nested modals are never ideal, but in some cases they may be difficult to avoid. If you do need them, make sure that users understand what path they follow, and also take into account how often they need to follow that path: if the associated task is performed often, nested modals might be forbiddingly tedious; if it's a rare task, users might not even consciously notice that they are navigating nested modals.

All that said, have you tested your design? If not, how about creating a prototype — a simple paper prototype might already do the trick — and doing some simple "hallway testing" in your company to get some baseline feedback?

Good luck! :)

1

I am writing this opinion considering you are only talking about mobile.

For mobile, if your modal popup covers complete screen then it would be a new screen for user. So the interaction would look like hierarchical drill down. In this case calendar on popup (for user its new sceen) should be ok.

In case of web, if your date picker covers full screen, then showing it over existing non full screen popup would make user loose track if where he is. However, in this case you could think of just popping up small date picker on popup and try to show other calendar related selection on first popup once you show date picker. Honestly, I myself not convinced about what I just wrote for web in this paragraph :)

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.