Toute expérience sur un site Web est comme une mosaïque d'éléments de conception et de décisions plus petits. En voici un que vous avez probablement rencontré: vous naviguez sur un site et cliquez sur un bouton. Immédiatement, la page s'estompe et une fenêtre contextuelle apparaît sur votre écran affichant un message ou demandant une action, comme l'inscription à une liste de diffusion ou le téléchargement d'une offre de contenu.
Peut-être que vous étiez heureux de voir ce popup, ou peut-être avez-vous été surpris et confus. Mais quelle que soit votre réaction, cette fenêtre a définitivement retenu votre attention. Dans les termes de conception de sites Web , ce type d'affichage est appelé un modal .Les modaux se polarisent parmi les concepteurs et les utilisateurs. Beaucoup trouvent une valeur dans leur capacité à attirer rapidement l'attention sur quelque chose d'essentiel, tandis que d'autres les considèrent comme une interruption indésirable de l'expérience utilisateur.
En pratique, tout dépend de la bonne conception et de la pertinence du modal. . Lorsqu'elles sont bien faites, elles peuvent être une technique utile à la fois pour vos utilisateurs et pour vos numéros: selon une étude récente de près de 2 milliards de popups modaux , les 10% les plus performants ont été convertis à un taux remarquable de 9,28%.
Convaincu? Dans cet article, nous examinerons ce qui fait que les modaux fonctionnent si bien. Nous discuterons également du moment, de l'emplacement et de la manière de placer efficacement les modaux sur votre site Web.
Qu'est-ce qu'un modal?
Un modal (également appelé fenêtre modale ou lightbox) est un élément de page Web qui s'affiche devant et désactive tout autre contenu de page. Pour revenir au contenu principal, l'utilisateur doit s'engager avec le modal en effectuant une action ou en le fermant. Les modaux sont souvent utilisés pour attirer l'attention des utilisateurs sur une action ou une information importante sur un site Web ou une application.
Le but des modaux peut être résumé en un mot: concentration. Si vous avez besoin que les visiteurs se concentrent sur quelque chose de simple, une fenêtre modale est l'un des moyens les plus efficaces de le faire. Les utilisateurs doivent soit fermer le modal, soit effectuer une action spécifique dans celui-ci (par exemple, lire un message et cliquer sur «OK», remplir un formulaire, etc.).
Voici un exemple simple de New Yorker . Ce modal nous invite à nous abonner à leur newsletter.
Outre la focalisation sur la canalisation, les modaux présentent des avantages supplémentaires par rapport aux autres éléments d'affichage. Premièrement, les modaux simplifient les choses. Tout reste dans un seul onglet, ce qui permet aux visiteurs de rester connectés avec ce qu'ils faisaient avant l'apparition du modal.
Deuxièmement, puisque les modaux apparaissent dans l'onglet actif de l'utilisateur, vous pouvez être sûr qu'il sera vu. Si à la place l'invite devait apparaître dans une nouvelle fenêtre, l'utilisateur pourrait la manquer ou fermer instinctivement la nouvelle fenêtre après avoir été conditionné par des popups publicitaires ennuyeux.
Enfin, les modaux aident également à préserver l'espace de la page en affichant les médias en vedette , comme des images ou des vidéos, dans une lightbox .
Modal vs Sans modalité
Nous appelons ce type d'élément «modal» car il introduit un «mode» secondaire - ou interface utilisateur - à la page Web sur laquelle il apparaît. Une fenêtre modale désactive la majeure partie de la page et oblige les utilisateurs à se concentrer sur une fenêtre spécifique avant de continuer. Les concepteurs Web appellent la fenêtre modale la fenêtre «enfant» et le reste de la page la fenêtre «parent».
L'opposé d'un élément modal est un élément «non modal», qui ne désactive pas le parent fenêtre. Les utilisateurs peuvent toujours interagir avec le contenu parent lorsqu'un élément non modal est ouvert. Des exemples d'éléments non modaux incluent un menu déroulant, un panneau latéral ou un élément contextuel qui permet toujours aux utilisateurs de cliquer sur d'autres éléments de la page.
Quand les modaux sont-ils utilisés dans Conception Web?
Les fenêtres modales sont efficaces chaque fois que vous avez besoin que les utilisateurs voient ou fassent quelque chose de spécifique. Ils apparaissent généralement (mais pas toujours) après un événement déclencheur comme un clic sur un bouton, un événement de défilement ou une intention de sortie. Les utilisations les plus courantes des modaux dans la conception Web incluent les avertissements, les alertes, les confirmations, les formulaires, les affichages multimédias et les processus en plusieurs étapes
Avertissements, alertes et Confirmations
Pour les moments où un utilisateur vraiment devrait voir quelque chose, les fenêtres modales sont excellentes pour attirer l'attention. Un modal peut contenir une alerte sur un événement ou une erreur important, un avertissement sur les conséquences d'une action ou la confirmation d'un processus terminé. Par exemple:
N'utilisez les modaux que pour les messages les plus critiques. Par exemple, des erreurs qui empêchent activement la réalisation d'une action souhaitée (par exemple, "Nous co uld ne pas terminer votre demande en raison d'une erreur de serveur. Veuillez actualiser la page et réessayer. ») Et les actions qui ne peuvent pas être annulées (par exemple,« Voulez-vous vraiment continuer? ») Sont deux raisons valables pour un mode modal. Une alerte de "politique de cookies", pas tellement - enregistrez-la pour une fenêtre ou une barre de notification non modale.
Formulaires
Si un processus sur votre site Web nécessite des informations soumises par l'utilisateur, vous pouvez placer un formulaire dans une fenêtre modale. Vous verrez souvent cela comme une alternative à une page dédiée pour la connexion / inscription, ou une page qui fait la promotion d'une newsletter par e-mail, d'une offre de contenu ou d'un code de réduction.
De nombreux sites Web, tels que Boston Globe , restreignez leur contenu aux membres uniquement, et cela peut être signalé aux non-membres via un modal:
Habituellement, le déclencheur de ce type de modal est un clic CTA ou un autre clic sur un bouton, mais il est également courant pour les sites de lancer un modal après un événement de défilement. C'est à vous de décider si vous jugez ce déclencheur trop gênant, mais sachez que certains visiteurs seront gênés par cela s'ils le jugent inutile.
Affichages multimédias
Les médias prennent souvent en charge le contenu principal d'une page Web et donnent le ton à l'expérience de navigation. Cependant, si une galerie d'images ou une vidéo sert de point focal sur votre site, une fenêtre modale permet aux visiteurs de l'afficher de manière isolée sans avoir besoin de l'ouvrir dans une autre page.
Par exemple, un utilisateur peut cliquer sur un vignette sur la page parent, qui ouvre un modal pour une galerie d'images connexes, facilement navigable avec les boutons fléchés des deux côtés de th e fenêtre. Cette implémentation est efficace pour les affichages de produits et de portfolio en particulier.
Une vignette peut également ouvrir un modal vidéo, qui affiche la vidéo comme son propre petit cinéma, puis se ferme une fois la vidéo terminée. La page d'informations du site Web de Starry du fournisseur de services Internet répertorie quelques vidéos qui présentent cette présentation:
Un autre l'avantage de l'utilisation de modaux pour afficher les médias est l'efficacité de l'espace. Les médias ont tendance à occuper un espace de page précieux, mais rendre une galerie ou un lecteur vidéo accessible avec une vignette plus petite économise de précieux biens immobiliers.
Processus en plusieurs étapes
Pour des actions plus longues et plus gourmandes en énergie sur votre site Web - création d'un profil utilisateur, inscription à un service ou configuration d'un outil - pensez à séparer chaque étape dans sa propre fenêtre modale afin que l'expérience soit plus gérable. Cette technique est courante dans les applications logicielles sous la forme d'un «assistant» ou d'un «guide d'installation». La progression doit être affichée dans la fenêtre sous la forme d'une barre, d'une séquence de petits points, de nombres ou d'un autre indicateur.
Pinterest le fait bien avec son processus de création de compte. Notez l'indicateur de progression en haut.
Bonnes pratiques relatives à la fenêtre modale
- Utilisez les modaux intentionnellement et rarement.
- Désactivez tous les éléments d'arrière-plan.
- Rédigez des instructions et un texte de bouton clairs.
- Offrez un message aux utilisateurs.
- Redimensionnez votre fenêtre modale de manière appropriée .
- Introduisez et fermez le modal avec un fondu.
- Limitez les modaux sur mobile.
- Concevez vos modaux pour accéder ssibility.
Les modaux sont si courants sur le Web que vos visiteurs peuvent distinguer un modal utile d'un modal inutile ou mal conçu. Assurez-vous que vos modaux sont de haute qualité en respectant ces huit meilleures pratiques pour la conception de fenêtres modales:
1. Utilisez les modaux intentionnellement et rarement.
Les modaux sont perturbateurs par conception. Ils ont tendance à apparaître de manière inattendue dans le flux de l'expérience de navigation et à toujours détourner l'attention de leur fenêtre parent. C'est un coût élevé pour l'utilisateur, donc les modaux doivent toujours aider l'utilisateur dans ses objectifs, pas les gêner.
Pour éviter que les visiteurs ne deviennent ennuyés par votre site, ne déployez des fenêtres modales que lorsque vous en avez absolument besoin , et uniquement s'ils aident l'utilisateur à atteindre son objectif principal. Rien de moins, et les utilisateurs pourraient oublier leur objectif initial et devenir frustrés.
Pour les avertissements et les alertes, seules les erreurs cruciales et les actions permanentes devraient provoquer un affichage modal. Pour les formulaires, respectez ceux qui rassemblent les informations requises ou au moins améliorent considérablement leur expérience sur votre site. Et toutes les étapes d'un processus modal en plusieurs étapes doivent être très pertinentes pour l'objectif final de l'utilisateur.
Pour tous les éléments interactifs ou les étapes qui ne sont pas éligibles, utilisez plutôt un affichage non modal.
2. Désactivez tous les éléments d'arrière-plan.
Afin d'attirer efficacement toute l'attention sur le modal, tous les éléments d'arrière-plan doivent être visuellement et fonctionnellement supprimés derrière la fenêtre enfant.
Visuellement, les modaux sont flous et / ou assombrir la plupart ou tous les éléments parents. Cela donne l'impression que la fenêtre modale se trouve au-dessus de l'autre contenu. une ombre portée autour du modal peut également créer cet effet.
Fonctionnellement, assurez-vous qu'aucun élément de page en dehors de la fenêtre modale ne soit cliquable ou sélectionnable via le clavier, et envisagez également de désactiver le défilement. Toute fonctionnalité supplémentaire de la page parente enverra des signaux mitigés sur le but du modal.
Autre remarque importante: puisqu'un modal rend tous les autres contenus de page inaccessibles jusqu'à sa fermeture, toutes les informations dont les utilisateurs ont besoin pour compléter le modal doit être fourni dans la fenêtre modale elle-même. Les utilisateurs ne devraient pas avoir besoin de se référer au contenu parent pour traiter le modal - toute tâche qui nécessite cette commutation est mieux adaptée pour un affichage non modal.
3 . Rédigez des instructions et un texte de bouton clairs.
Pour aider les utilisateurs à s'adapter rapidement à l'affichage modal et à comprendre pourquoi il est là, rédigez tout le texte aussi bref et clair que possible. Tous les modaux doivent inclure un texte de titre qui énonce l'intention du modal ou l'action requise. Rédigez le texte du bouton et les autres invites d'action pour être également concis et intuitif.
4. Donnez aux utilisateurs une sortie.
Chaque bonne fenêtre modale autorise au moins une action, la possibilité de la fermer. La convention dit que la fenêtre doit après qu'un utilisateur appuie sur la touche d'échappement ou clique sur un symbole «X» ou sur le texte «Fermer» dans le coin supérieur gauche ou droit de la fenêtre modale.
Vous pouvez également choisir de fermer la fenêtre lorsque les utilisateurs cliquent en dehors du modal, et envisagez de placer un bouton «Annuler» dans le modal au lieu d'un bouton «Continuer».
5. Dimensionner votre fenêtre modale de manière appropriée.
Les modaux doivent apparaître sous forme de calque au-dessus de la fenêtre parente. Rendez-le trop grand et les utilisateurs pourraient penser que la page modale est une toute nouvelle page trop petite et les utilisateurs pourraient la confondre avec une annonce.
Une bonne règle consiste à limiter la fenêtre modale à au plus 50% du navigateur largeur de la fenêtre, et à peu près la même chose pour la hauteur, bien que les dimensions exactes varient en fonction de ce que vous placez dans le modal.
6. Introduisez et fermez le mode modal avec un fondu.
Inclut un effet de transition pour faciliter le passage de la fenêtre parent à la fenêtre enfant. Un bref fondu en arrière-plan du contenu d'arrière-plan et un fondu en entrée de la fenêtre modale fonctionneront bien dans presque tous les scénarios - une transition plus mouvementée (par exemple, une transition) ou aucune transition peut sembler choquante pour certains.
De retour à notre exemple Starry , notez comment la vidéo modale s’affiche rapidement mais facilement, tandis que le contenu d’arrière-plan sont grisés:
7. Limitez les modaux sur mobile.
Toutes les fonctionnalités de conception que j'ai décrites fonctionnent parfaitement pour les écrans de bureau, mais les appareils mobiles sont une autre histoire. La taille réduite de l'écran rend plus difficile la réalisation de la fenêtre à l'intérieur -a-window semble sans paraître trop grande ou trop petite.
Là où vous pourriez placer un modal sur votre site normal, envisagez plutôt d'ajouter un élément non modal ou de placer votre contenu modal sur une nouvelle page entièrement. Si vous préférez les modaux sur votre site mobile, testez-les pour vous assurer qu'ils sont réactifs, lisibles et faciles à utiliser.
8. Concevez vos modaux pour l'accessibilité.
J'ai déjà évoqué quelques accessibilité Web pointeurs dans cette liste - voici quelques pratiques courantes pour rendre vos modaux utilisables par tout le monde:
- Chaque action cliquable dans le modal devrait également être possible avec le clavier. La touche d'échappement doit fermer la fenêtre et les touches tabulation et entrée peuvent être utilisées pour sélectionner des options.
- Tous les autres éléments en dehors du modal ne doivent pas être accessibles par le clavier tant que le modal est en vue.
- La fenêtre modale doit contraster visuellement avec la page d'arrière-plan.
- Les transitions vers et hors du modal doivent être fluides et non flashy.
- Toutes les images, la vidéo ou d'autres éléments multimédias doivent inclure un texte alternatif descriptif.
- Tout le texte et tous les médias peut être interprété par des lecteurs d'écran et d'autres technologies d'assistance.
Comment implémenter des modaux en CSS
Pour ajouter un fenêtre modale de base sur votre site, une option consiste à utiliser uniquement CSS et HTML. La plupart des facteurs de conception que nous avons abordés dans ce guide peuvent être modifiés avec un peu de savoir-faire CSS . W3Schools fournit un modèle de code basique mais utile pour démarrer avec la méthode CSS, ou vous pouvez utiliser un modèle gratuit depuis Frontend gratuit ou Material Design for Bootstrap .
Quelle que soit la façon dont vous décidez de mettre en œuvre votre modal , n'oubliez pas de limiter leur utilisation aux seuls cas essentiels. Il est normal d’exiger de temps en temps l’attention de l’utilisateur, à condition que cela serve finalement son objectif final et offre suffisamment de valeur pour justifier une brève interruption. Pour chaque modal, comprenez son objectif dans le parcours du visiteur et respectez nos meilleures pratiques en matière de conception et de fonctionnalité.
< ! - Code d'appel à l'action ->
Aucun commentaire:
Enregistrer un commentaire