Peut-on s'attendre à ce que les utilisateurs ferment les popovers en cliquant simplement dessus?
Nous utilisons beaucoup de popovers et, lorsque vous cliquez dessus, ils se ferment. Pensez-vous qu'il est raisonnable de s'attendre à ce que la majorité des internautes sachent comment le fermer de cette façon au lieu d'ajouter un bouton de fermeture?
Je remarque que la recherche Spotlight sur Mac OS X Yosemite n'a pas de bouton de fermeture et doit être supprimée en cliquant dessus. Vraisemblablement, si Apple l'ont fait, c'est maintenant un comportement conventionnel.
D'un autre côté, je remarque que Google Agenda a toujours un bouton de fermeture.
Mise à jour le 24 janvier 2016
Merci à icc97 de le signaler ci-dessous, j'ai maintenant vu Apple's Human Interface Guidelines pour les popovers qui disent:
Fermez le popover dès que les gens font un choix ou lorsqu'ils tapent n'importe où en dehors de ses limites, y compris le contrôle qui révèle le popover.
J'ai récemment vu un exemple de ces directives en action dans ce popover de l'iPad App Store. Vous verrez qu'il n'y a pas de bouton de fermeture. Vous le rejetez en appuyant n'importe où en dehors de ses limites. Apple a vendu 800 millions d'appareils iOS, vous pouvez donc y attacher une certaine importance :)
Nous avons récemment lancé ce popover sans bouton de fermeture dans notre application et personne ne nous a demandé comment le fermer. L'application est utilisée par des dizaines de milliers de personnes. Il semble donc que cliquer pour fermer peut être considéré comme "conventionnel".
Il existe une exception à la fermeture d'un popover lorsque les utilisateurs cliquent/tapent en dehors de ses limites et c'est lorsque les utilisateurs ont terminé leur travail dans un popover. Comme l'indiquent les directives iOS:
Fermez le popover lorsque les utilisateurs terminent ou annulent la tâche en appuyant sur un bouton du popover, tel que Terminé ou Annuler. Dans ce scénario, vous ne souhaiterez peut-être pas fermer le popover lorsque les utilisateurs tapent en dehors de ses frontières, car il peut être important que les utilisateurs terminent - ou abandonnent explicitement - la tâche. Sinon, enregistrez les entrées des gens lorsqu'ils tapent en dehors des frontières d'un popover, comme vous le feriez s'ils tapaient sur Terminé.
Je recommanderais d'utiliser le bouton de fermeture pour les raisons suivantes
- Votre bouton de fermeture est un indicateur visuel pour les utilisateurs qu'ils peuvent cliquer là pour fermer le popover . Alors que certains utilisateurs peuvent être habitués à cliquer à l'extérieur ou à appuyer sur ÉCHAP pour fermer un popover (et vous devriez également prendre en charge ces utilisateurs), le bouton de fermeture aide à établir la voie d'évacuation.Pour citer cela article
Offrir un bouton de fermeture à contraste élevé dans le coin supérieur Fermer la fenêtre modale quand ils en ont besoin. Utilisez l'icône "X" conventionnelle pour votre bouton de fermeture. Un bouton de fermeture à contraste élevé permettra aux utilisateurs de mieux voir leur sortie. Votre bouton de fermeture doit être de forme et de couleur.
- Il fournit un élément d'accessibilité supplémentaire aux utilisateurs pour fermer un popover: bien que la principale recommandation d'accessibilité soit de permettre aux utilisateurs d'appuyer sur ÉCHAP pour fermer un popover, en citant le référencé ci-dessus article
Autoriser les utilisateurs à fermer la fenêtre avec la touche ESC Pour des raisons d'accessibilité, votre fenêtre modale devrait se fermer lorsque les utilisateurs appuient sur la touche ESC. Vous devez également autoriser les utilisateurs à parcourir les contrôles dans la fenêtre modale si vous en avez. Cela permettra aux utilisateurs qui utilisent des lecteurs d'écran et des claviers de naviguer sur votre site Web.
Il est également recommandé de fournir un lien ou une action supplémentaire accessible par le clavier ou la souris pour fermer le popover. Pour citer cette référence
Contrôle de la souris, vous devriez pouvoir:
- Cliquez sur le lien pour ouvrir la fenêtre contextuelle.
- Cliquez sur un bouton "Fermer" pour le fermer.
- Cliquez en dehors de la fenêtre contextuelle pour la fermer.
Le contrôle du clavier doit:
- Autorisez la tabulation du lien et appuyez sur Entrée pour l'ouvrir
- Déplacez le focus du clavier vers le haut du pop-over lorsqu'il est ouvert. Pour les utilisateurs de lecteurs d'écran, ils liront simplement par le haut. Pour les utilisateurs de clavier (visuel), une pression sur tab devrait vous amener au premier élément focalisable dans la fenêtre contextuelle.
- Empêchez de tabuler en dehors de la fenêtre pop-over, en enroulant autour. C'est à dire. la tabulation du dernier élément focalisable se déplace vers le premier, et la tabulation-décalage du premier se déplace vers le dernier.
- Les utilisateurs de lecteurs d'écran ne devraient pas non plus pouvoir "parcourir" la fenêtre contextuelle. Par exemple. dans Jaws, appuyer sur la flèche vers le bas à la fin ne sort pas du pop-over.
- La fermeture de la fenêtre contextuelle devrait remettre le lien où il était, sur l'élément déclencheur.
- Vous devriez pouvoir appuyer sur esc pour fermer la fenêtre contextuelle.
Cette question - et une grande partie de la discussion ici - semble provenir de l'absence de définitions et de règles claires pour quand, pourquoi et comment utiliser plusieurs composants d'interface. Ci-dessous, j'essaie d'expliquer les règles simples que je suis pour chaque composant lié à celui de la question d'origine:
Info-bulle
Utilisé pour les petits morceaux de contenu en lecture seule qui apparaissent au survol et au focus et disparaissent lorsque le survol ou le focus sont perdus. Google a un bon aperçu de comment/quand utiliser les info-bulles .
Menus déroulants
Utilisé pour effectuer des actions uniques. Une fois la liste déroulante ouverte, elle se ferme lorsque l'utilisateur soit clique sur un élément à l'intérieur, soit à l'extérieur de celui-ci. Encore une fois, Google a une excellente définition de comment et quand les utiliser.
Popovers
Utilisé pour les processus complexes qui nécessitent plus d'un clic, et où:
- Il est nécessaire de voir le contexte environnant pour décider des actions à entreprendre dans le popover.
- Nous voulons que l'utilisateur perçoive l'interaction comme "plus légère", non bloquante et avec peu de frais généraux.
- Il s'agit d'une tâche complémentaire au contexte extérieur plutôt que d'un processus autonome.
- Il est acceptable que la progression de l'utilisateur reste dans un état partiellement terminé.
La solution mise à jour de @ Andrew est un excellent exemple: Une fois le popover ouvert, l'utilisateur peut modifier, couper et supprimer. Chacune de ces actions peut muter le contenu du popover, il est donc essentiel qu'il reste ouvert. Cependant, si le clic à l'extérieur du popover sans enregistrer une modification, leurs modifications ne doivent pas être persistées.
Les décisions sur ce qu'il faut faire dans le popover sont facilitées par la possibilité de voir le contexte extérieur. Voir des commentaires immédiats dans le contexte extérieur facilite les actions de l'utilisateur.
Dialogues modaux
Utilisé pour les processus de blocage discrets où:
- Le contexte environnant n'est pas nécessaire pour décider des actions à entreprendre.
- Nécessite une action explicite "accepter" ou "annuler" pour la fermer. Il ne se ferme pas lorsque vous cliquez sur la zone à l'extérieur.
- Il n'est pas acceptable que la progression de l'utilisateur soit laissée dans un état partiellement terminé.
Encore une fois, les spécifications de Google les décrivent bien .
Sur la base de mon expérience personnelle, je soutiens que le bouton de fermeture n'est pas nécessaire lorsque le popover a été facilement lancé par l'utilisateur (il ou elle peut rapidement recommencer le popover, si nécessaire).
J'ai vu quelques personnes âgées devenir très frustrées en essayant de cliquer en dehors du popover pour essayer de le fermer sans succès. Ils semblent avoir du mal à trouver le bouton "X". De même, je trouve frustrant d'essayer de naviguer vers un petit "X" dans le coin d'un popover.
Cependant, un cas où un bouton de fermeture serait nécessaire est sur les appareils mobiles où le popover occupe une grande partie de l'écran. Dans ce cas, je suggère d'utiliser le mot "fermer" au lieu d'un "X" en raison de la frustration susmentionnée.
L'exemple fourni par Mervin Johnsingh était pour un popover qui n'a pas été initié par l'utilisateur, donc je pense qu'un bouton de fermeture est applicable dans ce cas. Dans l'exemple donné par Andrew, le popover semblait être initié par l'utilisateur, donc je ne pense pas qu'il soit nécessaire.
Je soupçonne que la raison pour laquelle Google Agenda utilise un "X" est que le fait de cliquer hors de l'écran fait apparaître un autre popover pour créer un nouvel événement, ce qui en fait un cas spécial.
En fait, je dois dire que je suis surpris. Mais Apple Guidelines on popovers spécifie en fait pour éviter d'inclure tout bouton de fermeture, mais lorsque vous implémentez un alors vous devriez avoir un 'annuler':
Évitez de fournir un bouton "fermer la fenêtre contextuelle". Un popover doit se fermer automatiquement lorsque sa présence n'est plus nécessaire. Pour déterminer quand la présence d'un popover n'est plus nécessaire, envisagez les scénarios suivants:
Si un popover…
- Fournit des options qui affectent la vue principale, mais n'implémente pas d'inspecteur
- Fermez le popover dès que les gens font un choix ou lorsqu'ils tapent n'importe où en dehors de ses limites, y compris le contrôle qui révèle le popover.
- Implémente un inspecteur
- Fermez le popover lorsque les utilisateurs tapent n'importe où en dehors de ses limites, y compris le contrôle qui révèle le popover.
- Dans ce scénario, ne fermez pas le popover dès que les utilisateurs font un choix, car ils peuvent vouloir faire un choix supplémentaire ou modifier les attributs du choix actuel.
- Active une tâche
- Fermez le popover lorsque les utilisateurs terminent ou annulent la tâche en appuyant sur un bouton du popover, tel que Terminé ou Annuler.
- Dans ce scénario, vous ne souhaiterez peut-être pas fermer le popover lorsque les utilisateurs tapent en dehors de ses frontières, car il peut être important que les utilisateurs terminent - ou abandonnent explicitement - la tâche. Sinon, enregistrez les entrées des gens lorsqu'ils tapent en dehors des frontières d'un popover, comme vous le feriez s'ils tapaient sur Terminé.
Remarque pour ce qui précède, vous devez savoir ce que Inspecteurs sont:
Un inspecteur est un panneau qui permet aux utilisateurs de visualiser les attributs d'une sélection.
Mise à jour: La conception matérielle n'a intrigante pas de popovers (voir cet autre question UX.SE - mais il convient de noter que dans cette question que le popover pour producthunt.com n'a pas un rejet). Cependant, même pour les boîtes de dialogue, le seul endroit où Google Material Design spécifie qu'il doit y avoir un "x" est pour "Dialogues plein écran" :
Les boîtes de dialogue plein écran regroupent une série de tâches (telles que la création d'une entrée d'agenda) avant de pouvoir être validées ou supprimées. Aucune sélection n'est enregistrée tant que vous n'avez pas appuyé sur "Enregistrer". Toucher le "X" annule toutes les modifications et ferme la boîte de dialogue.
OK, j'ai fait un peu de recherche et trouvé quelque chose d'assez concluant. Facebook n'est peut-être pas le site Web préféré de tout le monde, mais il doit être utilisable sinon il serait absolument inondé d'utilisateurs confus - ils ont actuellement 1,19 milliard d'utilisateurs actifs par mois. Il est assez difficile de contester cela. Sur la base du popover dans la capture d'écran ci-dessous, je dirais que cliquer loin est assez conventionnel de nos jours.
Cela dépend également du type d'information dans popover comme de la nature de l'information ou d'un formulaire.
Pourquoi ne pas prévoir les deux pour les deux types d'utilisateurs. La nouvelle génération d'utilisateurs est assez avisée de cliquer pour fermer le popover. Preuve comme le montre l'exemple Facebook ci-dessus.
Échap ou cliquer loin ferme le popover. C'est également la valeur par défaut dans angular modaux Ui.
Dernier cas, lorsqu'une action de l'utilisateur est requise à partir du popover, ne fermez pas par esc ou en cliquant. Cela se fait généralement en fournissant des actions ok et cancel sur le popover. Et les deux ferment le popover.