Vous y êtes probablement déjà allé auparavant. Comment choisir entre afficher un modal aux utilisateurs et quand les diriger vers une nouvelle page distincte ? Et est-ce vraiment important ? En fait, c’est le cas. La décision influence le flux des utilisateurs, leur contexte, leur capacité à rechercher des détails et, avec elle, la fréquence des erreurs et l’achèvement des tâches. Les deux options peuvent être perturbatrices et frustrantes – au mauvais moment et au mauvais endroit. Nous ferions donc mieux de bien faire les choses. Eh bien, voyons comment procéder. Modaux vs boîtes de dialogue vs superpositions vs lightboxes Bien que nous parlions souvent d’un seul composant modal de l’interface utilisateur, nous ignorons souvent les nuances fines et complexes entre tous les différents types de modaux. En fait, tous les modes ne sont pas identiques. Les modaux, les boîtes de dialogue, les superpositions et les lightboxes — tous semblent similaires, mais ils sont en réalité assez différents :
DialogUn terme générique pour « conversation » (utilisateur ↔ système). SuperpositionUn petit panneau de contenu affiché en haut d'une page. ModalUser doit interagir avec la superposition + l'arrière-plan désactivés. NonmodalUser doit interagir avec la superposition + l'arrière-plan activé. LightboxArrière-plan atténué pour attirer l'attention sur le modal.
Comme le souligne Anna Kaley, la plupart des superpositions apparaissent au mauvais moment, interrompent les utilisateurs lors de tâches critiques, utilisent un langage médiocre et interrompent le flux des utilisateurs. Ils sont de nature disruptive et présentent généralement un niveau de gravité élevé sans qu’il soit nécessaire de le faire.
Les utilisateurs doivent sûrement être ralentis et interrompus si les conséquences de leur action ont un impact important, mais pour la plupart des scénarios, les non-modaux sont une option beaucoup plus subtile et plus conviviale pour attirer l'attention de l'utilisateur. Au contraire, je suggère toujours que ce soit une valeur par défaut. Modaux → Pour les tâches uniques et autonomes En tant que concepteurs, nous rejetons souvent les modaux comme étant non pertinents et ennuyeux – et ils le sont souvent ! – mais ils ont aussi leur valeur. Ils peuvent être très utiles pour avertir les utilisateurs d’erreurs potentielles ou les aider à éviter la perte de données. Ils peuvent également aider à effectuer des actions connexes ou à explorer les détails sans interrompre l'état actuel de la page. Mais le plus grand avantage des modaux est qu'ils aident les utilisateurs à conserver le contexte de l'écran actuel. Cela ne signifie pas seulement l'interface utilisateur, mais également les entrées modifiées, la position de défilement, l'état des accordéons, la sélection des filtres, le tri, etc.
Parfois, les utilisateurs doivent confirmer rapidement une sélection (par exemple, les filtres comme indiqué ci-dessus), puis procéder immédiatement à partir de là. La sauvegarde automatique peut bien sûr obtenir le même résultat, mais elle n’est pas toujours nécessaire ou souhaitée. Et bloquer l’interface utilisateur n’est souvent pas une bonne idée. Cependant, les modaux ne sont utilisés pour aucune tâche. En règle générale, nous les utilisons pour des tâches uniques et autonomes dans lesquelles les utilisateurs doivent intervenir, terminer une tâche, puis revenir là où ils se trouvaient. Sans surprise, ils fonctionnent bien pour les interactions courtes et hautement prioritaires (par exemple, alertes, actions destructrices, confirmations rapides). Quand les modaux aident : 🚫 Les modaux sont souvent perturbateurs, invasifs et déroutants.🚫 Ils rendent difficile la comparaison et le copier-coller.✅ Pourtant, les modaux permettent aux utilisateurs de conserver plusieurs contextes.✅ Utile pour éviter les erreurs irréversibles et la perte de données.✅ Utile si l'envoi des utilisateurs vers une nouvelle page serait perturbateur. ✅ Afficher un modal uniquement si les utilisateurs apprécient la perturbation. ✅ Par défaut, préférez les boîtes de dialogue non bloquantes (« nonmodaux »). Pages → Pour les flux de travail complexes en plusieurs étapes Les assistants ou la navigation par onglets dans les modaux ne fonctionnent pas très bien, même dans les produits d'entreprise complexes : les panneaux latéraux ou les tiroirs fonctionnent généralement mieux. Les problèmes commencent lorsque les utilisateurs ont besoin de comparer ou de référencer des points de données – mais les modaux bloquent ce comportement, ils rouvrent donc la même page dans plusieurs onglets.
Pour les flux plus complexes et les processus en plusieurs étapes, les pages autonomes fonctionnent mieux. Les pages fonctionnent également mieux lorsqu’elles exigent toute l’attention de l’utilisateur, et la référence à l’écran précédent n’est pas très utile. Et les tiroirs fonctionnent pour des sous-tâches trop complexes pour un simple modal, mais qui ne nécessitent pas une navigation sur une page complète. Quand éviter les modaux : 🚫 Évitez les modaux pour les messages d'erreur.🚫 Évitez les modaux pour les notifications de fonctionnalités.🚫 Évitez les modaux pour l'expérience d'intégration.🚫 Évitez les modaux pour les tâches complexes et longues en plusieurs étapes. Évitez les deuxPour les tâches répétées Dans de nombreux produits complexes et exigeants en tâches, les utilisateurs se retrouveront à effectuer les mêmes tâches de manière répétée, encore et encore. Là, les modaux et les nouvelles navigations de pages ajoutent des frictions car ils interrompent le flux ou obligent les utilisateurs à collecter les données manquantes entre tous les différents onglets ou vues. Trop souvent, les utilisateurs se retrouvent avec une expérience interrompue, pleine de confirmations interminables, d'avertissements exagérés, d'instructions verbeuses ou tout simplement de points de référence manquants. Comme Saulius Stebulis l'a mentionné, dans ces scénarios, les sections extensibles ou l'édition sur place fonctionnent souvent mieux : elles maintiennent la tâche ancrée à l'écran actuel. En pratique, dans de nombreux scénarios, les utilisateurs n’effectuent pas leurs tâches de manière isolée. Ils doivent rechercher des données, copier-coller des valeurs, affiner des entrées à différents endroits ou simplement examiner des enregistrements similaires tout en accomplissant leurs tâches. Les superpositions et les tiroirs sont plus utiles pour maintenir l'accès aux données d'arrière-plan pendant la tâche. En conséquence, le contexte reste toujours à sa place, disponible pour référence ou copier-coller. Enregistrez les modaux et la navigation dans les pages pour les moments où l'interruption ajoute réellement de la valeur, notamment pour éviter des erreurs critiques. Modaux vs pages : un arbre de décision Il y a quelque temps, Ryan Neufeld a élaboré un guide très utile pour aider les concepteurs à choisir entre les modaux et les pages. Il est livré avec une aide-mémoire PNG pratique et un modèle Google Doc avec des questions réparties en 7 sections. C’est long, extrêmement complet, mais très facile à suivre :
Cela peut paraître intimidant, mais il s'agit d'un processus assez simple en 4 étapes :
Contexte de l'écran. Tout d'abord, nous vérifions si les utilisateurs doivent conserver le contexte de l'écran sous-jacent. Complexité et durée des tâches. Des tâches plus simples, ciblées et non distrayantes pourraient utiliser un mode modal, mais les flux longs et complexes nécessitent une page. Référence à la page sous-jacente. Ensuite, nous vérifions si les utilisateurs ont souvent besoin de se référer aux données en arrière-plan ou si la tâche est une simple confirmation ou sélection. Choisir la bonne overlay. Enfin, si une overlay est effectivement une bonne option, elle nous guide pour choisir entre modal ou non modal (en penchant vers un non modal).
Conclusion Dans la mesure du possible, évitez de bloquer l’intégralité de l’interface utilisateur. Avoir une boîte de dialogue flottante, couvrant partiellement l'interface utilisateur, mais permettant la navigation, le défilement et le copier-coller. Ou affichez le contenu du modal comme tiroir latéral. Ou utilisez plutôt un accordéon vertical. Ou amenez les utilisateurs vers une page séparée si vous devez afficher beaucoup de détails. Mais si vous souhaitez augmenter l’efficacité et la rapidité des utilisateurs, évitez à tout prix les modaux. Utilisez-les pour ralentir les utilisateurs, concentrer leur attention et éviter les erreurs. Comme l’a souligné Therese Fessenden, personne n’aime être interrompu, mais si vous le devez, assurez-vous que cela en vaut vraiment le coût. Découvrez les « modèles de conception d'interface intelligente » Vous pouvez trouver une section entière sur les modaux et les alternatives dans Smart Interface Design Patterns, notre cours vidéo de 15 heures avec des centaines d'exemples pratiques tirés de projets réels — avec une formation UX en direct plus tard cette année. Tout, des méga-listes déroulantes aux tableaux d'entreprise complexes, avec 5 nouveaux segments ajoutés chaque année. Accédez à un aperçu gratuit. Utilisez le code BIRDIE pour économiser 15 %. Découvrez Smart Interface Design Patterns, notre cours vidéo sur la conception d'interfaces et l'UX.
Vidéo + Formation UXVidéo uniquementVidéo + Formation UX495,00 $ 699,00 $
Obtenez une vidéo + une formation UX25 leçons vidéo (15h) + une formation UX en direct.Garantie de remboursement de 100 jours.Vidéo uniquement300,00 $ 395,00 $
Bénéficiez du cours vidéo40 leçons vidéo (15h). Mis à jour chaque année. Également disponible sous forme de pack UX avec 2 cours vidéo.
Ressources utiles
Différents types de popups, par Anna Kaley Meilleures pratiques pour la conception de modaux d'interface utilisateur, par Uxcel Nous utilisons trop de foutus modaux : directives UX, par Adrian Egger Dialogues modaux et non modaux, par Therese Fessenden Conception d'interface utilisateur d'entreprise moderne : dialogues modaux, par James Jacobs Modaux dans les systèmes de conception
