I'm designing a Material Design app where users can edit items via a lightbox-style modal dialog. This is a hard constraint, so avoiding the lightbox is not an option.
Within the dialog, there is an optional sub-workflow which needs a separate panel.
To illustrate (click to enlarge):
The Material Design guidelines are silent on UX behavior for stacked modals. They provide guidelines for scrolling content, but I'm dealing with a sub-workflow so appending content to the dialog isn't really a good option.
Some alternatives I'm considering:
Replace the content of the dialog with the sub-workflow content (cross-fade). This eliminates the awkward nested modal, but I'm not sure whether crossfades are compliant with Material Design physics, or whether they may disorient users.
Push the dialog left in a wizard-style animation where the dialog moves completely or partially off-canvas and the sub-workflow dialog slides in. This avoids the vertically stacked modals, but is more associated with wizard-style UX behavior than with sub-workflows.
Flip the dialog to reveal the subworkflow on the "back of the card". Something like this. I'm pretty sure this is not material design compliant as MD physics has a strong preference for XYZ translate motion rather than rotations.
Keep the stacked modal. This seems to provide the best affordance for the sub-workflow, but obviously nested modals are pretty crappy visually and can be disorienting.
Question
- Is there Material Design guidance on how to work with multiple modals?
- Alternatively, is there a general UX pattern that I can use which avoids the stacked modal but provides decent workflow
->subworkflow->back to workflow affordance?
No comments:
Post a Comment