Boîtes de dialogue modales empilées (avec Material Design)
Je conçois une application Material Design où les utilisateurs peuvent modifier des éléments via une boîte de dialogue modale de style lightbox. Ceci est une contrainte difficile , donc éviter la lightbox n'est pas une option.
Dans la boîte de dialogue, il existe un sous-workflow optionnel qui nécessite un panneau séparé.
Pour illustrer (cliquez pour agrandir):
Les Material Design guidelines sont muets sur le comportement UX pour les modaux empilés. Ils fournissent des directives pour défilement du conten , mais je suis confronté à un sous-flux de travail, donc l'ajout de contenu à la boîte de dialogue n'est pas vraiment une bonne option.
Quelques alternatives que j'envisage:
Remplacez le contenu de la boîte de dialogue par le contenu du sous-workflow (fondu enchaîné). Cela élimine le modal emboîté maladroit, mais je ne sais pas si les fondus enchaînés sont conformes à la physique Material Design, ou s'ils peuvent désorienter les utilisateurs.
Poussez la boîte de dialogue vers la gauche dans une animation de type assistant où la boîte de dialogue se déplace complètement ou partiellement hors du canevas et la boîte de dialogue de sous-flux de travail se glisse dedans. Cela évite la modaux empilés verticalement, mais est plus associé au comportement UX de type assistant qu'à des sous-workflows.
Retournez la boîte de dialogue pour révéler le sous-workflow au "dos de la carte". Quelque chose comme ceci . Je suis sûr que ce n'est pas conforme à la conception matérielle car la physique MD a une forte préférence pour le mouvement de translation XYZ plutôt que pour les rotations.
Gardez le modal empilé . Cela semble fournir la meilleure offre pour le sous-flux de travail, mais les modals imbriqués sont évidemment assez merdiques visuellement et peuvent être désorientants.
Question
- Existe-t-il des conseils de conception de matériaux sur la façon de travailler avec plusieurs modaux?
- Sinon, existe-t-il un modèle UX général que je peux utiliser qui évite le modal empilé mais fournit un flux de travail décent
->sous-workflow->retour à l'abordabilité du workflow?
Je ferais un mélange de 1 et 4.
J'aurais votre deuxième modal de la même taille que la boîte ajouter une photo facultative et caché derrière.
Une fois que vous avez cliqué sur la case ajouter une photo facultative, le 2e modal changerait son index z, le placerait devant, et en même temps se fondrait et s'animerait à la taille de l'ensemble du modal. Tout jQuery très simple.
De cette façon, vous ne perdez pas le modal d'origine et lorsque les utilisateurs cliquent sur Annuler ou Ajouter une photo, vous pouvez simplement le masquer et recommencer essentiellement.
Cela pourrait ressembler à ceci:
(ce serait évidemment fluide avec jQuery ou tout ce que vous utilisez, mais cela donne une idée)
Je pense que c'est là qu'un assistant ou un flux de travail guidé résoudra le problème, même si je ne suis généralement pas un fan de la création d'un flux de travail dans une fenêtre modale. Cependant, il s'agissait/est un modèle standard pour l'installation de logiciels de bureau depuis longtemps, et vous pouvez intégrer un flux de travail facultatif/conditionnel dans les étapes en acceptant des entrées supplémentaires de l'utilisateur. Ceci est utile pour les workflows qui impliquent au moins trois étapes, donc vous pourriez penser que c'est une exagération si ce n'est pas quelque chose qui se produit à beaucoup d'endroits dans votre application.
Vous constaterez qu'en général, il est préférable de repenser le processus si vous souhaitez garder les modèles de conception cohérents. Il a également l'avantage supplémentaire de garder le flux de travail et le processus simples, donc un peu plus d'efforts à l'avance vous évitera beaucoup de maux de tête avec la conception plus tard.