I'm working on the mobile web adaptation of a desktop design. The desktop version uses a modal box, on that modal box there are tool tips that can be hovered on or clicked for more info.

When adopting this design to mobile web, I feel it's not a good practice and this will create a "modal within a modal" situation. what's a better alternative design pattern i could use for this

  • 2
    I don't want to sound like an asshole, but if you need to explain your interface to your users, your interface is bad by design already. – marvinpoo May 12 '20 at 7:20
  • Use a indicator for more information such as a (i) or a triangle or whatever fits your design system. Then make it show the information under the - to be explained - object. – marvinpoo May 12 '20 at 7:22
  • 1
    @marvinpoo It doesn't have to be explanations of the interface, it can be more information that is maybe only relevant for some, so you don't want to show it in the first place. – greenforest May 13 '20 at 8:45
  • 1
    Can a progressive disclosure element help, such as truncating or an accordion? – greenforest May 13 '20 at 8:47

The "modal within a modal" problem arises when you need to return to the previous state (the whole point of a modal). So you should ask yourself two questions about the workflow:

  1. Can the information be included in the first modal?
  2. Can the user navigate to the information (new activity, close modal) from the modal view?

It's basically the same problem as tab within a tab and requires structuring the content.

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.