Je travaille avec une base popup modal bootstrap qui est un modal populaire utilisé sur de nombreux sites. J'ai remarqué que le modèle par défaut comprend à la fois un bouton de fermeture en bas et un x en haut, ces deux boutons ayant essentiellement le même objectif.
Les deux boutons redondants et de fermeture sont-ils complètement inutiles et occupent-ils simplement de l'espace supplémentaire? Ou est-ce que le fait d'avoir plusieurs options d'utilisation est plus convivial?
Pour rendre cela encore plus amusant, supposons que je lance un bouton Enregistrer:
Est-il maintenant plus clair que si vous n'appuyez pas sur Enregistrer et appuyez simplement sur x, vos modifications seront annulées, ou y a-t-il maintenant plus besoin d'un bouton d'annulation pour les utilisateurs qui ont peur qu'une erreur devienne permanente?
Pour clarifier pour ceux qui pensent que cette question est similaire à Peut-on s'attendre à ce que les utilisateurs ferment les popovers en cliquant simplement? - Cette question demande si un arrière-plan cliquable est suffisant pour fermer une popup. J'utilise des boutons et c'est juste une question de combien de boutons utiliser. (J'ai également une superposition cliquable et une touche ESC activées, mais cela n'a rien à voir avec ma question)
Elle peut être redondante, mais indépendamment de cela, la véritable préoccupation devrait être d'évaluer si cette redondance est bénéfique, nuisible ou neutre.
Avez-vous besoin d'un confirmation modal ou simplement d'un informatif un?
Confirmation : Pour commencer, vous aurez besoin d'un modèle OK/Cancel qui offrira une option binaire claire. Vous pouvez éviter le bouton X ici, mais je ne vois aucune raison de le faire, car il peut avoir un impact sur le flux utilisateur s'il est utilisé pour tout fermer avec.
Informatif : Est-il toujours nécessaire ou recommandable que les utilisateurs lisent réellement le message?
Oui : Ne placez ni bouton X ni bouton Fermer, car vous ne voulez pas donner le utilisez le moyen de sortie le plus simple et le plus rapide . Placez un "OK"/"J'ai compris!" afin que l'utilisateur soit moins susceptible de passer le message. Dans ce cas, vous devez également vous occuper du "clic en dehors du modal".
Non : placez un bouton OK ou Fermer plus un bouton X. Il existe différents types d'utilisateurs avec des habitudes d'interaction différentes, il n'y a donc pas une bonne raison de couper le flux naturel pour chacun . De plus si le message est pas très important vous devriez demander ... .
Si votre objectif est d'informer l'utilisateur, il existe des options moins intrusives telles que les notifications; essayez de limiter l'utilisation modale à quand c'est vraiment nécessaire . Exemples tirés de l'article du Nielsen Norman Group:
- L'utilisateur est sur le point de prendre une mesure qui a de graves conséquences et est difficile à inverser.
- Il est essentiel de collecter une petite quantité d'informations avant de laisser les utilisateurs passer à l'étape suivante d'un processus.
- Le contenu de la superposition est urgent et les utilisateurs sont plus susceptibles de le remarquer dans une superposition.
Je reconnais que le Web entraîne ses propres problèmes car il est indépendant de la plate-forme, mais si la plupart de vos visiteurs sont des utilisateurs de Windows, l'utilisation des normes Windows pourrait avoir du sens. En voici une page de Microsoft sur la conception de l'interface utilisateur .
Les tests utilisateur seraient vraiment la meilleure option dans ce scénario. Cela peut être connu de tous ici, mais je recommanderais le travail de Jakob Nielsen qui écrit sur l'utilisabilité du Web depuis plus de 20 ans et a créé une collection de articles sur l'utilisabilité du Web .
D'après une expérience personnelle de travail avec des personnes ayant très peu de formation sur l'utilisation d'un ordinateur, le X dans le coin supérieur est très communément compris et ne doit pas être supprimé. Soyez également clair s'il est nécessaire de faire la différence entre "fermer" et "annuler".
Selon la situation, ils pourraient potentiellement effectuer différentes actions.
Par exemple, le modal peut apparaître comme une boîte de dialogue de confirmation après qu'un utilisateur a tenté d'effectuer une action de fermeture sur un formulaire:
Fermer = continuer à fermer la page/le formulaire à partir duquel ce modal est apparu
X = annuler l'action pour fermer le formulaire, masquer le modal et revenir à la page/formulaire. (Dans cette situation, un bouton Annuler serait préférable.)
Fondamentalement, tout dépend de vos scénarios particuliers sur les actions que vous jugez nécessaires à proposer.
Ajout: Après avoir découvert plus sur le scénario spécifique dans le cas de l'OP (à partir des commentaires ci-dessous), je recommande d'utiliser simplement le x supérieur droit et de se débarrasser du bouton de fermeture. Sinon, le bouton de fermeture pourrait être confondu avec une action plus importante plutôt que simplement l'action de fermer la fenêtre contextuelle.
Créez le bouton d'action principal (ou les boutons), mais gardez le X
J'ai travaillé dans le développement Web pendant un certain temps, ce sont principalement des connaissances empiriques que j'ai recueillies à partir de l'observation des utilisateurs.
Dans de nombreuses situations, l'utilisateur ne sait pas quoi faire. Surtout lorsque présenté avec un choix. Mais même les modaux simples avec un Close ou [~ # ~] ok [~ # ~] le bouton peut être un défi. L'utilisateur n'est souvent pas sûr d'appuyer sur le bouton. Après tout, un modal présente généralement une sorte de message (qui peut être une erreur, une clause de non-responsabilité, un contrat, etc.) que vous devez lire et accepter. La fermeture peut entraîner d'autres actions indésirables (du point de vue de l'utilisateur). Par exemple, "En appuyant sur OK, vous acceptez de ..." ou "En appuyant sur OK, l'ordinateur effectuera 1001 mises à jour, le laissant inutilisable pendant les 3 prochains jours".
Le X est considéré comme "agnostique" et fonctionne comme une chose "rassurante". Lorsque vous l'utilisez, vous savez que vous fermez uniquement le modal. Vous ne faites pas de choix et, en principe, cela ne mènera à aucun développement supplémentaire.
Comme les commentaires déjà mentionnés, ce comportement est renforcé en raison des popups de spam et des modaux. Dans certaines situations où un système modal est utilisé, le X est la seule option sûre.
Eh bien, avoir les deux est toujours une bonne option, surtout si un utilisateur est nouveau dans les environnements graphiques (X peut être pour les utilisateurs expérimentés qui ont peur de Close, tandis que Close pourrait être pour les débutants). De plus, sur les écrans avec des niveaux de luminosité élevés, le X peut être presque invisible.
En termes de facilité d'utilisation, pour ceux qui ne sont pas aussi sûrs que les autres, y compris le bouton Fermer ajoute un sens à l'objectif. De plus, ne pas ajouter le bouton Fermer en bas pourrait proposer des problèmes potentiels d'accessibilité.
De plus, c'est un excellent candidat pour les tests utilisateurs et/ou un test A/B.
Personnellement, je déteste voir les deux options. Cela ne sert qu'à me dérouter, ne serait-ce qu'une seconde. Faites un X, ou fermez, mais pas les deux. À mon avis, les deux options sont très claires sur ce qu'elles font, mais les deux ensemble ne le sont pas.
Quand je vois les deux, je me demande, "pourquoi y a-t-il les deux options si elles font la même chose? Do elles font en fait la même chose?"