Info-bulles, où placer?
Nous avons une application Web interne, éditeur json. Il est extrêmement lourd, essentiellement des pages d'une forme imbriquée structurée en arbre.
Pensez à quelque chose comme ça, mais plus grand et certaines formes imbriquées dans d'autres formes, il est également important de noter , tout le Shebang est aligné à gauche de sorte que le trajet entre l'étiquette et l'entrée est large de quelques espaces .
Maintenant, ces formulaires ont beaucoup d'attributs, de types, de sous-types, de contraintes, etc. donc pour gérer cela, je me suis engagé à créer de super info-bulles (nous avions besoin de toute façon). Je ne savais pas vraiment qu'il s'appelait ainsi, mais vous pouvez les vérifier ici: nngroup.com/articles/best-application-designs/ Leur contenu est ajusté dynamiquement en réponse à l'élément survolé.
Maintenant, la question, actuellement, les info-bulles surviennent en survolant les formulaires de saisie pendant 400 ms. J'ai reçu une revue de code interne formelle et une revue de code interne informelle qui n'ont pas mentionné l'apparence, mais un demi-étranger (contact pour une autre équipe de la même entreprise) a fait une revue formelle où il a dit que les info-bulles appartiennent à l'élément d'étiquette et non à l'élément d'entrée. .
Je trouve cela bizarre car nous avons des info-bulles dans toutes sortes d'icônes de croix (supprimer), ouvertes, réduites et elles n'ont pas de texte dessus. Je ne suis même pas sûr qu'ils seraient découverts sans accident, car je ne me souviens pas avoir jamais vu d'infobulle sur la partie texte. Existe-t-il une meilleure pratique dans cette régression?
J'aime bien l'article du groupe NG et comment vous avez implémenté vos info-bulles.
En général, je ne suis pas le plus grand fan des info-bulles car elles sont assez inutiles sur les écrans tactiles.
Je suis d'accord avec la façon dont vous affichez l'info-bulle sur l'élément plutôt que sur le nom de la colonne ou de la ligne.
Voici quelque chose que vous pouvez faire pour permettre aux utilisateurs de les découvrir, mais ne les faites pas toujours apparaître, ce qui pourrait être gênant. À 400 ms en vol stationnaire, affichez une petite icône de cercle en haut à droite de ce rectangle avec un? Marquez dedans. Cela permet de savoir qu'il y a plus d'informations, c'est-à-dire une info-bulle sans être forcé de toujours le voir.
Icône de l'info-bulle Google pour voir ce que je suggère, je semble aussi être de la vieille école, la tendance semble être un petit cercle avec un je pour des informations que je suppose. J'aime le ? Je suis le cercle, mais un turk mécanique Amazon bon marché pourrait vous montrer si les utilisateurs en reconnaissent un de plus que l'autre.
Le fait d'avoir une info-bulle sur le champ d'entrée/de survol d'étiquette est trop caché et n'est découvert que par accident. Comment l'utilisateur sait-il quels éléments ont et quels éléments n'ont pas d'infobulle? Si vous indiquez d'une manière ou d'une autre qu'une entrée a une info-bulle (par exemple? À l'intérieur de l'entrée quelque part), comment gérez-vous l'ouverture de celle-ci pour l'écran tactile?
Recommandation
Par conséquent, j'utiliserais un élément de bouton séparé à côté du contrôle approprié qui peut être tapé ou cliqué. Cela révèle alors un popover avec le contenu de l'infobulle.
Maquette brute 
nous avons cette discussion dans mon équipe, mais d'un point de vue différent: l'accessibilité.
Donc, si nous utilisons un navigateur spécial pour les aveugles, il est inutile de placer l'infobulle après l'interaction (champ de texte, liste déroulante, etc.)
Elle doit être, au moins, entre le tag et l'interaction:
Nom (?) NameTextfield
Connaissez-vous un texte couvrant cela? Je n'ai rien trouvé sur les WCAG.
Pour moi, une info-bulle est "des informations dont certaines personnes peuvent avoir besoin, mais qui encombrent l'interface utilisateur, alors cachons-la pour l'instant".
En tant que tel, je soutiens généralement que la meilleure pratique est de s'en débarrasser. Soit il s'agit d'informations importantes, et, en tant que telles, elles devraient être affichées directement à l'écran, ou ce n'est pas si important, et elles n'ont probablement pas besoin d'être là du tout.
Quant à l'étiquette par rapport au champ, le contexte est tout. Si c'est du texte qui aide directement à définir ce qu'est le champ, il doit faire partie de l'étiquette. Si cela aide un utilisateur à saisir des données dans le champ, cela peut faire partie du champ. Dans les deux cas, l'utilisation d'une info-bulle compliquera à la fois la convivialité (en particulier sur les appareils tactiles) et l'accessibilité (faisable, mais nécessitera un balisage de fantaisie pour s'assurer qu'elle réussit).