Les fenêtres modales ont été créées à l'origine pour signaler des événements importants ou essentiels dans les interfaces utilisateur. À mesure que le monde de la conception progressait, les entreprises ont exploré les nombreuses façons de recueillir les données dont elles avaient besoin pour élargir leur public. L'une de ces pratiques comprenait ces boîtes pop-up pratiques (dont beaucoup bloquent complètement le contenu de la page parente), qui ont ensuite été utilisées de manière abusive, au gré des désirs des concepteurs, des parties prenantes et des spécialistes du marketing, et malheureusement, au détriment d'une bonne ergonomie.
Voici comment.
Personne n'aime être interrompu, mais cette interruption mérite parfois d'être évitée.
Vos écrans modaux sont-ils des interruptions nécessaires ou gratuites ?
Par exemple, si vous êtes en train de tenir une conversation importante et que quelqu'un vous interrompt pour vous dire que quelqu'un est en train de cambrioler votre voiture ou que votre maison est en train de brûler, vous le remercierez abondamment et vous vous mettrez en action pour résoudre la situation d'urgence.
Cependant, si quelqu'un interrompait cette même conversation importante pour vous demander le temps qu'il fait ou votre couleur préférée, vous seriez probablement agacé par cette intrusion inutile.
Il en va de même pour dialogues modaux (ou dialogues). Lorsqu'ils sont utilisés correctement, ils sont salvateurs (en tout cas, bénéfiques pour l'utilisateur) ; lorsqu'ils sont utilisés de manière abusive, ils sont ennuyeux, entravent le flux de travail et nuisent à l'expérience de l'utilisateur.
Dans l'article d'aujourd'hui, nous allons expliquer ce qu'est une fenêtre modale et pourquoi il est important que son utilisation soit respectueuse de vos utilisateurs et de vos visiteurs afin de maintenir les meilleures pratiques UX idéales.
Modalité et UX
Lorsqu'il s'agit de modalité, les concepteurs UX doivent toujours respecter le flux de travail de l'utilisateur et ne l'interrompre qu'avec des informations essentielles.
En tant que Groupe Nielsen Norman États :
Les dialogues modaux interrompent les utilisateurs et exigent une action. Elles conviennent lorsque l'attention de l'utilisateur doit être dirigée vers des informations importantes.
La question de savoir ce qui constitue une "information importante" peut être controversée dans le meilleur des cas. Il est certain que, pour une expérience utilisateur optimale, cette décision devrait être entre les mains de l'utilisateur. Si vous ne pouvez pas respecter le concept de base ou si vous n'êtes pas sûr de ce qu'est une essentiel pour vos utilisateurs, de simples tests peuvent fournir les données nécessaires à une utilisation appropriée des fenêtres modales.
Qu'est-ce que la modalité ?
Une fenêtre modale apparaît à l'intérieur ou au-dessus de l'écran parent, rendant tous les éléments fonctionnels de la page inactifs. La fenêtre dialogue modal est conçu pour alerter les utilisateurs d'un événement spécifique, nécessitant une interaction de l'utilisateur pour fermer la fenêtre avant qu'il ne puisse continuer à interagir avec le contenu ou le logiciel comme auparavant.
La modalité en action
Il est assez facile de comprendre l'importance d'une dialogue de sauvegarde est une fenêtre modale. Lorsque cette boîte de dialogue modale apparaît, elle vous demande si vous souhaitez enregistrer les modifications apportées à un document avant de le fermer. Nous avons tous été victimes d'une perte de travail due à l'oubli d'enregistrer des documents. Cette option est donc une aide précieuse pour tous ceux qui créent des documents importants. Avec les options d'enregistrement, d'annulation ou de non-enregistrement avant de pouvoir continuer, la décision peut interrompre les opérations, mais elle en vaut la peine. Tous ceux qui ont connu la frustration d'un travail perdu seront ravis de voir leur travail protégé par cette fenêtre modale déclenchée par le système.
À l'autre bout de l'échelle, une fenêtre contextuelle qui apparaît quelques secondes après la visite d'une nouvelle page web et qui vous demande de vous inscrire à leur liste de diffusion ou de les autoriser à vous harceler de notifications avant que vous ne puissiez accéder au contenu que vous souhaitez lire n'est pas tout à fait aussi essentielle ou importante pour l'utilisateur. Il s'agit d'un léger inconvénient, mais néanmoins d'un inconvénient qui, dans la conception UX, ne mérite pas d'interrompre le flux de travail de l'utilisateur.
En tant qu'option supplémentaire pour rassembler de nouveaux contacts, vous pouvez comprendre pourquoi les spécialistes du marketing adorent cette action, mais en ce qui concerne l'UX, il y a de solides arguments sur l'utilisation correcte d'un tel composant et un débat sur la façon dont la fonctionnalité est utilisée de manière abusive.
Types de modalités
Dialogues modaux
Les exemples suivants montrent comment les fenêtres modales sont utilisées dans les environnements numériques actuels :
- Pop-ups et lightboxes qui remplissent tout l'écran
- Alertes et notifications (y compris la boîte de dialogue de sauvegarde et d'autres écrans modaux qui empêchent les erreurs de l'utilisateur)
- Avertissements et instructions dans le logiciel et dans le navigateur
- Options d'action et flux de travail complexes
- Collecte des données d'entrée nécessaires, telles que les identifiants de compte et les méthodes de paiement, ou autorisation d'accès aux appareils photo des téléphones portables, aux albums photos, etc.
- Quelques infobulles
- Confirmation d'une action, par exemple lorsqu'un formulaire est envoyé avec succès
- Assistants d'intégration ou alertes de nouvelles fonctionnalités à l'ouverture d'une application ou d'un site web
- Demandes de marketing, telles que l'inscription à un bulletin d'information, à un compte ou à une réduction/offre.
Dialogues de mannequins
En tant que chercheurs UX, nous voulons encourager la participation des utilisateurs, mais sans affecter le flux ou le plaisir qu'ils ont à utiliser nos produits.
Les alternatives aux fenêtres modales sont des options qui peuvent faire le même travail sans être aussi intrusives et sans bloquer le contenu de la page mère. Connues sous le nom de fenêtres de dialogue sans modèle ou fenêtres non modalesCes options n'occupent pas la totalité de l'écran et de l'interface utilisateur et apparaissent généralement sur la même page. Elles laissent l'utilisateur libre de continuer ce qu'il est en train de faire, tout en ignorant les demandes supplémentaires ou en les reportant à plus tard.
Sur appareils mobilesLorsque l'espace est limité, une fenêtre modale et une fenêtre non modale peuvent se ressembler, car toutes deux occuperont probablement l'écran pour afficher leur message. Toutefois, la principale différence réside dans la barre de navigation et l'en-tête, qui restent visibles dans les fenêtres non modales. Les écrans modaux ont leur propre en-tête ou pied de page, avec des options permettant d'annuler ou de progresser en fournissant les données demandées ou requises ; dans les fenêtres non modales, la barre de navigation reste intacte et offre les mêmes options qu'auparavant.
Comment se présente une fenêtre non modale par rapport à un écran modal ? Voici quelques exemples de celles que vous voyez et utilisez probablement tous les jours :
- Boîtes de dialogue dans la page, telles que les boîtes de dialogue et les fonctions de recherche
- Avertissements en ligne, tels que les entrées incorrectes dans les champs de formulaire
- Placer des informations sur une page séparée à l'aide du bouton "lien externe".
- Entrées en ligne, enquêtes et boîtes de commentaires
- Diaporamas et lecteurs vidéo en ligne
- Notifications de cookies dans une barre contextuelle en haut ou en bas de la page
- Fournir un contenu visible sur la page
- Menus des onglets
- Accordéons
- Créer une fenêtre contextuelle pour les messages électroniques
- Boîtes de recherche
- Dialogues dans la barre latérale
Avantages de l'utilisation des fenêtres modales
- Priorité à l'utilisateur ? Les fenêtres modales permettent à l'utilisateur de se concentrer sur ce que le concepteur de la page considère comme le plus important, en l'avertissant des événements critiques relatifs au contenu ou à l'opération.
- Achèvement des tâches ? Le concepteur inclut une fenêtre modale qui demande des informations pour achever un processus, tel qu'une connexion à un compte, sans laquelle le flux de travail ou le parcours numérique ne peut se poursuivre.
- Prévention des erreurs ? Il s'agit là encore d'un écran modal important qui permet d'éviter des erreurs graves en demandant à l'utilisateur de prendre une décision essentielle.
- Scènes modales qui décomposent les flux de travail complexes en étapes gérables ? Par exemple, dans le domaine de la publication assistée par ordinateur, les fenêtres modales présentent à l'utilisateur un ensemble d'options pour appliquer un formatage, des filtres ou d'autres paramètres.
Défis et inconvénients
- Frustration de l'utilisateur ? Les fenêtres contextuelles inutiles interrompent le flux de l'utilisateur, lui faisant souvent perdre sa concentration ou sa place dans un document, ou le distrayant complètement de ce qu'il était en train de faire.
- Interruptions inutiles ? L'ajout d'une tâche non pertinente à l'opération en cours de l'utilisateur est gênant et distrayant.
- Ils bloquent l'accès au contenu ? La désactivation de la page mère pourrait empêcher l'utilisateur d'accéder aux informations nécessaires pour répondre à la demande formulée dans la fenêtre modale.
- Problèmes d'accessibilité ? L'accessibilité est une préoccupation majeure dans les fenêtres modales. Chacun peut-il naviguer dans l'interruption, s'y engager ou l'écarter, quelle que soit sa situation personnelle ?
Bonnes pratiques pour la mise en œuvre des modalités
Nous aimerions suggérer que les meilleures pratiques relèvent du bon sens ; cependant, nous savons à quel point les parties prenantes et les spécialistes du marketing avides de cibles aiment attirer l'attention des utilisateurs avec leur dernière promotion ou leurs exercices de collecte de données.
Veiller à ce que les écrans modaux fonctionnent avec des valeurs UX saines :
- Avoir un objectif clair et crucial ? Compte tenu de la distraction qu'entraînent les vues modales plein écran, veillez à ne pas interrompre inutilement la concentration de vos utilisateurs ou le contact avec l'écran principal.
- Contrôle de l'utilisateur ? Si vous devez utiliser une fenêtre modale, veillez à ce que les utilisateurs puissent la supprimer facilement. Donner aux utilisateurs le contrôle sur la façon dont ils consomment le contenu et fournissent des informations devrait être une priorité dans votre conception UX.
- Caractéristiques d'accessibilité ? Veillez à ce que chaque tâche modale fournisse l'étiquetage, l'accès et le fonctionnement nécessaires aux utilisateurs de clavier et aux lecteurs d'écran. Il est également essentiel de sauvegarder le dernier état actif de l'utilisateur afin qu'il puisse reprendre son travail là où il l'avait laissé, une fois les tâches modales traitées.
- Essais et retour d'information ? Compte tenu de l'importance de l'itération dans les tests utilisateurs et de la collecte de commentaires par le biais d'études UX régulières, nous ne devrions pas avoir à vous dire à quel point cela est important. Nos utilisateurs doivent être au cœur de tous les parcours utilisateurs.
Conclusion
Lorsqu'elles sont utilisées correctement, les fenêtres modales peuvent être incroyablement positives et efficaces. Elles jouent un rôle essentiel dans les progiciels, les SaaS, les sites web et les applications. Cependant, comme nous l'avons vu, une utilisation excessive des fenêtres modales peut avoir de graves inconvénients en termes d'expérience utilisateur lorsqu'elles sont utilisées sans respect pour les utilisateurs et les visiteurs du site web.
Pour garantir une expérience positive en matière de conception d'interface utilisateur, nous devons comprendre ce qui est suffisamment important pour limiter l'accès au contenu jusqu'à ce que l'utilisateur interagisse explicitement avec la boîte de dialogue modale. Bien que nous puissions consulter plusieurs cadres de décision pour déterminer si une fenêtre modale est vraiment nécessaire, la meilleure façon de savoir ce que veut l'utilisateur, comme dans toute bonne recherche UX, est peut-être de le lui demander.
Nos experts en recherche sur les utilisateurs sont à votre disposition pour vous aider à vous rapprocher de vos clients. Si vous souhaitez organiser un appel sans engagement, contactez-nous par e-mail à l'adresse suivante hello@ux247.com ou faites-nous part de vos besoins en utilisant le formulaire ci-dessous.
