Une info-bulle nécessite-t-elle un bouton de fermeture?
Je travaille sur les info-bulles, quand on m'a dit qu'il y avait des info-bulles qui ont des boutons de fermeture. Une info-bulle avec un bouton de fermeture est-elle conviviale?
Pour savoir si l'infobulle doit pouvoir être fermée par l'utilisateur, nous devons savoir quand elle s'affiche.
- En survolant: non, il est masqué, lorsque l'utilisateur s'éloigne.
- Sur un événement: comment serait-il fermé autrement? Le temps n'est pas une bonne option car il constituerait une rupture avec les directives d'accessibilité.
- Cliquez dans la ligne de texte: Pas nécessaire, mais je fournirais cette option pendant que stackexchange le fait. Les utilisateurs aiment avoir le contrôle.
En général, je fournirais un bouton de fermeture. Habituellement, cela ne détruit pas un design, mais la plupart des gens l'aimeront.
Le truc avec les info-bulles (comme avec tout le reste à l'écran) est qu'il augmente la charge cognitive et nécessite d'être traité (lu) par l'utilisateur.
La question générale à poser est donc la suivante: l'utilisateur a-t-il besoin (ou veut-il) de voir l'info-bulle en permanence, ou devrait-il être autorisé à la fermer? L'info-bulle est-elle vraiment utile ou triviale?
Je dirais que les info-bulles en général doivent être visibles uniquement tant qu'elles transmettent un message important à l'utilisateur. Ils devraient donc avoir un bouton de fermeture ou disparaître après une autre entrée de l'utilisateur (survol de la souris, clic sur l'élément associé, correction du problème, etc.), ou délai (mais comme cela a été indiqué dans les réponses précédentes - cela va à l'encontre d'une bonne accessibilité doivent donc être utilisées uniquement pour des informations triviales).
TL; DR;
Dans le contexte actuel, ce qui est montré dans votre capture d'écran, je vois deux mauvais problèmes UX et je conseillerais de ne pas mettre de bouton de fermeture sur votre info-bulle.
Un problème est survenu avec le nom d'utilisateur et/ou le mot de passe. Cela se produit très souvent et la plupart des gens savent quoi faire dans cette situation: vous devez sélectionner le champ de saisie du nom d'utilisateur, ressaisir votre nom d'utilisateur, appuyer sur tab ou cliquer pour sélectionner le champ de mot de passe, ressaisir le mot de passe, puis appuyer sur Entrée ou cliquer sur le bouton Soumettre. Pour l'utilisateur, cliquer pour fermer la fenêtre contextuelle est une opération de clic redondante (sauf si la fenêtre contextuelle bloque les champs de saisie, ce qui est alors un placement terrible et je suggérerais d'afficher ce message sous la forme d'une chaîne de texte sous le formulaire et non sous forme d'infobulle).
Une info-bulle est généralement associée à un élément et possède un pointeur vers celui-ci. Votre info-bulle indique "Il y a eu un problème" et pointe le bouton d'envoi comme si le bouton d'envoi avait été cliqué de manière incorrecte ou était en quelque sorte responsable d'un nom d'utilisateur/mot de passe incorrect. :) Donc, soit vous le pointez sur le champ nom d'utilisateur/mot de passe, soit vous utilisez un message d'erreur de texte sous le formulaire.
Je suis d'accord avec la réponse de Harijs.
Vous devez d'abord vous demander pourquoi vous utilisez l'info-bulle pour la gestion des erreurs. Voici un article utile:
Afin d'afficher des messages d'erreur sur les formulaires, vous devez prendre en compte les quatre règles de base suivantes:
Le message d'erreur doit être court et significatif.
L'emplacement du message doit être associé au champ.
Le style de message doit être séparé du style des étiquettes de champ et des instructions.
Le style du champ d'erreur doit être différent de celui du champ normal.
Vous ne devez pas non plus utiliser les info-bulles pour les messages d'erreur.
Les informations supplémentaires sont-elles une erreur, un avertissement ou un état? Si tel est le cas, utilisez un autre élément d'interface utilisateur, tel qu'une bulle, un message d'erreur ou une barre d'état. Les info-bulles des icônes de la zone de notification sont une exception car elles peuvent être utilisées pour afficher des informations d'état.
Source: http://msdn.Microsoft.com/en-us/library/aa511495.aspx#rightcontrol
Considérez également les conditions d'utilisation des info-bulles en premier lieu, comme indiqué dans un autre article SE ici:
Pour info-bulle ou pas pour info-bulle?
Je vous recommande fortement d'essayer une approche différente pour votre gestion des erreurs, en particulier lors de la connexion. Voici quelques bons exemples:
En utilisant la couleur:
Utilisation de l'espace à droite:
Sous chaque champ:
Cet exemple ressemble à une info-bulle, mais je pense que le message d'erreur y reste tant que la validation le marque comme incorrect. Cela peut être dynamique ou lorsque l'utilisateur clique sur se connecter.
J'utiliserais certainement un bouton de fermeture sur les info-bulles pour les sites Web réactifs car il n'y a rien de tel que le survol sur un appareil à écran tactile.
Ce serait dans les cas où l'infobulle est accessible via un clic au lieu d'un survol. Dans mon travail, je m'efforce d'avoir une seule méthode pour accéder à ce type d'informations afin de garder une base de code petite et que l'utilisateur n'ait qu'à apprendre une façon de faire les choses, quel que soit l'appareil qu'il utilise à ce moment-là.
Dans la pratique, cela m'a conduit à éviter d'utiliser le vol stationnaire du fait que les appareils à écran tactile deviennent si populaires.
Je pense que pour les info-bulles, le bouton "Fermer" sert à rassurer l'utilisateur qu'il s'agit bien d'une info-bulle et qu'elle peut être fermée. C'est une solution rapide pour les cas où les utilisateurs sont inexpérimentés avec les interfaces, et certainement pas une exigence.
N'oubliez pas que vous devez enseigner aux utilisateurs comment utiliser vos applications, pas seulement leur donner des "chevaux plus rapides".
Mais dans cet exemple spécifique, je ne pense pas que ce message devrait être affiché dans une info-bulle, mais dans un champ de texte qui répertorie toutes les erreurs rencontrées.