L'utilisation d'un hyperlien pour fermer un modal est-elle une mauvaise décision de conception?
J'ai donc un peu de va-et-vient avec notre designer UX auquel je m'en remets compte tenu de sa connaissance supérieure du domaine. Cependant, une partie de sa conception ne me convient pas et je ne peux pas l'avaler, je recherche donc des opinions plus brillantes que moi.
En substance, nous avons une modale de barre latérale qui apparaît quand un certain bouton est cliqué, cette barre latérale contient divers champs dans lesquels l'utilisateur peut entrer du texte. Lorsque la barre latérale est activée, l'arrière-plan est grisé et un clic n'importe où n'entraîne aucune action. Au bas de ce modal, il y a un lien hypertexte "Annuler et fermer", lorsque vous cliquez dessus, le modal disparaîtra et ne conservera aucune information.
Le fait que cet 'Annuler et fermer' soit un hyperlien ne me convient pas, pour moi, un hyperlien signifie que je serai emmené quelque part. Un bouton semble plus approprié dans ce cas car je reviendrai à mon contexte d'origine. Cependant, comme mentionné, je suis peut-être complètement dépassé dans mes opinions.
Information additionnelle
J'ai quelque chose de similaire dans ma tête - https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_js&stacked=h
Fondamentalement, échangez ce bouton "Fermer" pour un lien hypertexte "Fermer" et vous avez la même situation, bien que cet exemple se prête mieux à mon avis compte tenu de son apparence.
@Ren l'a parfaitement dit, il a été rendu discret pour garder l'utilisateur sur le modal. Il n'a pas été codé correctement en tant que bouton, mais je peux comprendre pourquoi il est conçu comme il est maintenant et il semble que ce soit un modèle couramment utilisé. Pour moi, je pensais que cela violait les principes fondamentaux et semble que j'avais tort. Merci de m'avoir éduqué!
La raison pour laquelle un lien textuel est utilisé au lieu d'un bouton est de rendre quelque peu difficile pour l'utilisateur de supprimer ou d'annuler involontairement. Le bouton principal sous n'importe quelle forme serait le bouton Soumettre. Pour attirer davantage l'attention sur l'action principale qui consiste à laisser l'utilisateur sauvegarder ses données, les boutons Annuler et Supprimer peuvent être placés sous forme de liens texte, affichant une hiérarchie visuelle inférieure. Cela ne se fait que visuellement; à l'arrière, il peut être codé avec <button> avec un fond transparent.
Il semble que vous cherchiez une réponse formelle sur un motif de bouton spécifique adapté à un usage exclusif et que vous estimiez que cet objectif n'est pas atteint.
Dès le départ, il n'y a pas une telle formule. Mais voici quelques éléments à considérer.
Les boutons de lien sont une chose
Les boutons sans texte et sans monture sont devenus un élément d'interface assez courant sans être limité à un seul objectif d'hyperlien. Les boutons de lien sont-ils utilisés ailleurs dans votre application? Sont-ils facilement identifiables en tant que boutons, en d'autres termes, ont-ils les moyens financiers appropriés? Et avez-vous testé cela avec des utilisateurs réels?
Un bouton de lien, ce que votre collègue UX a probablement spécifié, n'est pas le même qu'un lien hypertexte lorsqu'il est utilisé de manière isolée. La confusion entre les deux ne se produira probablement que sur une page contenant beaucoup de corps de texte dans laquelle de véritables hyperliens sont intégrés, comme un wiki. Mais même dans ce cas, un bouton de lien se distingue toujours d'un corps de texte avec des hyperliens entrecoupés par l'espacement et la brièveté de l'étiquetage.
s'inclinant devant une connaissance supérieure
Il est parfaitement légitime de demander à l'UX'er avec qui vous collaborez une justification de sa décision si vous avez des inquiétudes concernant la capacité financière d'un contrôle (sa découvrabilité ou sa trouvabilité). Se retirer de la partie dénigrant l'opinion et tester avec les utilisateurs . Ne faites pas cela comme le seul objectif de l'exercice, mais transformez la question de l'abordabilité en une configuration de test d'utilisabilité plus large où vous concevez un flux de travail authentique pour vos participants et observez s'ils trouvent la solution appropriée contrôles, et si cela les fait hésiter.
ne petite histoire sur les modaux
Utilisez un véritable comportement modal - qu'il soit implémenté comme panneau latéral ou que la boîte de dialogue flottante soit secondaire, je parle du comportement - pour arrêter intentionnellement toutes les autres interactions et forcer l'utilisateur à effectuer une étape intermittente critique . Tout ce qui se trouve en dehors de la zone modale doit cesser de fonctionner jusqu'à ce que la tâche présentée de façon modale soit terminée ou abandonnée. Je décris cela, peut-être sur un ton légèrement dogmatique, pour illustrer la différence d'un vrai modal par opposition à un panneau latéral extensible/rétractable dont le contenu fonctionne de manière interactive avec ce qui est sur l'écran principal. Cette différence n'est pas anodine.
ne autre chose courte sur la langue
Selon votre description, l'étiquette "Fermer" peut ne pas suffire. Il semble que les informations qu'un utilisateur vient de fournir seront effacées, ce qui s'apparente plus à une fonction d'abandon. Cette conséquence pour moi doit être claire pour eux, par exemple par une étiquette "Tout effacer et fermer". Je ne peux pas imaginer que c'est le but principal du modal, donc votre collègue avait probablement une raison de réduire la fonction d'abandon.
Nous devons donc envisager autre chose:
Appels à l'action, Affordance et Hiérarchie des décisions
Pour ne laisser aucun doute à l'utilisateur quant à la nécessité de terminer la tâche intermittente, le modal doit présenter des appels à l'action sans ambiguïté (CTA). Si votre modal présente une série de formulaires à remplir, ou des sélections de type de profil à effectuer, ce serait une fonction "soumettre" (quel que soit le véritable étiquetage de ce bouton, qui dépend du contexte).
Si cette fonction "soumettre" transmet une simple décision à double sens comme "Annuler" et "OK", décidez si, selon le contexte de l'application, les deux CTA doivent être présentés de manière uniforme (sans biais) ou de manière à ce que l'un soit marqué comme le chemin intentionnel, auquel cas vous pouvez utiliser la hiérarchie des boutons pour mettre l'accent: le chemin intentionnel - généralement l'option de confirmation - doit avoir une saillance visuelle plus élevée que l'option d'abandon : Les deux sont disponibles mais vous dirigez l'utilisateur vers un résultat préféré. Il en va de même pour une décision à plusieurs voies avec plus de deux CTA, dont une seule (le cas échéant) doit être présentée comme principale, et seulement si cela reflète la vérité de la question. Sinon, présentez tous les CTA comme égaux, dans une hiérarchie plate.
Si votre modal a un appel à l'action singulier (par exemple `` Terminé '', ce qui signifie terminé et fermé ), la hiérarchie CTA devient non pertinente en tant que telle. Dans ce cas, je définirais la force visuelle du CTA singulier appropriée au reste du contenu.
Une hiérarchie CTA à trois niveaux commune utilise souvent des boutons remplis pour le principal, des boutons soulignés pour le secondaire et des boutons de lien (texte d'étiquette uniquement) pour la couche tertiaire d'importance. Traitez une hiérarchie à trois niveaux dans un modal avec prudence.
ne question de contexte
Le point critique pour les CTA est saillance: Dans quelle mesure l'exigence vous-devez-terminer-cette d'un modal est véhiculée, dans le contexte du reste du contenu modal?
Si le contenu modal est complexe et visuellement bruyant, une conception de bouton plus percutante est en effet justifiée, car le CTA doit `` crier '' l'astuce du reste de l'interface utilisateur du modal. D'autant plus si vous gardez le CTA désactivé en attendant la fin.
Cependant, pour un contenu modal plus visuellement réticent, un bouton de lien sans bord, compensé par suffisamment d'espace ou de rembourrage, remplit le même objectif. Dans ce cas, un CTA trop audacieux dominerait en fait le contenu sur lequel nous voulons que l'utilisateur se concentre.
Ne lésinez pas sur les tests
Un simple test d'utilisabilité (avec de vrais utilisateurs, pas d'autres développeurs ou d'autres coalitions internes de volontaires, s'il vous plaît) sur la découvrabilité du CTA devrait clarifier s'il est suffisamment saillant. Dans ce cas, supprimez votre envie de gagner l'argument et commencez avec l'option du bouton de lien, et observez (et aucun de vous ne mène le témoin, s'il vous plaît) si l'appel à l'action a suffisamment de moyens pour que les utilisateurs sachent comment terminer la tâche. Si l'offre est trop faible, vérifiez cela avec min. cinq utilisateurs impartiaux, il pourrait en effet être un cas pour un bouton visuellement plus percutant.
Les utilisateurs consomment le contenu de la page dans son ensemble et la façon dont vous renforcez ou atténuez l'apparence des appels à l'action doit correspondre à la composition totale de la page.
Passez en revue ce qui précède dans le contexte de ce que votre modal doit accomplir; par tous les moyens, exprimez vos préoccupations concernant la saillance, la découvrabilité et l'abordabilité - voici du vocabulaire pour Google - et encouragez les utilisateurs à tester afin que vous vous éloigniez tous les deux de la simple opinion. Ce faisant, gardez à l'esprit qu'il est de la responsabilité professionnelle de l'UXer de s'assurer que ce que vous développez ensemble est à la hauteur de la tâche et répond aux besoins de l'utilisateur.
Les quatre options que j'ai trouvées et la plupart du temps sont:
- Bouton Annuler
- Bouton de fermeture
- Touche d'échappement
- Cliquez en dehors de la fenêtre
Vous pouvez en savoir plus sur les modaux ici: https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c
S'il s'agit d'une page Web dont vous parlez, il n'y a rien de mal à un hyperlien. Tant qu'il a une étiquette claire. Peut-être que "fermer" ne suffit pas et est "fermer" ou quelque chose de mieux compris par vos utilisateurs. Avec cela, j'arrive au problème central de la question: il ne devrait pas nous être posé mais à de vrais utilisateurs, testez-le et vous saurez. Mais pour donner une réponse plus directe ... De nos jours, il est assez courant que les hyperliens ne soient pas uniquement utilisés pour accéder à d'autres pages. Regardez ce formulaire de connexion de Google:
Le "lien" de création de compte ouvre un petit menu:
L'info n'est probablement pas complète ici. Une capture d'écran aurait aidé.
Quoi qu'il en soit, je suppose qu'il doit y avoir un bouton principal d'appel à l'action sous les champs du formulaire. Le bouton hyperlien ou tertiaire de fermeture est tel qu'il n'attirerait pas autant l'attention que le bouton principal ci-dessus.
C'est assez courant. J'espère que cela t'aides.